CSS3 Buttons [support thread]

[DivaVocals]

Answering my own question.. You know how sometimes you look at something for so long that you miss it until you share it with others to see where you messed up..

Found my own mistake in the code.. something silly really.. Corrected my code in the includes/languages/english/YOUR_TEMPLATE/button_names.php below.. (see changed code in green)

Here is my corrected CSS:

/* Search Header Sidebox Button */
input.submit_button.button_header_search, input.submit_button.button_sidebox_search {
    background: #9a9a9a;
    color: #fff;
    border: 0px solid #E8E8E8;
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}
input.cssButtonHover.button_header_search.button_header_searchHover, input.cssButtonHover.button_sidebox_search.button_sidebox_searchHover {
    background: #ccc;
    color: #111;
    border: 0px solid #E8E8E8;
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}

So what I do need to understand is WHY the hover code needs to be this:
input.cssButtonHover.button_header_search.button_header_searchHover

instead of this:
input.submit_button.button_header_searchHover

this isn't SUPER important.. just want to understand why the recommended CSS doesn't work for the button hover..

I'm baaaaaack!!! Breaking stuff again..

Okay so here's what I am trying to do.. For esthetic reasons I wanted to separate out the "Search" buttons for the three search interfaces (search header, search sidebox, search page). This allows me to use different text on the various search button ("Go!" versus "Search"), or even give each button a different look..

I've outlined the files I modified and the changes I made to support this.

Here's the issue.. I want the buttons for the sidebox and the search header to have a slightly look than the rest of my buttons.. But I'm not having good luck here.. I think I've missed something, but I'm not sure what it is..

This works on the header search the normal button works, but the hover does not.. On the sidebox it doesn't appear to work at all:

/* Search Header Sidebox Button */
input.submit_button.button_header_search, input.submit_button.button_sidebox_search {
    background: #9a9a9a;
    color: #fff;
    border: 0px solid #E8E8E8;
    /*margin: 0;
    padding: .25em;*/
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}
input.submit_button.button_header_searchHover, input.submit_button.button_sidebox_searchHover {
    background: #ccc;
    color: #111;
    border: 0px solid #E8E8E8;
    /*margin: 0;
    padding: .25em;*/
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}

This works on the header search both the normal button and hover works.. I can live with that , but I'm not sure why the code has to be so different.. On the sidebox it still doesn't appear to work:

/* Search Header Sidebox Button */
input.submit_button.button_header_search, input.submit_button.button_sidebox_search {
    background: #9a9a9a;
    color: #fff;
    border: 0px solid #E8E8E8;
    /*margin: 0;
    padding: .25em;*/
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}
input.cssButtonHover.button_header_search.button_header_searchHover,  input.cssButton.submit_button.button.button_sidebox_searchHover {
    background: #ccc;
    color: #111;
    border: 0px solid #E8E8E8;
    /*margin: 0;
    padding: .25em;*/
    font-family: 'Arial Black', sans-serif;
    font-size: 1em;
    cursor: pointer;
    /*Search button format make into a circle and change font*/
    width: 2.5em !important; height: 2.5em;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-transform:none;
}

Here's my test site where you can see all three buttons on one page:
http://zentestcart(dot)overthehillwe...dvanced_search


includes/languages/english/YOUR_TEMPLATE/button_names.php (items in blue are to support making CSS buttons text match most image button sets)

<?php
/**
 * @package languageDefines
 * @copyright Copyright 2003-2011 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: button_names.php 19690 2011-10-04 16:41:45Z drbyte $
 */


/**
 * define the button images used in the project
 */

