CSS3 Buttons [support thread]

I am not sure if this is possible: I want my website store to look simple like http://thetruelightministry.org/dEMO/store.html . So far I have designed the store ( https://www.thetruelightministry.org/store ) with some tough coding but now I am not able to:

1. change top nav fonts
2. remove the sidebox space
3. make my footer bar background to be like the demo website.
4. make products inside the category to be same like the category grid (3 items per column)

I would really appreciate if anyone would provide some hints, links, or suggestion.

Thank you so so much in advance!!!

remops:

Hi need some help.

I would like to change the look and size of the add to cart button

I tried this just to see if it worked on a base color change

span.normal_button.button_in_cart_sm {
background-color: blue;
}
ispan.normal_button.button_in_cart_smHover {
background-color: red;
}

It did not

Thanks in advance
A link to your site would help. If you're not ready to have it indexed, specify it as www (dot) example (dot) com.

You might also try removing the _sm suffix from the button name, unless you've got a highly customized cart there's no such button as button_in_cart_sm.gif.

refinerztouch:

I am not sure if this is possible: I want my website store to look simple like http://thetruelightministry.org/dEMO/store.html . So far I have designed the store ( https://www.thetruelightministry.org/store ) with some tough coding but now I am not able to:

1. change top nav fonts
2. remove the sidebox space
3. make my footer bar background to be like the demo website.
4. make products inside the category to be same like the category grid (3 items per column)

I would really appreciate if anyone would provide some hints, links, or suggestion.

Thank you so so much in advance!!!
You might get better luck posting this in the general "Templates, Stylesheets, Page Layouts" area; your questions have nothing to do with the CSS3 Buttons plugin.

lat9:

A link to your site would help. If you're not ready to have it indexed, specify it as www (dot) example (dot) com.

You might also try removing the _sm suffix from the button name, unless you've got a highly customized cart there's no such button as button_in_cart_sm.gif.

http://www.thetissueboxcoverstore dot com/index.php?main_page=product_info&cPath=16_6&products_id=39

thanks

remops:

Hi need some help.

I would like to change the look and size of the add to cart button

I tried this just to see if it worked on a base color change

span.normal_button.button_in_cart_sm {
background-color: blue;
}
ispan.normal_button.button_in_cart_smHover {
background-color: red;
}

It did not

Thanks in advance
Try this, instead, since the add-to-cart button is a submit-type one:

input.submit_button.button_in_cart { background-color: blue; }
input.cssButtonHover.button_in_cart { background-color: red; }

lat9:

Try this, instead, since the add-to-cart button is a submit-type one:

input.submit_button.button_in_cart { background-color: blue; }
input.cssButtonHover.button_in_cart { background-color: red; }

THAT DID IT!:laugh:

Woo-hoo!

I have some buttons that are not working as css. example my "product detail" button and my update cart button. Is this controled by the button_name.php file?

thanks

"not working" is pretty open for interpretation, would you post a link to your site?

I'm not sure what your "Product Detail" button is, but if it's a rename of the "More info ..." link, then it's a plain-old HTML anchor link that isn't formatted via one of the Zen Cart button-related functions.

The 'Update Cart' button on the shopping_cart page is not a button per-se, it's an icon and is displayed with the zen_image function instead of zen_image_submit, so it won't be formatted as a CSS button.

lat9:

"not working" is pretty open for interpretation, would you post a link to your site?

I'm not sure what your "Product Detail" button is, but if it's a rename of the "More info ..." link, then it's a plain-old HTML anchor link that isn't formatted via one of the Zen Cart button-related functions.

The 'Update Cart' button on the shopping_cart page is not a button per-se, it's an icon and is displayed with the zen_image function instead of zen_image_submit, so it won't be formatted as a CSS button.

not working:lookaroun

Don't you just love it. The css type button is not replacing the gif button. You are correct that this is the common "more info"

The update is the update cart button where some use a circled with arrows gif.

Link http://www.rjfinewood.com/wood-tissue-box-cover/

Thanks for your help

remops:

not working:lookaroun

Don't you just love it. The css type button is not replacing the gif button. You are correct that this is the common "more info"

The update is the update cart button where some use a circled with arrows gif.

Link http://www.rjfinewood.com/wood-tissue-box-cover/

Thanks for your help

The update cart was explained already.. there is no CSS button equivalent for it because it's not a button to begin with..

The "Product Details" button within the front-page featured products' listing appears to be a CSS button, as is the "Update" button on your shopping cart page.

Once again, please give a more detailed description of what "is not working".

lat9:

The "Product Details" button within the front-page featured products' listing appears to be a CSS button, as is the "Update" button on your shopping cart page.

Once again, please give a more detailed description of what "is not working".

They are a gif image button not a css button. They work as far as a click thru but the button does not have a css effect. I'm sorry if I am not making myself clear.

I believe you were right that these are not a button just a image with a link.

Looking (and paying more attention this time), the "Product Details" button is -- as you said -- a .gif image. That image is within an HTML construct that looks like

<div class="product_detail"><a href="xxx"><img src="includes/templates/all_business/images/details.gif" alt="" width="116" height="22" /></a></div>

so you've got a selector (.product_detail and .product_detail img) that you can play with to style that area to have the same look & feel as your CSS buttons.

On the shopping cart page, the "Update" button is the only HTML element that matches the selector

#shoppingCartDefault input[type=image] {}

so you've got something to use to control that display as well.

Thanks again!

Learning something:smile:

Can you point me at an article or thread that may help in creating/changing these to css type?

Thanks

You can learn about CSS selectors at http://www.w3schools.com/cssref/css_selectors.asp. Once you've got a selector defined, you would apply CSS properties similar to those set in the stylesheet_css_buttons.css file.

I have the wishlist plugin installed and the button works fine if the css buttons are turned off. If I turn the buttons on the css button adds the item to the cart instead of the wishlist. I created the button below. Any ideas on the code to get it to submit to the wishlist?

Thanks

input.cssButton.wishlist_add {
 background-color: #EB7A17; 
 width: 140px;-moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  display:inline-block;
  font-family:Verdana;
  font-size:20px;
  font-weight:bold;
  margin: 0;
  padding:3px 8px;
  text-decoration:none;
  color: #FAF6F5;  /* Text color for submit buttons */}
  
input.cssButtonHover.wishlist_add { 
background-color: #F09443;
width:140px; 
font-size:20px;
color: #FAF6F5;  /* Text color for submit buttons */}

This is the wishlist html markup
That may help

Thanks

<input type="image" value="yes" name="wishlist" title=" Add to Wish List " alt="Add to Wish List" src="includes/templates/all_business/buttons/english/wishlist_add.gif">

and if I turn on the css buttons this is what the button html markup is

<input type="submit" name="wishlist" value="Add to Wish List" onmouseout="this.className='cssButton submit_button button  wishlist_add'" onmouseover="this.className='cssButtonHover  wishlist_add wishlist_addHover'" class="cssButton submit_button button  wishlist_add">

remops:

This is the wishlist html markup
That may help

Thanks

v1.0.3 has been submitted to the plugins (available here when approved: http://www.zen-cart.com/downloads.php?do=file&id=1386), providing a fix for:

If the *name *attribute is included in the $parameters for a submit-type button, need to "emulate" the return from an <input type="image" /> type button press by adding _x to the name specified. The solution is based on this thread in the Zen Cart forums.