CSS3 Buttons [support thread]

[lat9]

Regardless the confusion, v1.1.1 is now available for download from the Plugins.

[lat9]

I've just submitted v1.1.2 to the plugins for review. That version incorporates downward-compatible changes introduced in Zen Cart v1.5.5.

Please note that the base functionality of this plugin has been included in the Zen Cart core since v1.5.2. This plugin now extends that functionality, providing a method to insert Font Awesome glyphs into your CSS buttons. If you are running Zen Cart v1.5.2 or later, you'll need to install this plugin only if you want that additional functionality for your store.

[lat9]

v1.1.2 is now available for download.

[DivaVocals]

Please note that the base functionality of this plugin has been included in the Zen Cart core since v1.5.2. This plugin now extends that functionality, providing a method to insert Font Awesome glyphs into your CSS buttons. If you are running Zen Cart v1.5.2 or later, you'll need to install this plugin only if you want that additional functionality for your store.

This is GOOD to know!!!

[dw08gm]

Finally got round to changing over to css buttons. Took me a while to work out why my customisations of certain buttons were not taking affect.

Turns out I had changed most of the *.gif buttons and language defines to *.png but had forgotten about this line of code in function zenCssButton in \includes\functions\html_output.php

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

Changing .gif to .png fixed my immediate problems, however, it seems that I may have to change this code and all the .png buttons and language defines back to .gif because there is currently no provision for mixed image types (eg gif, png, jpg). Sigh!

[lat9]

Finally got round to changing over to css buttons. Took me a while to work out why my customisations of certain buttons were not taking affect.

Turns out I had changed most of the *.gif buttons and language defines to *.png but had forgotten about this line of code in function zenCssButton in \includes\functions\html_output.php

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

Changing .gif to .png fixed my immediate problems, however, it seems that I may have to change this code and all the .png buttons and language defines back to .gif because there is currently no provision for mixed image types (eg gif, png, jpg). Sigh!

That code fragment can be made extension-agnostic with a small code change:

   $button_name = pathinfo ($image,  PATHINFO_BASENAME);

I don't know if it's too late to "catch" Zen Cart v1.5.5 for this change, but I'll be (re-)submitting an update to this plugin (and its admin-level sibling) real-soon-now.

UPDATE: Having written that, since the zenCSSButton function doesn't really care about the file extension of the image-based button, I don't think that that's the solution!

[DivaVocals]

Wanted to share a variation of lat9's post regarding the shopping cart icons.. What follows is how I replaced the trash can and refresh icons in the shopping cart with Font Awesome glyphs.
Edit /includes/languages/english/YOUR_TEMPLATE/icon_names.php and editing the name of the ICON_UPDATE_ALT

<?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', '&#xf021;');
define('ICON_TINYCART_ALT', 'Add this product to your cart by clicking here.');

?>

Added the following to the stylesheet:

button.button_update_cart:hover {
background: none repeat scroll 0% 0% #CAC7C2;
border: 1px solid #CAC7C2;
}

button.button_update_cart {
background: none repeat scroll 0% 0% #0037B4;
border: 1px solid #0037B4;
padding:0;
display:block;
width:30px;
height:30px;
border-radius:15px;
font-size:15px;
line-height:30px;
cursor: pointer;
text-align:center;
text-decoration: none;
font-family: "FontAwesome";
}

Modify the color and font size to your liking.


Edit line 113 of includes/templates/YOUR_TEMPLTAE/templates/tpl_shopping_cart_default.php as follows

<a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, 'action=remove_product&product_id=' . $product['id']); ?>"><i class="fa fa-trash"></i></a>

Added the following to the stylesheet:

.cartRemoveItemDisplay .fa-trash {color:#0037B4;font-size:2rem;}

Modify the color and font size to your liking.

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.');

?>

[lat9]

I've just submitted v1.1.3 to the Plugins for review; it can be downloaded once approved. Starting with this version, your store must be running Zen Cart v1.5.4 or later for the plugin to be successfully installed. Please use the plugin's v1.1.1 distribution for Zen Cart installations prior to v1.5.4.

This version no longer distributes the overridden files (/includes/functions/html_output.php and /includes/templates/YOUR_TEMPLATE/common/html_header.php), since those files have a wide variation over Zen Cart versions and your installed template. Instead, the installation instructions identify the code fragments that you'll need to add to those files.

[lat9]

v1.1.3 is now available for download.

[Feznizzle]

Hi,

I just installed this mod into a zc155e. I messed it up somehow and can't figure out what I did wrong.

Here is a link to my cart:
https://001mc.justmedical.biz/

If you add something to the shopping cart, then go to the shopping cart page, you'll see a nice selection of wonky buttons.

Interestingly, I was able to get the little trashcan icon working nicely. What I don't understand is why the "Continue Shopping" and "Shipping Estimator" buttons are messed up.

Can somebody take a look and poing me in the right direction?

Thanks!

++++
MORE INFO:
My template is a clone of Responsive Classic, plus the following mods:
Responsive Color Changes v1.1a
Image Handler 4 v4.3.2
Zen Lightbox v1.6.5
Recently Viewed Items v2.3
Ceon URI Mapping (SEO) v4.5.2

Btw: After I noticed the problems, I revert both the db and file set to exactly as it was right after installing Ceon URI. Everything was working and only threw 3 minor validation warnings (https://validator.w3.org). Then I re-installed CSS3 buttons, same result.