X-Cart: shopping cart software

X-Cart forums (https://forum.x-cart.com/index.php)
-   Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)
-   -   Buttons - CSS v.4.0.x (https://forum.x-cart.com/showthread.php?t=41275)

clik 07-22-2008 12:31 PM

Buttons - CSS v.4.0.x
 
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:
Code:

<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
Code:

<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 07-22-2008 02:22 PM

Re: Buttons - CSS v.4.0.x
 
The best way in my opinion to pass the custom class, is in the include of button.tpl:

Use a custom ButtonGrey class:

Code:

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

Use the default class -

Code:

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

Then in your buttons/button.tpl:

Code:

<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 07-22-2008 03:20 PM

Re: Buttons - CSS v.4.0.x
 
Thank you Jon! It works!

Jon 07-22-2008 03:56 PM

Re: Buttons - CSS v.4.0.x
 
Glad to help. I'm sure this will help many members. Please check your PM.

gargonzo 01-23-2009 08:08 AM

Re: Buttons - CSS v.4.0.x
 
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.


All times are GMT -8. The time now is 06:55 PM.

Powered by vBulletin Version 3.5.4
Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.