X-Cart forums - Easy 2 image css button.tpl replacement

Hey All,

I'm working to replace all those wacky tables all over the place with css, today I replaced the default buttons (add to cart, add to wishlist, etc) with a simple two-image css rollover button (based on the dynamicdrive sliding doors button). It uses the same basic dimensions as default x-cart buttons for easy swapping in.

NOTE: Changing the simple link GO buttons was a quick afterthought, might get back to that later. Also doesn't replace other GO button uses like search, etc.
This may not be something that works well for your particular setup, I just thought I'd share.

Instructions:
1. Put css_button_left.gif and css_button_right.gif in skin1\images.
(Button source PSD attached, mine are very light so alter to suit. Top is regular state, bottom is rollover active state)

2. Replace \buttons\button.tpl in skin1\buttons with attached file.
(BACK UP YOUR OLD FILE!)

3. Add CSS below to skin1.css, customize as needed

Code:

/* BEGIN BUTTON CSS, adjust as needed */



a.cssbutton{

background: transparent url('images/css_button_left.gif') no-repeat top left;

display: block;

float: left;

font: normal 10px Verdana, Arial, Helvetica, sans-serif;

line-height: 10px; /* This value + top and bottom padding of SPAN must equal height of button  */

height: 14px; /* Height of button background height */

padding-left: 7px; /* Width of left menu image */

text-decoration: none;

}



a:link.cssbutton, a:visited.cssbutton, a:active.cssbutton{

color: #000; /*button text color*/

}



a.cssbutton span{

background: transparent url('images/css_button_right.gif') no-repeat top right;

display: block;

padding: 2px 7px 2px 0; /*Set 11px below to match value of 'padding-left' value above*/

}



a.cssbutton:hover{ /* Hover state CSS */

background-position: bottom left;

}



a.cssbutton:hover span{ /* Hover state CSS */

background-position: bottom right;

color: #900;

}



.cssbuttonwrapper{ /* Container you can use to surround a CSS button to clear float */

overflow: hidden;

width: 100%;

}



.csssimplebutton{ /* for simple text buttons without background images */

font: bold 10px Verdana, Arial, Helvetica, sans-serif;

float:left;

display:block;

}

a.csssimplebutton:hover{

color: #900

}



/* END BUTTON CSS */