I made nice looking images for
Add to Cart
and
Add to Wishlist, as seen below the products in the product view.
How would I go about replacing these with my own pictures? I tried to find the “Add to Cart” button myself among all these images, but failed …
Depending on your skin you are using, you have to change the styles.css and maybe also all templates including the “add to cart” and “add to wishlist” buttons.
Its not so easy to tell you how to replace without to see your skin/template code.
Its dark_whiteness. What am I looking for there?
there is a thread somewher by brandon about replacing the add to cart with an image
JOhn
Hello,
in this skin, by default, you have to adjust your css code to your new button… look within the skin folder at styles.css
line 133:
.button-submit-action, .button-submit, .button-submit-big, .button, .button-action, .button-big a {
background: url("images/but_right_action.gif") no-repeat scroll right top #DE3300;
height: 21px;
}
and line 143:
.button-submit-action input, .button-submit input, .button-submit-big input, .button-action a, .button-big a {
background: url("images/but_left_action.gif") no-repeat scroll left top transparent;
border: 0 none;
height: 21px;
line-height: 14px;
margin: 0;
padding: 3px 0 4px 9px;
}
Perhaps you have to also edit some other parts of this css to fit your new button. This code is about the “add to cart” button, … the “add to wishlist” link is another story, but if you give this link another css-class you can get your own buttons for “add to wishlist” too…
Good luck!
nxvc, it took me a while to sit down and do this, but I finally did yesterday. THANK YOU for your suggestion! It worked fine I think, still need to tweak some bits.
Basically, it seemed to replace the new button in all instances, which is fine, but now I need to find out which part refers to eg. the checkout button during checkout etc, as sometimes the text is longer than the button background image, and I would like to keep the text size as it is and reference in a “longer” button image. I hope you know what I mean.
For example, in styles.css it says :
.central-column .text-button,.central-column .text-button:visited,.central-column .text-button:hover,.central-column .text-button:active
which of these items refer to what? It seems some styles are used for quite a number of references at the same time in cs-cart.