CSS3 Buttons [support thread]

top hatt:

I could use some more guidance with regards to the buttons.

I want to make the Add To Cart button larger and more pronounced. When I do that the Search button gets bigger also. I would like the Search button to stay the same size.

I want the Check Out button larger and more pronounced. The same size as the Add to Cart button. When I do that the Continue Shopping and the Shipping Estimator buttons get bigger also. I would like them to be the same size as the Search button.

input.button_in_cart, span.button_checkout {
  font-size: 13px;
}

I want the Previous Return Next buttons to be smaller. Right now they get bigger with the size of the Check Out button.

I someone could point me in the right direction on one of these issues I will try to figure out the rest.

I have been trying to change the css buttons stylesheet but it hasn't been working. Is that the right place or do I have to do look other places?

Dave
Your changes should be made to the stylesheet_css_buttons.css file; place any changes at the bottom of the file and make sure that you don't have any other stylesheet_css_buttons_xxx.css files that are in conflict.

Thanks for the help. I will try this out today.

I have changed my file system since the last time.

Dave

That bit of code worked out great. I have resized a number of buttons to be exactly what I wanted.

I have one more question though. I am trying to have the Update button and the Delete button show on the shopping cart page. I can't seem to get that to work. I think my spacing is okay, but nothing seems to work out.

Any guidance would be appreciated.

Dave

The Delete button is always shown as an icon. You can change the image used by copying /includes/languages/english/icon_names.php to /includes/languages/english/new1.5/icon_names.php and editing the name of the ICON_IMAGE_TRASH (make sure to copy the new icon to /includes/templates/new1.5/buttons/icons).

For the Update button, you'll copy/edit the same file to reduce the length of ICON_UPDATE_ALT; the default behavior is to use the button images of the alt-text is longer than 40 characters.

<?php
/**
 * @package languageDefines
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: icon_names.php 4224 2006-08-24 01:41:50Z drbyte $
 */

// define the icon images used in the project
define('ICON_IMAGE_ERROR', 'error.gif');
define('ICON_IMAGE_WARNING', 'warning.gif');
define('ICON_IMAGE_SUCCESS', 'success.gif');
define('ICON_IMAGE_TRASH', 'small_delete.gif');
define('ICON_IMAGE_UPDATE', 'button_update_cart.gif');
define('ICON_IMAGE_TINYCART', 'cart.gif');

//alt tags for buttons
define('ICON_ERROR_ALT', 'Error');
define('ICON_SUCCESS_ALT', 'Success');
define('ICON_WARNING_ALT', 'Warning');
define('ICON_TRASH_ALT', 'Delete this item from the cart by clicking this icon.');
define('ICON_UPDATE_ALT', 'Update');
define('ICON_TINYCART_ALT', 'Add this product to your cart by clicking here.');

?>

Thanks. That made my shopping cart page just how I wanted it.

I apologize for all the stupid questions, but some of this stuff does not seem that intuitively obvious.

Dave

I am interested in using these buttons on my site, but would like to test them before deleting current package? I am very new to zencart and know very little about it. I am currently in the buttons section of my site. If i click english all the buttons populate. I have downloaded the file. What should I do next?

VBE-1:

I am interested in using these buttons on my site, but would like to test them before deleting current package? I am very new to zencart and know very little about it. I am currently in the buttons section of my site. If i click english all the buttons populate. I have downloaded the file. What should I do next?Follow the install instructions in the readme of this add on and install it..

top hatt:

Thanks. That made my shopping cart page just how I wanted it.

I apologize for all the stupid questions, but some of this stuff does not seem that intuitively obvious.

Dave
I'm happy to have helped, Dave. I'll admit that it took me a while to figure out why the "Update" button wasn't working for you, since it's working fine on my site!

@vbe-1: Like DivaVocals said, just follow the instructions in the readme for the installation. You enable these buttons via the admin Configuration switch; your image buttons are not affected. You can always go back to your image buttons by "flipping" the configuration switch to indicate that you don't want to use the CSS buttons.

Hi,

First off, I thank you for this mod because it looks really cool. I'm having a slight problem with it though and I'm not sure what to do. I'm building a new shop and I installed the mod as instructed and edited the stylesheet to match my site. My problem is that some buttons aren't functioning as the CSS3 buttons until you mouseover them including the "search" button in the header and the "send now" button on the contact page. Could you tell me what I'm doing wrong? My shop is at http://shop.d9s.co/

