CSS3 Buttons [support thread]

[su35]

Hi lat9

following the direction from DivaVocals, I found here. I am not the use of this mod (just simply turn on the css button), however, I have a question about the css button to ask. On my test site, the IE Gradient Filter works on submit button only (IE7,8,9). Could you be kind tell me what make the different between the submit button and normal button? How to make the Gradient Filter works on the normal button?

Thanks

[DivaVocals]

Hi lat9

following the direction from DivaVocals, I found here. I am not the use of this mod (just simply turn on the css button), however, I have a question about the css button to ask. On my test site, the IE Gradient Filter works on submit button only (IE7,8,9). Could you be kind tell me what make the different between the submit button and normal button? How to make the Gradient Filter works on the normal button?

Thanks

I suggested coming here ONLY IF you are using the CSS Button add-on as this is the support thread for that add-on not a general CSS button questions thread.. Any answers already posted here are going to be based on using that module (as opposed to general questions as yours appear to be)

[Satu]

I'm getting confused with the input.submit button.
I am using COWOA and I would like to have an other color submit button for the checkout page. Right now I have submit button green and regular button blue.
Is there any way to do it? The blue button you can see after you put something in the cart and then go to the check out.
http://k-liteusa.com/shop/

Thank you.

[lat9]

I'm getting confused with the input.submit button.
I am using COWOA and I would like to have an other color submit button for the checkout page. Right now I have submit button green and regular button blue.
Is there any way to do it? The blue button you can see after you put something in the cart and then go to the check out.
http://k-liteusa.com/shop/

Thank you.

I'm not totally sure what you're asking, but what I "think" you want is for the "Check Out as Guest" button that is present on the login page to be blue like the other two buttons. If that's the case, you can add the following two lines to your stylesheet_css_buttons.css file (and you should really look into moving your template overrides into a directory other than classic!):

#loginDefault span.normal_button { background-color: #005D00; border: 1px solid #638263; }
#loginDefault span.normal_button:hover { background-color: #009900; }

That tells the browser to look for the id of loginDefault (only present in the main <div> on the login page) and for any <span>'s with the class of normal_button (only the COWOA one) to change the background color and border.

P.S. Nice dog! We've got two black mantle females!

[Satu]

Wow! It works beautifully. Just what I needed. Excellent! Thank you very much.
I will look into changing the "classic theme" to something else. Good point! Never thought of that.

p.s. Just love them Great Danes. This one is our 4th and he is Boston Black.

[DivaVocals]

This is minor, but driving me batty.. On the My Order History page (Shop » My Account » History), the "View" button text underlines when hovered.. I added this to the stylesheet, but nothing happens..

span.normal_button.button_viewHover {text-decoration: none;}

I even tried this:

span.cssButtonHover.normal_button.button.button_view.button_viewHover {text-decoration: none;}

and still no dice..

What the heck am I missing here??

[lat9]

The default (for the plugin, anyway) stylesheet_css_buttons.css contains the following towards the top:

.buttonRow a {
  text-decoration: none;
}
.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;
}

I'd need to create an account and make a purchase to be sure, but I'm guessing that you could just code:

.button, input.button, input.cssButtonHover {
  text-decoration:none;
}

to remove the underline attribute from all the buttons (normal and hover). If that doesn't work, you could PM me some test account credentials.

[DivaVocals]

The default (for the plugin, anyway) stylesheet_css_buttons.css contains the following towards the top:

.buttonRow a {
  text-decoration: none;
}
.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;
}

I'd need to create an account and make a purchase to be sure, but I'm guessing that you could just code:

.button, input.button, input.cssButtonHover {
  text-decoration:none;
}

to remove the underline attribute from all the buttons (normal and hover). If that doesn't work, you could PM me some test account credentials.

except for the font-family and the inline-block this is all the same.. I'll PM you credentials to see what I see..

[DivaVocals]

The default (for the plugin, anyway) stylesheet_css_buttons.css contains the following towards the top:

.buttonRow a {
  text-decoration: none;
}
.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;
}

I'd need to create an account and make a purchase to be sure, but I'm guessing that you could just code:

.button, input.button, input.cssButtonHover {
  text-decoration:none;
}

to remove the underline attribute from all the buttons (normal and hover). If that doesn't work, you could PM me some test account credentials.

except for the font-family and the inline-block this is all the same.. I'll PM you credentials to see what I see..

Thanks to my secret code ninja, I got the HINT I needed..

I added this the the CSS button stylesheet:

/* Remove the text underline from the My Account Information page "View" buttons*/
#tdcol6 a {text-decoration: none;}

/* Remove the text underline from the My Order History page "View" buttons*/
.content a {text-decoration: none;}

and dammed if that didn't do it!!!

[DivaVocals]

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_search.gif');
define('BUTTON_IMAGE_HEADER_SEARCH', 'button_header_search.gif');

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