Custom Tabs for Jon's Easy Checkout mod

btomasie · #1 07-20-2005, 06:17 PM

Hi all,
I have been on here for about 6 months now, as I am building a pretty big online store. I was very impressed with the Easy Checkout mod and just recently purchased it. Install was a piece of cake and I really like everything about it.

I understand Jon probably made the default tabs really basic to be very "universal" and allow folks to change the colors of them and their borders. But for those that want simple-but-nice tabs that resemble Apple's, I wanted to contribute to the forum and share mine with you all. I think it's the little things sometimes that makes websites look professional looking.

Below is a screenshot of how it looks... sorry I have to blur out our logo until we get closer to going live. This screenshot and the tabs are saved to another domain that I do. Also, just a note that I also added the "Amazon Shopping Cart Greeting" that someone on here posted and I also liked very much so I added that. But that's not an out-of-the-box part of Easy Checkout.

http://www.xtremeperformancestores.com/brian/screenshot.jpg

Anyhow, the change to the home_checkout.tpl is pretty minor. I left the original "td.menu" and "td.menuback" and just created a "...2" version of each and modified them. Since we're using an image, there's no need for the edges (except the bottom part for the "back" ones so those tabs look set back behind the page). I also then changed the one table height to be 30 and then obviously had to switch the names in all of the 6 tab references to be "menu2" and "menuback2". Here's a copy and paste of that section of code:

Code:

<style type="text/css">
td.menuback{ 
	background-color: #C0C0C0;
	border-bottom: 1px #000000 solid;
	border-left: 1px #808080 solid;
	border-top: 1px #808080 solid;
}
td.menuback2{ 
	background-color: #C0C0C0;
	BACKGROUND: URL(skin1/images/custom/cart_tab_back.gif);
	border-bottom: 1px #000000 solid;
	}
td.menubackright{ 
	background-color: #C0C0C0;
	border-bottom: 1px #000000 solid;
	border-right: 1px #808080 solid;
	border-left: 1px #808080 solid;
	border-top: 1px #808080 solid;
}
td.menu { 
	background-color: #FFFFFF;
	border-left: 1px #000000 solid;
	border-top: 1px #000000 solid;
	border-right: 1px #000000 solid;
}
td.menu2 { 
	background-color: #FF0000;
	BACKGROUND: URL(skin1/images/custom/cart_tab.gif);
}
td.border {
	border-left: 1px #000000 solid;
	border-bottom: 1px #000000 solid;
	border-right: 1px #000000 solid;
}
td.borderbottom {
	border-bottom: 1px #000000 solid;
}
</style>
{/literal}
</head>
<body bgcolor="#FFFFFF">



<div align="center">
<center>

<table border="0" width="700" cellspacing="0" cellpadding="0">
<tr>
<td class="borderbottom">


[img]skin1/images/secure_checkout.gif[/img]</p>
</td>
<td width="480" valign="bottom">
<table border="0" width="100%" height="30" cellspacing="0" cellpadding="0">
<tr>
<td width="80" align="center" class="menuback2">{$lng.lbl_store}</td>
<td width="80" align="center"{if $mode eq ""} class="menu2"{else} class="menuback2{/if}">{$lng.lbl_your_cart}</td>
<td width="80" align="center"{if $mode eq "checkout" && $login eq ""} class="menu2"{else} class="menuback2"{/if}>{$lng.lbl_login}</td>
<td width="80" align="center"{if $mode eq "checkout" && $login ne "" && $paymentid eq ""} class="menu2"{else} class="menuback2"{/if}>{$lng.lbl_method}</td>
<td width="80" align="center"{if $mode eq "checkout" && $login ne "" && $paymentid ne ""} class="menu2"{else} class="menuback2"{/if}>{$lng.lbl_payment}</td>
<td width="80" align="center"{if $mode eq "order_message"} class="menu2"{else} class="menuback2"{/if}>{$lng.lbl_confirmation}</td>
</tr>
</table>
</td>
</tr>
</table>

Here are the tabs for you to save:
http://www.xtremeperformancestores.com/brian/cart_tab.gif
http://www.xtremeperformancestores.com/brian/cart_tab_back.gif

Enjoy!
Brian

Jon · #2 07-20-2005, 07:00 PM

Nice tabs

PremiumPonyParts · #3 07-20-2005, 07:13 PM

I think Ill have to be using these

Just gonna change the colors a bit.

http://premiumponyparts.com/example.jpg

Looks great. If someone wants the blue ones, let me know. Ill send them to you.

taltos1 · #4 06-01-2006, 08:56 AM

Wow, good stuff! just a hint, you can edit the size of your buttons by editing the table cell width and heights that hold the buttons. Of course, you need to edit the images as well or else you will have repeating backgrounds...
Thx!

gaussboy · #5 06-04-2006, 10:21 PM

Cool Mod - Thanks!

Here is a screenshot and a couple images. Note: I had to make my font for the back tabs white in the CSS.

http://www.gaussboys.com/xcart/skin1/images/custom/CartTabBlue.gif
http://www.gaussboys.com/xcart/skin1/images/custom/CartTabWhite.gif
http://www.gaussboys.com/xcart/skin1/images/custom/CartTabSnapshot.gif



	X-Cart forums © 2001-2020