I’m working on a mod that enables me to add a new field to certain products. I’ve gotten everything to work but now I can’t figure out how to change the color of the ‘ADD TO CART’ button for those specific products.The only issue I have is the CSS.
I have used FireFox, Chrome etc. to try and figure out the exact CSS of the original button but I cannot get it right. My new button does not look correct. I copied all of the relevant CSS from the original and created a new sprite in a different color. I renamed all of the classes and pointed the background image attribute to my new sprite. It’s using the new sprite but the ends are not properly aligned, the middle is too long and the hover effect does not work.
I want the button to look just like the original (active, hover etc.) only in a different color.
Is there maybe Ajax or JavaScript that’s needed?
Here’s what I have:
My button code:
<br />
<span class="AffButton-submit-big AffButton-wrap-left"><br />
<span class="AffButton-submit-big AffButton-wrap-right"><br />
<input type="button" value="Buy Now" onclick="window.open('{$product.aff_url}')" onmouseover="return overlib(caption1, WIDTH,750, HAUTO, VAUTO, FOLLOWMOUSE);" onmouseout="return nd();"><br />
</span><br />
</span><br />
```<br />
<br />
My CSS called from styles.post.tpl:<br />
```php
<br />
/* AffButtons */<br />
.AffButton a, .AffButton-action a, .AffButton-big a, .AffButton-submit-action input, .AffButton-submit input, .AffButton-submit-big input {<br />
border: 0 none;<br />
background: none;<br />
color: #fff;<br />
text-decoration: none;<br />
text-transform: uppercase;<br />
text-shadow: 0px 1px 0px #900;<br />
}<br />
.AffButton-submit-action input, .AffButton-submit input {<br />
margin-left: -5px;<br />
padding: 1px 15px;<br />
height: 28px;<br />
outline: 0;<br />
outline-width: 0;<br />
outline-style: none;<br />
background: none no-repeat left top;<br />
line-height: 22px;<br />
}<br />
.AffButton-submit-action.b-click input, .AffButton-submit.b-click input, .AffButton-action.b-click a, .AffButton-submit-big.b-click input {<br />
color: #e3d2d2;<br />
}<br />
.AffButton-submit-action input, .AffButton-submit input, x:-moz-any-link {<br />
padding: 0 15px 2px;<br />
}<br />
.AffButton a, .AffButton-action a {<br />
margin-left: -5px;<br />
padding: 0 15px 3px 15px;<br />
height: 27px;<br />
line-height: 29px;<br />
}<br />
/* Input buttons */<br />
.AffButton-submit-action.AffButton-wrap-left,<br />
.AffButton-submit.AffButton-wrap-left,<br />
.AffButton-action.AffButton-wrap-left,<br />
.AffButton.AffButton-wrap-left,<br />
.AffButton-submit-action.AffButton-wrap-right,<br />
.AffButton-submit.AffButton-wrap-right,<br />
.AffButton-action.AffButton-wrap-right,<br />
.AffButton.AffButton-wrap-right,<br />
.AffButton-submit-big.AffButton-wrap-left,<br />
.AffButton-big.AffButton-wrap-left,<br />
.AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-right {<br />
height: 28px;<br />
background: transparent url(../../images/AffButton_Sprite.png) no-repeat left top;<br />
}<br />
.AffButton-submit-action.AffButton-wrap-right,<br />
.AffButton-submit.AffButton-wrap-right,<br />
.AffButton-action.AffButton-wrap-right,<br />
.AffButton.AffButton-wrap-right,<br />
.AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-right {<br />
display: inline-block;<br />
margin-left: 5px;<br />
background-position: right -90px;<br />
}<br />
.AffButton-action.AffButton-wrap-left,<br />
.AffButton-submit-action.AffButton-wrap-left {<br />
background-position: left -178px;<br />
}<br />
.AffButton-action.AffButton-wrap-right,<br />
.AffButton-submit-action.AffButton-wrap-right {<br />
background-position: right -268px;<br />
}<br />
.AffButton-submit.AffButton-wrap-left.AffB-hover,<br />
.AffButton.AffButton-wrap-left.AffB-hover {<br />
background-position: left -30px;<br />
}<br />
.AffButton-action.AffButton-wrap-left.AffB-hover,<br />
.AffButton-submit-action.AffButton-wrap-left.AffB-hover {<br />
background-position: left -208px;<br />
}<br />
.AffButton-submit.AffButton-wrap-left.b-click,<br />
.AffButton.AffButton-wrap-left.b-click {<br />
background-position: left -60px;<br />
}<br />
.AffButton-action.AffButton-wrap-left.b-click,<br />
.AffButton-submit-action.AffButton-wrap-left.b-click {<br />
background-position: left -238px;<br />
}<br />
.AffButton-submit.AffButton-wrap-left.AffB-hover .AffButton-wrap-right,<br />
.AffButton.AffButton-wrap-left.AffB-hover .AffButton-wrap-right {<br />
background-position: right -120px;<br />
}<br />
.AffButton-action.AffButton-wrap-left.AffB-hover .AffButton-wrap-right,<br />
.AffButton-submit-action.AffButton-wrap-left.AffB-hover .AffButton-wrap-right {<br />
background-position: right -298px;<br />
}<br />
.AffButton-submit.AffButton-wrap-left.b-click .AffButton-wrap-right,<br />
.AffButton.AffButton-wrap-left.b-click .AffButton-wrap-right {<br />
background-position: right -150px;<br />
}<br />
.AffButton-action.AffButton-wrap-left.b-click .AffButton-wrap-right,<br />
.AffButton-submit-action.AffButton-wrap-left.b-click .AffButton-wrap-right {<br />
background-position: right -328px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-left,<br />
.AffButton-big.AffButton-wrap-left,<br />
.AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-right {<br />
height: 34px;<br />
background-position: left -356px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-right {<br />
background-position: right -476px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-left.AffB-hover,<br />
.AffButton-big.AffButton-wrap-left.AffB-hover {<br />
background-position: left -396px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-left.AffB-hover .AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-left.AffB-hover .AffButton-big.AffButton-wrap-right {<br />
background-position: right -516px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-left.AffB-hover.b-click,<br />
.AffButton-big.AffButton-wrap-left.AffB-hover.b-click {<br />
background-position: left -436px;<br />
}<br />
.AffButton-submit-big.AffButton-wrap-left.AffB-hover.b-click .AffButton-submit-big.AffButton-wrap-right,<br />
.AffButton-big.AffButton-wrap-left.AffB-hover.b-click .AffButton-big.AffButton-wrap-right {<br />
background-position: right -556px;<br />
}<br />
.AffButton-submit-big input, .AffButton-big a {<br />
margin-left: -5px;<br />
background: none;<br />
}<br />
.AffButton-submit input, .AffButton input, .AffButton a, .AffButton.AffButton-wrap-right:hover a, .ui-widget-content .AffButton a {<br />
color: #333;<br />
text-shadow: 0px 1px 0px #f7f7f7;<br />
}<br />
.AffButton-submit.b-click input, .AffButton.b-click input, .AffButton.b-click .AffButton.AffButton-wrap-right a, .AffButton.AffButton-wrap-right.b-click a, .ui-widget-content.b-click .AffButton a {<br />
color: #4d4d4d;<br />
}<br />
.AffButton-submit.AffButton-wrap-left.b-click input, .AffButton.AffButton-wrap-left.b-click input {<br />
text-shadow: 0px 1px 0px #e5e5e5;<br />
}<br />
/* /Input buttons */<br />