Q: How can I change the default ubercart 'add to cart' button on the 'add to cart' form to a nice image button of my choosing?
A: The default button can be 'morphed' into an image button through the application of some crafty css as follows:
We love ubercart, it's just the thing for building eCommerce sites with drupal, however when straight out of box the it's just not much of a looker - it is more or less guaranteed to clash with your nice modern web design! One aspect that you may want to improve is the look of its 'Add to Cart' button on the 'Add to Cart' form. By default it's a fairly dowdy and old-fashioned submit button - but it can be quite easily 'replaced' by an image button.
There are different ways to achieve this, most revolve around altering the form's HTML through hooks and the like, but it can also be achieved more easily through CSS as this thread indicates:
http://www.ubercart.org/forum/support/7373/how_do_i_skin_my_add_cart_buttons
See post #2 (thanks Francois!) I got this to work well for me with just a few changes as follows:
<code>
.add-to-cart .form-submit { /* hide the submit button and put in a fancy little image, instead */
background-color: transparent; /* hide standard button display stuff */
border: none; /* hide standard button display stuff */
display:block;
height:27px;
background:url(images/addtocart.gif) no-repeat;
overflow:hidden;
text-decoration:none;
color:#fff;
cursor: pointer; /* make the mouse give the right feedback - IE stupidity, again */
}
</code>
Notice the changes to the CSS class names, they must have changed them since 2008. This CSS hides the original button (except for its text) and places our 'image button' in its place. Our image provides the button's background while the button's text is still provided by the original (hidden) button, its colour has been changed to white.
To get this to work for you, you will need to provide an image for the button (background:url(images/addtocart.gif) no-repeat;) and may need to play with the font colour and the height attribute. Hopefully with some small tweaks like this you can get the button looking the way you want!