define('BUTTON_IMAGE_ADD_TO_CART', 'button_add_to_cart.gif');
define('BUTTON_IMAGE_ADD_ADDRESS', 'button_add_address.gif');
define('BUTTON_IMAGE_ADD_PRODUCTS_TO_CART','button_add_selected.gif');
define('BUTTON_IMAGE_BACK', 'button_back.gif');
define('BUTTON_IMAGE_BUY_NOW', 'button_buy_now.gif');
define('BUTTON_IMAGE_CANCEL', 'button_cancel.gif');
define('BUTTON_IMAGE_CHANGE_ADDRESS', 'button_change_address.gif');
define('BUTTON_IMAGE_CHECKOUT', 'button_checkout.gif');
define('BUTTON_IMAGE_CONFIRM_SEND', 'button_confirm_send.gif');
define('BUTTON_IMAGE_CONFIRM_ORDER', 'button_confirm_order.gif');
define('BUTTON_IMAGE_CONTINUE', 'button_continue.gif');
define('BUTTON_IMAGE_CONTINUE_SHOPPING', 'button_continue_shopping.gif');
define('BUTTON_IMAGE_DELETE', 'button_delete.gif');
define('BUTTON_IMAGE_DELETE_SMALL', 'button_delete_small.gif');
define('BUTTON_IMAGE_DOWNLOAD', 'button_download.gif');
define('BUTTON_IMAGE_EDIT_SMALL', 'small_edit.gif');
define('BUTTON_IMAGE_IN_CART', 'button_in_cart.gif');
define('BUTTON_IMAGE_LOGIN', 'button_login.gif');
define('BUTTON_IMAGE_NEXT', 'button_next.gif');
define('BUTTON_IMAGE_PREVIOUS', 'button_prev.gif');
define('BUTTON_IMAGE_REDEEM', 'button_redeem.gif');
define('BUTTON_IMAGE_RETURN_TO_PROD_LIST', 'button_return_to_product_list.gif');
define('BUTTON_IMAGE_REVIEWS', 'button_reviews.gif');

//Separate the buttons for header search sidebox and the left/right sidebox. Allows for the possibility that alternate search buttons can be used. ie: search button that has the word "Go!" instead of "Search". BUTTON_IMAGE_SIDEBOX_SEARCH and BUTTON_IMAGE_HEADER_SEARCH has been added.
define('BUTTON_IMAGE_SEARCH', 'button_search.gif');
define('BUTTON_IMAGE_SIDEBOX_SEARCH', 'button_sidebox_search.gif'); /*image file does NOT have to exist for CSS buttons to work, but the constant name for the image file needs to be defined and it must match the constant*/
define('BUTTON_IMAGE_HEADER_SEARCH', 'button_header_search.gif');/*image file does NOT have to exist for CSS buttons to work, but the constant name for the image file needs to be defined and it must match the constant*/

define('BUTTON_IMAGE_SEND', 'button_send.gif');
define('BUTTON_IMAGE_SEND_A_GIFT_CERT', 'button_send_a_gift_cert.gif');
define('BUTTON_IMAGE_SEND_ANOTHER', 'button_send_another.gif');
define('BUTTON_IMAGE_SHIPPING_ESTIMATOR', 'button_shipping_estimator.gif');
define('BUTTON_IMAGE_SOLD_OUT','button_sold_out.gif');
define('BUTTON_IMAGE_SOLD_OUT_SMALL','button_sold_out_sm.gif');
define('BUTTON_IMAGE_SUBMIT', 'button_submit.gif');
define('BUTTON_IMAGE_UNSUBSCRIBE', 'button_unsubscribe.gif');
define('BUTTON_IMAGE_UPDATE', 'button_update.gif');
define('BUTTON_IMAGE_VIEW_SMALL', 'button_view.gif');
define('BUTTON_IMAGE_WRITE_REVIEW', 'button_write_review.gif');

define('BUTTON_IMAGE_READ_REVIEWS', 'button_read_reviews.gif');
define('BUTTON_IMAGE_GOTO_PROD_DETAILS', 'button_goto_prod_details.gif');
define('BUTTON_IMAGE_MORE_REVIEWS', 'button_more_reviews.gif');
define('BUTTON_IMAGE_CONTINUE_CHECKOUT', 'button_continue_checkout.gif');
//define('PREVNEXT_BUTTON_NEXT', '[Next&nbsp;&gt;&gt;]');
//define('PREVNEXT_BUTTON_LAST', 'LAST&gt;&gt;');

define('BUTTON_IMAGE_CREATE_ACCOUNT', 'button_create_account.gif');
define('BUTTON_IMAGE_LOG_OFF', 'button_logoff.gif');
/*
 * ALT tags used for buttons
 */

