Button Images in lieu of CSS-driven Text Buttons

[smcelligott]

Hi,

Most of the buttons we use are CSS driven so just display the ALT text in the button_names.php file (/includes/languages/english/ for those of you trying to play along at home), and that works fine.

However I want to use some more graphical whiz-bang buttons for our add to cart, and add to wishlist buttons. I have created my spectacular artwork as a GIF, as a JPG, and a PNG, and have placed said images in every Image folder I could find (all in my test account of course), but alas no joy.

I guessed there might be a 'turn on button images' somewhere, but cannot find that. And if some such beast is hiding somewhere in admin, does one have the ability to choose to select images only when available?

My apologies if this has been answered elsewhere, but I've searched and can't seem to find this particular situation.

Many thanks for your help!

[nigelt74]

to turn off css buttons

Admin > Configuration > Layout Settings > CSS Buttons

I am not sure if it can be done selectively

[lat9]

to turn off css buttons

Admin > Configuration > Layout Settings > CSS Buttons

I am not sure if it can be done selectively

There's a selective "trick", but it only works on submit-type buttons (like the add-to-cart). If the length of the alt-text for the associated button is greater than or equal to 30, then the button image will be used instead of the CSS button.

[Trinity14]

Hi,

I have created my spectacular artwork as a GIF, as a JPG, and a PNG, and have placed said images in every Image folder I could find

I put my custom .gif buttons here:
includes/templates/MY_TEMPLATE/buttons/english/

No hard work involved ;)

Hope that helps,

PS. you can change them in admin too if you desire though I prefer to keep those stock so I know what has been modified.

[numinix]

You could also override the CSS for the button class you wish to customize and set your image as the background.

[smcelligott]

There's a selective "trick", but it only works on submit-type buttons (like the add-to-cart). If the length of the alt-text for the associated button is greater than or equal to 30, then the button image will be used instead of the CSS button.

Great trick, but for those of you that want to try this, don't write "This is some random text of more than thirty characters" as THAT still appears on mouse-over.

I do have a question though about the "submit-type buttons." Not sure what this means, what kind of button would not be submit?

[lat9]

Great trick, but for those of you that want to try this, don't write "This is some random text of more than thirty characters" as THAT still appears on mouse-over.

I do have a question though about the "submit-type buttons." Not sure what this means, what kind of button would not be submit?

The submit-type buttons submit a form (like add_to_cart) and are generated via call to zen_image_submit; the normal/link-type buttons (like back) are generated via call to zen_image_button.

[smcelligott]

The submit-type buttons submit a form (like add_to_cart) and are generated via call to zen_image_submit; the normal/link-type buttons (like back) are generated via call to zen_image_button.

Is there a trick for those buttons? ;) The add to cart button is exactly what I wanted, but when I tried to do the same for "add-to-wishlist" I couldn't get it to recognise the image without editing the php, and when I did that I could never really get rid of the CSS style button, it just stayed in the background of the new art button. Hope that makes sense.

[lat9]

You could also override the CSS for the button class you wish to customize and set your image as the background.

Is there a trick for those buttons? ;) The add to cart button is exactly what I wanted, but when I tried to do the same for "add-to-wishlist" I couldn't get it to recognise the image without editing the php, and when I did that I could never really get rid of the CSS style button, it just stayed in the background of the new art button. Hope that makes sense.

Like numinix said before, you can modify your styling for the non-submit buttons to set the button image you've designed as the background image on a button-by-button case, using the button's name (which is also one of the button's classes) as the key.