CSS3 Buttons [support thread]

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

[Dream9Studios]

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

[lat9]

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!

[DivaVocals]

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

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

[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 . ' >&nbsp;' . $text . '&nbsp;</span></span>'; 
      $css_button = '<span class="normal_button button ' . $mouse_out_class . '" ' . $css_button_js . $tooltip . ' >&nbsp;' . $text . '&nbsp;</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.

[DivaVocals]

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.

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.

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 . ' >&nbsp;' . $text .  '&nbsp;</span></span>'; 
      $css_button = '<span class="normal_button button ' .  $mouse_out_class . '" ' . $css_button_js . $tooltip . ' >&nbsp;' .  $text . '&nbsp;</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..

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

[lat9]

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

[DivaVocals]

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.. 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;
  top:1px; /*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.