X-Cart forums

[deadzebrainc]

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

/* 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 */

[roblen]

Thank you.. this worked perfect for us.

[whsu716]

An excellent mod - thank you!

[whsu716]

Would anyone know why the following would happen?

1) Add to cart works in Firefox but not in IE

2) The buttons for a) submitting registration b) sending to friend c) write review are all not functioning.

Add to cart, sign in, sign up, check out and others are working fine.

[JWait]

It probably has something to do with the "image verification" spambot module. All 3 of them, and "subscribe" to newsletter use it, or have the option to use it.

[xtech]

Will it work on 4.3 Versions???

[fcut27]

Any idea why the links for the buttons would be messed up using this script? My 'Add to Cart' buttons and 'Buy Now' buttons don't point to any certain page. I am using version 4.4.1.