CSS3 Buttons [support thread]

[DivaVocals]

Hey lat9..... I'm baaaaaaaaaaaaaaaaaaaaaaaccccckkkk!!!

So I discovered that there is an OLD bug with CSS buttons that still exists using this module..

I of course did some hunting in the forum because I knew I couldn't have been the ONLY person who ran across this issue.. I hit paydirt..

The title of the first thread summarizes the issue I am having: Edit Bug on the Send Gift Certificate Confirmation page using CSS buttons

The issue appears to be that when using CSS buttons there's an issue passing parameters to certain CSS buttons.

Around that same time someone else discovered this same issue. Details in this thread: typo in html_output.php?

The issue is that I'm a tad confused as to WHICH one of the solutions posted is the RIGHT solution .. (help??)

[lat9]

Thanks for doing the heavy lifting, Diva! The CSS3 Buttons implementation of the button-related functions has always passed the $parameters input on to zenCssButton. Based on paulm's most-excellent analysis (7 years ago), I've created an update the zenCssButton function to add the _x to the button's name attribute, if that attribute is passed in the $parameters. I also took his suggestion and turned it into a regular expression. Note that the submit_redeem button for the ot_gv's processing also requires this correction. Let me know if this works for you and I'll (1) provide an update for the plugin and (2) provide the code as a suggestion/bugfix for the core-code version of the button-related processing.

  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 = '';

    if ($type == 'submit'){
// form input button
      // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value
      // by adding a _x to the name parameter (thanks to paulm for providing the fix for Zen Cart v1.3.6)!
      if (preg_match('/name="([a-z0-9\-_]+)"/', $parameters, $matches)) {
        $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
      }
      $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;
  }

[DivaVocals]

Thanks for doing the heavy lifting, Diva!

HA! for you!!! ANYTHING ma'am!!!

The CSS3 Buttons implementation of the button-related functions has always passed the $parameters input on to zenCssButton. Based on paulm's most-excellent analysis (7 years ago), I've created an update the zenCssButton function to add the _x to the button's name attribute, if that attribute is passed in the $parameters. I also took his suggestion and turned it into a regular expression. Note that the submit_redeem button for the ot_gv's processing also requires this correction. Let me know if this works for you and I'll (1) provide an update for the plugin and (2) provide the code as a suggestion/bugfix for the core-code version of the button-related processing.

  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 = '';

    if ($type == 'submit'){
// form input button
      // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value
      // by adding a _x to the name parameter (thanks to paulm for providing the fix for Zen Cart v1.3.6)!
      if (preg_match('/name="([a-z0-9\-_]+)"/', $parameters, $matches)) {
        $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
      }
      $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;
  }

You are BRILLIANT!!! So I made the change to: /includes/functions/html_output.php, and YES YES YES.. the "Edit" button on the "Send Gift Certificate Confirmation" page works AS EXPECTED!!!! Whoo hoo!!!

And yes I believe that the core code fix is what s_mack was after as well.. I do believe it was overlooked all these yeas as this really is sort of an obscure feature eh?? (I do seem to have a KNACK for finding these kinds of things don't I??)

[lat9]

That code update needed (er) an update to generate compliant HTML. Specifically, the "value" attribute passed in the $parameters needs to be stripped so that the value displayed is the text submitted on the zenCssButton call. Here's the re-updated zenCssButton function:

/**
 * 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 = '';

    if ($type == 'submit'){
// form input button
//-bof-v1.0.3a
      if ($parameters != '') {
        // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value
        // by adding a _x to the name parameter (thanks to paulm for providing the fix for Zen Cart v1.3.6!).  
        if (preg_match('/name="([a-zA-Z0-9\-_]+)"/', $parameters, $matches)) {
          $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
        }
        // If the input parameters include a "value" attribute, remove it since that attribute will be set to the input
        // text string.
        if (preg_match('/(value="[a-zA-Z0=9\-_]+")/', $parameters, $matches)) {
          $parameters = str_replace($matches[1], '', $parameters);
        }
      }
//-eof-v1.0.3a
      $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 . $parameters . '>&nbsp;' . $text . '&nbsp;</span>'; /*v1.0.3c-add $parameters*/
    }
    return $css_button;
  }

[DivaVocals]

That code update needed (er) an update to generate compliant HTML. Specifically, the "value" attribute passed in the $parameters needs to be stripped so that the value displayed is the text submitted on the zenCssButton call. Here's the re-updated zenCssButton function:

/**
 * 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 = '';

    if ($type == 'submit'){
// form input button
//-bof-v1.0.3a
      if ($parameters != '') {
        // If the input parameters include a "name" attribute, need to emulate an <input type="image" /> return value
        // by adding a _x to the name parameter (thanks to paulm for providing the fix for Zen Cart v1.3.6!).  
        if (preg_match('/name="([a-zA-Z0-9\-_]+)"/', $parameters, $matches)) {
          $parameters = str_replace('name="' . $matches[1], 'name="' . $matches[1] . '_x', $parameters);
        }
        // If the input parameters include a "value" attribute, remove it since that attribute will be set to the input
        // text string.
        if (preg_match('/(value="[a-zA-Z0=9\-_]+")/', $parameters, $matches)) {
          $parameters = str_replace($matches[1], '', $parameters);
        }
      }
//-eof-v1.0.3a
      $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 . $parameters . '>&nbsp;' . $text . '&nbsp;</span>'; /*v1.0.3c-add $parameters*/
    }
    return $css_button;
  }

Got it!!

[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

[lat9]

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.

[lat9]

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; }