![]() |
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}> with Code:
<TABLE border="0" cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonRed" {if $title ne ''} title="{$title}"{/if}> 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: |
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}> |
Re: Buttons - CSS v.4.0.x
Thank you Jon! It works!
|
Re: Buttons - CSS v.4.0.x
Glad to help. I'm sure this will help many members. Please check your PM.
|
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.