define('BUTTON_CREATE_ACCOUNT_ALT', 'Sign Up');
define('BUTTON_LOG_OFF_ALT', 'Log Off');
define('BUTTON_ADD_TO_CART_ALT', 'Add This to My Cart');
define('BUTTON_ADD_ADDRESS_ALT', 'Add Address');
define('BUTTON_ADD_PRODUCTS_TO_CART_ALT','Add Selected Products to Cart');
define('BUTTON_BACK_ALT', 'Back');
define('BUTTON_BUY_NOW_ALT', 'Buy Now');
define('BUTTON_CANCEL_ALT', 'Cancel');
define('BUTTON_CHANGE_ADDRESS_ALT', 'Change Address');
define('BUTTON_CHECKOUT_ALT', 'Checkout');
define('BUTTON_CONFIRM_SEND_ALT', 'Send Gift Certificate');

//define('BUTTON_CONFIRM_ORDER_ALT', 'Confirm Order');
define('BUTTON_CONFIRM_ORDER_ALT', 'Confirm the Order');

//define('BUTTON_CONTINUE_ALT', 'Continue');
define('BUTTON_CONTINUE_ALT', 'Continue Checkout');

define('BUTTON_CONTINUE_SHOPPING_ALT', 'Continue Shopping');
define('BUTTON_DELETE_ALT', 'Delete');
define('BUTTON_DELETE_SMALL_ALT', 'Delete');
define('BUTTON_DOWNLOAD_ALT', 'Download Now');
define('BUTTON_EDIT_SMALL_ALT', 'Edit');
define('BUTTON_IN_CART_ALT', 'Add to Cart');

//define('BUTTON_LOGIN_ALT', 'Sign In');
define('BUTTON_LOGIN_ALT', 'Login');

define('BUTTON_NEXT_ALT', 'Next');

//define('BUTTON_PREVIOUS_ALT', 'Previous');
define('BUTTON_PREVIOUS_ALT', 'Prev');

define('BUTTON_REDEEM_ALT', 'Redeem');

//define('BUTTON_RETURN_TO_PROD_LIST_ALT', 'Return to the Product List');
define('BUTTON_RETURN_TO_PROD_LIST_ALT', 'Listing');

define('BUTTON_REVIEWS_ALT', 'Go to the Reviews Page');

//Language definitions to separate the buttons for the header search sidebox, the search left/right sidebox, and the advanced search page. Allows for the possibility that alternate text can be used. ie: using the word "Go!" in the search header sidebox. BUTTON_SIDEBOX_SEARCH_ALT and BUTTON_HEADER_SEARCH_ALT has been added.
define('BUTTON_SEARCH_ALT', 'Search');
define('BUTTON_HEADER_SEARCH_ALT', 'Go!');
define('BUTTON_SIDEBOX_SEARCH_ALT', 'Go');

define('BUTTON_SEND_ALT', 'Send Now');
define('BUTTON_SEND_ANOTHER_ALT', 'Send Another Gift Certificate');
define('BUTTON_SEND_A_GIFT_CERT_ALT', 'Send A Gift Certificate');
define('BUTTON_SHIPPING_ESTIMATOR_ALT', 'Shipping Estimator');
define('BUTTON_SOLD_OUT_ALT', 'Sold Out');
define('BUTTON_SOLD_OUT_SMALL_ALT', 'Sold Out');

//define('BUTTON_SUBMIT_ALT', 'Submit the Information');
define('BUTTON_SUBMIT_ALT', 'Submit');

define('BUTTON_UNSUBSCRIBE', 'Unsubscribe');
define('BUTTON_UPDATE_ALT', 'Update');
define('BUTTON_VIEW_SMALL_ALT', 'View');

//define('BUTTON_WRITE_REVIEW_ALT', 'Write Review');
define('BUTTON_WRITE_REVIEW_ALT', 'Write a Review');

//define('BUTTON_READ_REVIEWS_ALT', 'Read the Review');
define('BUTTON_READ_REVIEWS_ALT', 'Read the Reviews');

//define('BUTTON_GOTO_PROD_DETAILS_ALT', 'Go To This Product\'s Detailed Information');
define('BUTTON_GOTO_PROD_DETAILS_ALT', '&nbsp;Product Details&nbsp;');

define('BUTTON_MORE_REVIEWS_ALT', 'Read More Reviews');

