X-Cart forums

[clik]

I used many ads-on posted in this forum and I decided to make a donation. Everybody who tried to modify buttons design knows that it▓s tricky. I created CSS buttons with mouse-over effect. Here is the page sample:
http://www.clikinternational.com/free/buttons/sample.html

There are 10 color variations. These CSS classes can be applied to <a>, <table>, <div>, <span> tags. And the best part is that they work with <table> based buttons onClick event.
How to add buttons in x-cart:

1. Download the files:
http://www.clikinternational.com/free/buttons/ColorButtons.zip
2. Copy CSS code from buttons.css file and ad to your skin1.css file.
3. Upload buttons folder into your skin1/images/
4. Modify skin1/buttons/button.tpl file:

Replace:

<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" style="cursor: pointer;" valign="middle"{if $title ne ''} title="{$title}"{/if}>
<TR><TD><{$img_type} src="{$ImagesDir}/but1.gif" width="7" height="14" border="0"{if $title ne ''} title="{$title}"{/if}></TD>
<TD class="Button" valign="middle" nowrap><FONT class="Button">&nbsp;{$button_title}&nbsp;</FONT></TD>
<TD><IMG src="{$ImagesDir}/but2.gif" width="7" height="14" border="0"{if $title ne ''} title="{$title}"{/if}></TD></TR>
</TABLE>

with

<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}"  class="ButtonRed" {if $title ne ''} title="{$title}"{/if}>
<TD nowrap>&nbsp;{$button_title}&nbsp;</TD>
</TABLE>

You can change class="ButtonRed" on other class from the CSS code.

Buttons look perfect in Firefox and Safari (Mac). Please let me know if there are any problems with other browsers. I used this code for my online store that is 4.0.11. (I know it's old version but it works.) I hope it works in new version of x-cart.
Anyways, you are free to use these CSS styles for your other projects.

Question to experts (I'm just a designer with some knowledge of coding):

How to apply different classes to different buttons? For example:
Add to cart -> ButtonRed
Add to wish list -> ButtonGrey,
etc...
Thank you.

[Jon]

The best way in my opinion to pass the custom class, is in the include of button.tpl:

Use a custom ButtonGrey class:

{include file="buttons/button.tpl" customclass="ButtonGrey" ... }

Use the default class -

{include file="buttons/button.tpl" ... }

Then in your buttons/button.tpl:

<table border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}"  class="{$customclass|default:"ButtonRed"}" {if $title ne ''} title="{$title}"{/if}>
<td nowrap>&nbsp;{$button_title}&nbsp;</td>
</table>

[clik]

Thank you Jon! It works!

[Jon]

Glad to help. I'm sure this will help many members. Please check your PM.

[gargonzo]

clik -- this is pretty cool.. anyone get it to work on any newer versions of xcart?

i tried with the latest and it did *not* work.