Thank you!

It looks like you didn't completely install the plugin, since the HTML generated for the "normal" (i.e. link) and submit (i.e. input) buttons is the default Zen-Cart version. Make sure that you've correctly copied /includes/functions/html_output.php to your store.

lat9:

It looks like you didn't completely install the plugin, since the HTML generated for the "normal" (i.e. link) and submit (i.e. input) buttons is the default Zen-Cart version. Make sure that you've correctly copied /includes/functions/html_output.php to your store.

Ah, I see what happened. One mod overwrote the other. When I installed the Ceon SEO mod it overwrote the html_output.php file. I combined the two files and now it works just fine. Thank you so much for your help! I greatly appreciate it. :)

Since there was no change to the Zen Cart v1.5.1 version of /includes/functions/html_output.php and this plugin includes no calls to either htmlentities or htmlspecialchars, it's Zen Cart v1.5.1-ready!

Need some help.. I am trying to figure out how I can get the sold out button to have a different background color than other buttons on the product info/details page?? I tried adding a background color to .button_sold_out_sm in the stylesheet and that didn't work.. If I HAVE to I can use the trick to use the regular image button, but I am trying to keep this template as skinny as possible by using fewer graphics and more CSS..

DivaVocals, you always ask the "hard" questions. I'll give it a look tomorrow, but there's no easy answer right now. The unfortunate part is that the button-specific class is on the inner portion of the "normal" buttons and you need it on both the inner and outer to accomplish what you need. If you "need it now", you'll need to extend the button's alt-text (aka the trick) to force it to display as an image.

Here's an update to the zenCssButton function (in /includes/functions/html_output.php) that allows the individual buttons to be styled and also simplifies the HTML generated for the "normal_buttons".

/**
 * generate CSS buttons in the current language
 * concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart
 * note: any hard-coded buttons will not be able to use this function
**/
  function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
   global $css_button_text, $css_button_opts, $template, $current_page_base, $language;
   
   $button_name = basename($image, '.gif');
   
    // automatic width setting depending on the number of characters
//    $min_width = 80; // this is the minimum button width, change the value as you like
//    $character_width = 6.5; // change this value depending on font size!
    // end settings
    // added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
//    $width = strlen(html_entity_decode($text)) * $character_width;
//    $width = (int)$width;
//    if ($width < $min_width) $width = $min_width;
//    $style = ' style="width: ' . $width . 'px;"';
    // if no secondary class is set use the image name for the sec_class
    if (empty($sec_class)) $sec_class = $button_name;
    if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
    if(!empty($parameters))$parameters = ' ' . $parameters;
    $mouse_out_class  = 'cssButton ' . (($type == 'submit') ? 'submit_button button ' : 'normal_button button ') . $sec_class; /*v1.0.2c*/
    $mouse_over_class = 'cssButtonHover ' . (($type == 'button') ? 'normal_button button ' : '') . $sec_class . $sec_class . 'Hover'; /*v1.0.2c*/
    // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
    // (pure css hovers on non link elements do work work in every browser)
    $css_button_js .=  'onmouseover="this.className=\''. $mouse_over_class . '\'" onmouseout="this.className=\'' . $mouse_out_class . '\'"';
    
    if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
      $popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
      $tooltip = ' title="' . $popuptext . '"';
    } else {
      $tooltip = '';
    }
    $css_button = ''; /*v1.0.2a*/

    if ($type == 'submit'){
// form input button
      $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
    }

    if ($type=='button'){
// link button
//      $css_button .= '<span class="normal_button button"><span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span></span>'; 
      $css_button = '<span class="normal_button button ' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span>'; /*v1.0.2c*/
    }
    return $css_button;
  }

To have a different background color for button_sold_out_sm, you'll need to add to your stylesheet_css_buttons.css something like:

span.normal_button.button_sold_out_sm {
  background-color: blue;
}
span.normal_button.button_sold_out_smHover {
  background-color: red;
}

Note that these statements should be placed at the end of the file and the 'hover' styling must come after the regular version.

I'll be submitting v1.0.2 to the plugins area shortly.

lat9:

