X-Cart forums - Custom Tabs for Jon's Easy Checkout mod

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