Forums / Templates, Stylesheets, Page Layout / Disable CSS buttons for some buttons and not others

Disable CSS buttons for some buttons and not others

Views: 1,812

Results 1 to 9 of 9
15 Nov 2013, 12:49 PM
#1
longstockings avatar

longstockings

Zen Follower

Join Date:
Jul 2004
Posts:
198
Plugin Contributions:
0

Disable CSS buttons for some buttons and not others

Hi

I'd like to change the add to cart button to something a bit more fancy. All of the other buttons within my store use CSS and look fine. Can I disable the css button for add to cart and use my own graphic button instead and if so how.

Thanks

UK based Zen Cart Web Designer here https://www.handcoded.co.uk

15 Nov 2013, 1:15 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Disable CSS buttons for some buttons and not others

That would require custom coding, but you can change the CSS on a particular button to make it stand out from the others.

15 Nov 2013, 1:24 PM
#3
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Disable CSS buttons for some buttons and not others

Darn seven-minute edit limit. You could add something like this to stylesheet_css_buttons.css:

.button_in_cart {background-image: url(../images/tile_back.gif);}

15 Nov 2013, 2:22 PM
#4
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,110
Plugin Contributions:
56

Re: Disable CSS buttons for some buttons and not others

Since the add-to-cart button is a submit-type button, the default button-processing won't call the CSS button function if the button's alt-text is longer than 30 characters. So you can just change the define (in /includes/languages/english/YOUR_TEMPLATE/button_names.php)

define('BUTTON_ADD_TO_CART_ALT', 'Add This to My Cart');
``` to have move than 30 characters and the add-to-cart button image will be loaded instead!
15 Nov 2013, 2:48 PM
#5
longstockings avatar

longstockings

Zen Follower

Join Date:
Jul 2004
Posts:
198
Plugin Contributions:
0

Re: Disable CSS buttons for some buttons and not others

Thanks for that.

Unfortunately that didn't work. Here is my code for the add to cart button.

<input class="cssButton button_in_cart" onmouseover="this.className='cssButtonHover button_in_cart button_in_cartHover'" onmouseout="this.className='cssButton button_in_cart'" type="submit" value="Add to Cart" style="width: 80px;">

UK based Zen Cart Web Designer here https://www.handcoded.co.uk

15 Nov 2013, 6:40 PM
#6
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,110
Plugin Contributions:
56

Re: Disable CSS buttons for some buttons and not others

My bad, I gave you the wrong button ... change ```
define('BUTTON_IN_CART_ALT', 'Add to Cart');

15 Nov 2013, 11:14 PM
#7
longstockings avatar

longstockings

Zen Follower

Join Date:
Jul 2004
Posts:
198
Plugin Contributions:
0

Re: Disable CSS buttons for some buttons and not others

Brilliant!

That worked a treat. I didn't know about the 30 character limit.

Thanks very much.

UK based Zen Cart Web Designer here https://www.handcoded.co.uk

16 Nov 2013, 12:41 PM
#8
lat9 avatar

lat9

Administrator

Join Date:
Sep 2009
Location:
Stuart, FL
Posts:
14,110
Plugin Contributions:
56

Re: Disable CSS buttons for some buttons and not others

longstockings:

Brilliant!

That worked a treat. I didn't know about the 30 character limit.

Thanks very much.
You're very welcome! Remember that the 30-character limit applies only to submit-type buttons.

16 Nov 2013, 3:00 PM
#9
design75 avatar

design75

Totally Zenned

Join Date:
Dec 2009
Location:
Amersfoort, The Netherlands
Posts:
2,862
Plugin Contributions:
5

Re: Disable CSS buttons for some buttons and not others

longstockings:

Hi

I'd like to change the add to cart button to something a bit more fancy. All of the other buttons within my store use CSS and look fine. Can I disable the css button for add to cart and use my own graphic button instead and if so how.

Thanks

For this I always use the old css button module from Paulm : http://www.zen-cart.com/downloads.php?do=file&id=169

This one automatically uses css when no image is available