Current Support Thread at Zen Cart Forums: http://www.zen-cart.com/forum/showthread.php?t=194990
Note: If your Zen Cart version is earlier than 1.5.4, use v1.1.1 of the CSS3 Buttons plugin.
This plugin replaces Zen-Cart's (v1.5.4+) default CSS button functionality, adding the capability to associate Font Awesome glyphs with your store's CSS buttons.
Follow these steps to install the CSS3 Buttons plugin, after unzipping the plugin's distribution zip-file:
/includes/functions/html_output.php file./includes/functions/html_output.php, replacing the zenCssButton function with the following:
html_header.php, present in the /includes/templates/YOUR_TEMPLATE/common folder, adding the following lines after all <style> statements and before the first <script> statement:This section identifies the configuration items available for the plugin and gives you some "guidance" as to how to customize your use of Font Awesome glyphs.
Once you've copied the plugin's files and signed into your Zen Cart admin, the following configuration settings are added to your admin's Configuration->Layout Settings. Make sure that the CSS Buttons setting's value is True to enable the CSS3 buttons.
| Title | Description | Default |
|---|---|---|
| Include a link to the Font Awesome stylesheet? | If true, a link to the Font Awesome CSS file will be included in each page's header. If your template already includes Font Awesome, leave this setting false. | false |
| Font Awesome version number | Enter the Font Awesome version number to load, if the previous setting is set to true. | 4.2.0 |
| Submit-button HTML Tag | Identify the type of HTML tag to use for CSS-generated submit buttons, either input (default) or button. Please note that the button tag is not fully supported on older browsers. | input |
Edit your store's copy of /includes/templates/YOUR_TEMPLATE/css/stylesheet_css_buttons.css to customize the buttons' background, border and text colors to match your website's scheme. The buttons below show the default coloring.
To include Font Awesome glyphs in your buttons, edit your store's copy of the file /includes/extra_datafiles/css_button_glyphs.php to assign the glyphs on a button-by-button basis using the array defined within that script. The "Send" button below shows the formatting displayed when Submit-button HTML Tag is set to button. In all cases, the glyph you define is prepended to the button's name.
Note: Font Awesome glyphs are not applied when Submit-button HTML Tag is set to input.
The button text for the built-in Zen-Cart buttons is found in the alt-tag text in /includes/languages/english/YOUR_TEMPLATE/button_names.php. For example, the text for the "Send" button above comes from this PHP define:
define('BUTTON_SEND_ALT', 'Send');
Note: Zen Cart's standard processing in the function zen_image_submit (also in /includes/functions/html_output.php) forces a default to the button's image if the button's alt-text is more than 30 characters in length. This "trick" only applies to the submit-type buttons; a similar check does not occur for link-type buttons!
Note 2: You can style an individual button by using the button's name as a selector. Remember to place these definitions at the bottom of the stylesheet_css_buttons.css file and make sure that the non-Hover styling is specified before the Hover styling:
span.normal_button.button_sold_out_sm {
background-color: blue;
}
span.normal_button.button_sold_out_smHover {
background-color: red;
}
This section identifies the files added or modified for this plugin as well as the plugin's change history.
The plugin provides the following files in its distribution zip-file.