CSS3 Buttons [support thread]

[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".

[remops]

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.

[lat9]

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.

[remops]

Thanks again!

Learning something

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

Thanks

[lat9]

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.

[remops]

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 */}

[remops]

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">