How to modify Add To Cart Button Tutorial

[buhnad]

to have a nice looking add to cart button
using ftp edit /components/com_virtuemart/assets/css/vmsite-ltr.css
Replace

Code Select Expand

span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:152px;background:#e8e8e8 url(../images/vmgeneral/backgrounds.png) top repeat-x;background-position:0 -160px;color:#fff;border:solid #00a000 1px;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:14px;cursor:pointer;height:34px;text-align:center;letter-spacing:1px;padding:4px 5px;}
By

Code Select Expand


span.addtocart-button input.addtocart-button,span.addtocart-button input.notify-button{width:96px;background:url(../images/vmgeneral/btn_add.png);color:#fff;border:solid #00a000 0px;border-radius:0px;-webkit-border-radius:4px;-moz-border-radius:4px;font-size:12px;cursor:pointer;height:25px;text-align:center;letter-spacing:1px;padding:4px 5px;}
Then Upload this image http://postimage.org/image/cnbt4n7td/ to components/com_virtuemart/assets/images

[Da_Hobit]

Thnx for sharing !

one (small) remark -> you need to upload the image to 'components/com_virtuemart/assets/images/vmgeneral' instead of 'components/com_virtuemart/assets/images' like you say ... or just change the path in the code

[ricewing]

This is just want I needed.  I modified the code just a bit more.  because my button is a bit larger and already has text in the graphic font to match our Sci-Fi Theme I change the width to width:125px and the height to height:33px.  I then changed the font-size to font-size:0px so the text will not show on the button.

I have emailed the developers and asked them to include an easy way in the program to change our buttons.  I hope they listen.

Ric

[ricewing]

Anyone have code updates to change the green "Check Out Now" button to a custom button?  Similar to this Add to Cart button change?

Thanks anyone,

Ric