includes/languages/english/YOUR_TEMPLATE/header.php

<?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: header.php 2940 2006-02-02 04:29:05Z drbyte $
 */

// header text in includes/header.php
  define('HEADER_TITLE_CREATE_ACCOUNT', 'Create Account');
  define('HEADER_TITLE_MY_ACCOUNT', 'My Account');
  define('HEADER_TITLE_CART_CONTENTS', 'Shopping Cart');
  define('HEADER_TITLE_CHECKOUT', 'Checkout');
  define('HEADER_TITLE_TOP', 'Top');
  define('HEADER_TITLE_CATALOG', 'Home');
  define('HEADER_TITLE_LOGOFF', 'Log Out');
  define('HEADER_TITLE_LOGIN', 'Log In');

// added defines for header alt and text
  define('HEADER_ALT_TEXT', 'Powered by Zen Cart :: The Art of E-Commerce');
  define('HEADER_SALES_TEXT', 'TagLine Here');
  define('HEADER_LOGO_WIDTH', '192px');
  define('HEADER_LOGO_HEIGHT', '64px');
  define('HEADER_LOGO_IMAGE', 'logo.gif');

// header Search Button/Box Search Button
// HEADER_SEARCH_BUTTON has been moved to /includes/languages/english/YOUR_TEMPLATE/button_names.php
//  define('HEADER_SEARCH_BUTTON','Search');
  define('HEADER_SEARCH_DEFAULT_TEXT', 'Enter search keywords here');

includes/templates/YOUR_TEMPLATE/sideboxes/tpl_search.php

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2010 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: tpl_search.php 15881 2010-04-11 16:32:39Z wilt $
 */
  $content = "";
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
  $content .= zen_draw_form('quick_find', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get');
  $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
  $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px"') . '<br />' . zen_image_submit (BUTTON_IMAGE_SIDEBOX_SEARCH,BUTTON_SIDEBOX_SEARCH_ALT);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="18" maxlength="100" style="width: ' . ($column_width-30) . 'px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '<br />' . zen_image_submit(BUTTON_IMAGE_SIDEBOX_SEARCH,BUTTON_SIDEBOX_SEARCH_ALT);
    $content .= '<br /><a href="' . zen_href_link(FILENAME_ADVANCED_SEARCH) . '">' . BOX_SEARCH_ADVANCED_SEARCH . '</a>';
  }

  $content .= "</form>";
  $content .= '</div>';
?>

includes/templates/YOUR_TEMPLATE/sideboxes/tpl_search_header.php

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @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: tpl_search_header.php 9755 2008-09-19 19:47:22Z ajeh $
 */
  $content = "";
  $content .= zen_draw_form('quick_find_header', zen_href_link(FILENAME_ADVANCED_SEARCH_RESULT, '', $request_type, false), 'get');
  $content .= zen_draw_hidden_field('main_page',FILENAME_ADVANCED_SEARCH_RESULT);
  $content .= zen_draw_hidden_field('search_in_description', '1') . zen_hide_session_id();

  if (strtolower(IMAGE_USE_CSS_BUTTONS) == 'yes') {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;' . zen_image_submit (BUTTON_IMAGE_HEADER_SEARCH,BUTTON_HEADER_SEARCH_ALT);
  } else {
    $content .= zen_draw_input_field('keyword', '', 'size="6" maxlength="30" style="width: 100px" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"') . '&nbsp;' . zen_image_submit (BUTTON_IMAGE_HEADER_SEARCH,BUTTON_HEADER_SEARCH_ALT);
  }

  $content .= "</form>";
?>

[lat9]

I'll give it a peek ... probably tomorrow!

[DivaVocals]

I'll give it a peek ... probably tomorrow!

Thanks.. no big hurry really.. What I have going works.. I'm just perplexed why the shorthand version of the CSS doesn't work..

[RoPey]

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

Can I just say what a lifesaver these threads are. I've installed the CEON SEO mod today and experienced just the same thing. My CSS buttons all stopped working. I must have made a mistake somewhere because it was all fine on the test server, but somehow in my Winmerging, my html_output.php got missed and overwrote the CSS Buttons code.

A simple read through of the thread and there's the answer.

Thank you!

[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