DivaVocals, you always ask the "hard" questions. I'll give it a look tomorrow, but there's no easy answer right now. The unfortunate part is that the button-specific class is on the inner portion of the "normal" buttons and you need it on both the inner and outer to accomplish what you need. If you "need it now", you'll need to extend the button's alt-text (aka the trick) to force it to display as an image.
Just an update on the 'trick' ... it only works for submit-type buttons, but if the button's alt-text (usually specified in /includes/languages/english/YOUR_TEMPLATE/button_names.php) is more than 30 characters in length, the button image is used instead of a CSS-formatted one.

lat9:

DivaVocals, you always ask the "hard" questions. I'll give it a look tomorrow, but there's no easy answer right now. The unfortunate part is that the button-specific class is on the inner portion of the "normal" buttons and you need it on both the inner and outer to accomplish what you need. If you "need it now", you'll need to extend the button's alt-text (aka the trick) to force it to display as an image.:laugh: Sorry about that.. It's a function of the work I do in my day job.. Pushing the limits of a system's capabilities..

I've been working on an "imageless/tableless" template using CSS only. Looking for a way to improve the site load speed, but lightening up the template a tad.. I installed this add-on of course for the buttons. I've been tweaking the buttons, and trying to figure out how to add a few touches to specific buttons to make them stand out a little more much like what one can do with their image button "cousins".

One of the other things I did was made some changes the "Search" buttons for the two search sideboxes (the one in the header vs the one in the regular sideboxes) so that they do not share the same button.. This allowed me to use the word "Go" (or I can now even use a font glyph of an hourglass) for the header search sidebox button without affecting the regular search sidebox's button.

lat9:

Here's an update to the zenCssButton function (in /includes/functions/html_output.php) that allows the individual buttons to be styled and also simplifies the HTML generated for the "normal_buttons".

/**

• generate CSS buttons in the current language

• concept from contributions by Seb Rouleau and paulm, subsequently adapted to Zen Cart

• note: any hard-coded buttons will not be able to use this function
  **/
  function zenCssButton($image = '', $text, $type, $sec_class = '', $parameters = '') {
  global $css_button_text, $css_button_opts, $template, $current_page_base, $language;

  $button_name = basename($image, '.gif');

  // automatic width setting depending on the number of characters
  // $min_width = 80; // this is the minimum button width, change the value as you like
  // $character_width = 6.5; // change this value depending on font size!
  // end settings
  // added html_entity_decode function to prevent html special chars to be counted as multiple characters (like &)
  // $width = strlen(html_entity_decode($text)) * $character_width;
  // $width = (int)$width;
  // if ($width < $min_width) $width = $min_width;
  // $style = ' style="width: ' . $width . 'px;"';
  // if no secondary class is set use the image name for the sec_class
  if (empty($sec_class)) $sec_class = $button_name;
  if(!empty($sec_class)) $sec_class = ' ' . $sec_class;
  if(!empty($parameters))$parameters = ' ' . $parameters;
  $mouse_out_class = 'cssButton ' . (($type == 'submit') ? 'submit_button button ' : 'normal_button button ') . $sec_class; /v1.0.2c/
  $mouse_over_class = 'cssButtonHover ' . (($type == 'button') ? 'normal_button button ' : '') . $sec_class . $sec_class . 'Hover'; /v1.0.2c/
  // javascript to set different classes on mouseover and mouseout: enables hover effect on the buttons
  // (pure css hovers on non link elements do work work in every browser)
  $css_button_js .= 'onmouseover="this.className=''. $mouse_over_class . ''" onmouseout="this.className='' . $mouse_out_class . ''"';

  if (CSS_BUTTON_POPUPS_IS_ARRAY == 'true') {
  $popuptext = (!empty($css_button_text[$button_name])) ? $css_button_text[$button_name] : ($button_name . CSSBUTTONS_CATALOG_POPUPS_SHOW_BUTTON_NAMES_TEXT);
  $tooltip = ' title="' . $popuptext . '"';
  } else {
  $tooltip = '';
  }
  $css_button = ''; /v1.0.2a/

  if ($type == 'submit'){
  // form input button
  $css_button = '<input class="' . $mouse_out_class . '" ' . $css_button_js . ' type="submit" value="' .$text . '"' . $tooltip . $parameters . ' />';
  }

  if ($type=='button'){
  // link button
  // $css_button .= '<span class="normal_button button"><span class="' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span></span>';
  $css_button = '<span class="normal_button button ' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' > ' . $text . ' </span>'; /v1.0.2c/
  }
  return $css_button;
  }

