CSS3 Buttons [support thread]

[DivaVocals]

not working

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

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

[lat9]

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

Well , I fixed that a couple of months ago and never uploaded the changes. Let me get v1.0.3 packaged and uploaded and then I'll post the change to get this working.

[lat9]

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.