Results 1 to 9 of 9
  1. #1
    Join Date
    Nov 2009
    Location
    Sydney Australia
    Posts
    84
    Plugin Contributions
    0

    Default Button Images in lieu of CSS-driven Text Buttons

    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!
    Sean M - Sydney, Australia

  2. #2
    Join Date
    Sep 2005
    Location
    Waikato, New Zealand
    Posts
    1,539
    Plugin Contributions
    3

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    to turn off css buttons

    Admin > Configuration > Layout Settings > CSS Buttons

    I am not sure if it can be done selectively
    Webzings Design
    Semi retired from Web Design

  3. #3
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,874
    Plugin Contributions
    96

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by nigelt74 View Post
    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.

  4. #4
    Join Date
    Jan 2014
    Location
    Ontario, Canada
    Posts
    252
    Plugin Contributions
    3

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by smcelligott View Post
    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.

  5. #5
    Join Date
    Apr 2007
    Location
    Vancouver, Canada
    Posts
    1,564
    Plugin Contributions
    71

    Default Re: Button Images in lieu of CSS-driven Text Buttons

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

  6. #6
    Join Date
    Nov 2009
    Location
    Sydney Australia
    Posts
    84
    Plugin Contributions
    0

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by lat9 View Post
    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?
    Sean M - Sydney, Australia

  7. #7
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,874
    Plugin Contributions
    96

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by smcelligott View Post
    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.

  8. #8
    Join Date
    Nov 2009
    Location
    Sydney Australia
    Posts
    84
    Plugin Contributions
    0

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by lat9 View Post
    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.
    Sean M - Sydney, Australia

  9. #9
    Join Date
    Sep 2009
    Location
    Stuart, FL
    Posts
    13,874
    Plugin Contributions
    96

    Default Re: Button Images in lieu of CSS-driven Text Buttons

    Quote Originally Posted by numinix View Post
    You could also override the CSS for the button class you wish to customize and set your image as the background.
    Quote Originally Posted by smcelligott View Post
    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.

 

 

Similar Threads

  1. v154 Edit text on .css buttons
    By lorhan in forum General Questions
    Replies: 2
    Last Post: 15 Feb 2015, 08:16 PM
  2. CSS Buttons Excluding Search Button?
    By Inxie in forum Templates, Stylesheets, Page Layout
    Replies: 9
    Last Post: 14 Mar 2013, 05:51 PM
  3. Help with using css buttons, "update cart' does not use the css buttons?
    By trinitypres in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 1 Jan 2011, 04:34 PM
  4. Update Cart Button with CSS Buttons
    By seandavidson in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 21 May 2008, 12:39 AM
  5. Image in lieu of text heading...possible?
    By sam18204 in forum Basic Configuration
    Replies: 2
    Last Post: 2 Sep 2006, 03:34 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg