X-Cart forums

[Zaja]

I believe it's time for replacing the table based buttons with pure css, here is a method(x-cart v. 4.1.6 to 4.1.11).
-------------------------------------------------------------------------

1) Copy attached button.tpl file to the skin1/buttons directory.

2) Copy attached but_bg.gif and but_bg_hover.gif files to the skin1/images directory.

3) Open the skin1.css file and replace Buttons classes with following code.

/*
 Buttons
*/
.FormButton { color: #860000; font-weight: bold; }
.Button, .ButtonOn { padding: 3px 10px 3px 15px; float: left; display: block; background: no-repeat left bottom; cursor: pointer; }
.Button { border-right: 1px solid #333; border-bottom: 1px solid #333; background: #c1c1c1 url(images/but_bg.gif); color: #282828; }
.ButtonOn { border-right: 1px solid #415715; border-bottom: 1px solid #415715; background: #a7d34e url(images/but_bg_hover.gif); color: #000; }
.SimpleButton { padding: 0; white-space: nowrap; }
.SimpleButton a, .SimpleButton a:hover { padding-right: 3px; color: #5d0000; font-weight: bold; text-decoration: none; }
.SimpleButton a:hover { color: #f20000; }
.GoImage { vertical-align: middle; }

 

[hooter]

Zaja,

Most excellent!

[Warwick]

Useful!

Thanks for sharing

[janeo]

your a gem - works well!

[xtech]

Originally Posted by Zaja

I believe it's time for replacing the table based buttons with pure css, here is a method(x-cart v. 4.1.6 to 4.1.11).
-------------------------------------------------------------------------

1) Copy attached button.tpl file to the skin1/buttons directory.

2) Copy attached but_bg.gif and but_bg_hover.gif files to the skin1/images directory.

3) Open the skin1.css file and replace Buttons classes with following code.

/*
 Buttons
*/
.FormButton { color: #860000; font-weight: bold; }
.Button, .ButtonOn { padding: 3px 10px 3px 15px; float: left; display: block; background: no-repeat left bottom; cursor: pointer; }
.Button { border-right: 1px solid #333; border-bottom: 1px solid #333; background: #c1c1c1 url(images/but_bg.gif); color: #282828; }
.ButtonOn { border-right: 1px solid #415715; border-bottom: 1px solid #415715; background: #a7d34e url(images/but_bg_hover.gif); color: #000; }
.SimpleButton { padding: 0; white-space: nowrap; }
.SimpleButton a, .SimpleButton a:hover { padding-right: 3px; color: #5d0000; font-weight: bold; text-decoration: none; }
.SimpleButton a:hover { color: #f20000; }
.GoImage { vertical-align: middle; }

 

Excellent codes for 4.1.x versions now can you help me for 4.3 versions???

[Learner]

Hi Zaja I want to modify it for 4.4 versions.How it is possible for latest versions?

waiting for your reply..