> To have a different background color for button_sold_out_sm, you'll need  to add to your stylesheet_css_buttons.css something like:
> ```
span.normal_button.button_sold_out_sm {
  background-color: blue;
}
span.normal_button.button_sold_out_smHover {
  background-color: red;
}

Note that these statements should be placed at the end of the file and the 'hover' styling must come after the regular version.

I'll be submitting v1.0.2 to the plugins area shortly.This is awesome!!! AND the really nice thing is that this allow me to even use some font glyphs for some/all of the buttons on a one by one basis (a bonus for me!! whoo hoo!!). One thing though there looks like a "shadow" of some sort on the top of the buttons (in this case I'm working on the sold out button).. I think it's the border displaying on the inner and outer portion of the normal buttons.. I'm not quite sure what to mess with in the stylesheet to remove the extra border..

lat9:

Just an update on the 'trick' ... it only works for submit-type buttons, but if the button's alt-text (usually specified in /includes/languages/english/YOUR_TEMPLATE/button_names.php) is more than 30 characters in length, the button image is used instead of a CSS-formatted one.Got it.. will make a note of this..

DivaVocals:

... One thing though there looks like a "shadow" of some sort on the top of the buttons (in this case I'm working on the sold out button).. I think it's the border displaying on the inner and outer portion of the normal buttons.. I'm not quite sure what to mess with in the stylesheet to remove the extra border..
I think I found it, not quite sure why it's causing the issue, but I changed this

.button, input.button, input.cssButtonHover {
  -moz-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  -webkit-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  box-shadow:inset 0px 1px 0px 0px #dbd8c0;
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  display:inline-block;
  font-family:Verdana;
  font-size:13px;
  font-weight:bold;
  margin: 0;
  padding:3px 8px;
  text-decoration:none;
}

to

.button, input.button, input.cssButtonHover {
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  display:inline-block;
  font-family:Verdana;
  font-size:13px;
  font-weight:bold;
  margin: 0;
  padding:3px 8px;
  text-decoration:none;
}

and the "shadow" appears to have gone with it. Unless I hear otherwise, I'll drop that styling from the v1.0.2 update.

lat9:

I think I found it, not quite sure why it's causing the issue, but I changed this

.button, input.button, input.cssButtonHover {
-moz-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
-webkit-box-shadow:inset 0px 1px 0px 0px #dbd8c0;
box-shadow:inset 0px 1px 0px 0px #dbd8c0;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
display:inline-block;
font-family:Verdana;
font-size:13px;
font-weight:bold;
margin: 0;
padding:3px 8px;
text-decoration:none;
}

> to
> ```
.button, input.button, input.cssButtonHover {
  -moz-border-radius:6px;
  -webkit-border-radius:6px;
  border-radius:6px;
  display:inline-block;
  font-family:Verdana;
  font-size:13px;
  font-weight:bold;
  margin: 0;
  padding:3px 8px;
  text-decoration:none;
}

and the "shadow" appears to have gone with it. Unless I hear otherwise, I'll drop that styling from the v1.0.2 update.

Ahh DUH!!! Silly me.. I can't believe missed that..:eek::rolleyes: No need to make this change to the stylesheet in the v1.0.2 update.. I adjusted my sold out button's settings as follows:

span.normal_button.button_sold_out_sm, span.normal_button.button_sold_out {
  background-color: red;
  -moz-box-shadow:inset 0px 0px 0px 0px #dbd8c0;
  -webkit-box-shadow:inset 0px 0px 0px 0px #dbd8c0;
  box-shadow:inset 0px 0px 0px 0px #dbd8c0;
}
span.normal_button.button_sold_out_smHover, span.normal_button.button_sold_outHover {
  background-color: blue;
  color: white;
}
span.normal_button.button_sold_out_sm {
  margin-top: 5px; /*Distance between small sold out button and other buttons/content on the listing pages*/
}

and away went the shadow..

BUT in making all these changes, I noticed that this change might need to be made in the stylesheet of the v1.0.2 update:
Change:

span.normal_button:active, span.submit_button:active, span.submit_button:active input {
  position:relative;
  [B]top:1px;[/B] /*causes the button to shift when you click it*/
}

To:

span.normal_button:active, span.submit_button:active, span.submit_button:active input {
  position:relative;
}

I noticed that making this change stopped the link buttons from "shifting" slightly when the button is clicked.