Customisation - Templates - Stylesheets - CSS Buttons

From Zen Cart(tm) Wiki

Overview

You have the choice to use image buttons or CSS-styled buttons in Zen Cart™, this Admin option can be configured in Configuration > Layout Settings > CSS Buttons. The default setting is set to No, this causes some buttons and links to use images in the catalog, if you would rather use CSS-styled buttons and links change the value to Yes.

Hint

The Zen Cart css buttons are based on an early version of a third party css buttons mod. Additional information, about how and why the css buttons work like they currently do, can be found in the documentation (included in the zip at the Zen Cart downloads section) of the mod, as well as the archived support thread. Notice however that the Zen Cart version differs in several ways from the mod!

Archived support thread

Image Buttons

CSS-Styled Buttons

When the option CSS Buttons is enabled, Zen Cart™ outputs all input buttons with the following attributes (values excluded for readability):

<input class="" onmouseover="" onmouseout="" type="" value="" style="" />

Note: Some hyperlinks also have button classes applied to them, if you use the default template's stylesheet_css_buttons.css stylesheet then any button or link with the class cssButton will look like a strange, gray button with a hover effect.

Class

The class attribute assigns two separate CSS classes, the first class is a common one which is attached to every button in the catalog (as far as I know). The second class is more specific, it's used for applying a unique style to each button.

Onmouseover and Onmouseout

The JavaScript attributes onmouseover and onmouseout are very mysterious to the author of this article, you will need to use the defualt template's stylesheet_css_buttons.css to see the effect. Unless you take the time to create the styles yourself this JavaScript will be taking up space without actually doing anything.

To Remove These Attributes

If you would like to save code and remove this JavaScript at the same time, please follow these septs.

1. Open the file: 'includes/functions/html_output.php' (no override available)
2. Go to line 300, or search for the word 'onmouseover', at the start of that line add two forward slashes - //

JavaScript removal warning

The JS was added to enable crossbrowser compatible mouseover effects on the input buttons. Depending on the CSS you aplied to the buttons, the mouseover effect will not work on the input buttons in IE without the Javascript! A better solution, which uses less Javascript, is possible though. This better solution will probably be applied in version 2.x of the css buttons contrib. (The code discussed here is Zen core code, but but the css buttons also exists as a third party mod.)

Type

The type attribute defines what sort of button it is, these are some possible types:

• button
• submit
• reset

W3 Specifications

Value

The value defines the text that appears on a button - Changing Button Names.

Style

For an unknown reason, Zen Cart™ appears to calculate the number of characters in a button's value and then generates a length in pixels based on the size of the value. Would it not be wiser to allow the button to choose its own size?

If you know why a width is applied to CSS Buttons please share, it would also be great to be able to disable this feature.

Further to the above comment:

Yes, the button seems to be created with an inline style, usually {width:80px}. Actually, the width is calculated from the number of characters and a width per character that is set in the script. Then that figure is checked to see if it is greater than the minimum ( also arbitrary ) width, in the default case it is 80px.

It seems like a round about way of doing it to me. The code that effects this sizing is in html_output.php. There is no override to this file so any edits should be undertaken with care.

The code section is at about line 303 and reads

 function zenCssButton($image = , $text, $type, $sec_class = , $parameters = ) {
   // 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;"';

The simplest way of disabling the automatic width setting on ccs buttons is to edit the final line to:

   $style = ' ';

Put nothing between the quotation marks. That means that no in-line style is used. Which means that you can set the widths and heights in the css easily. It may be useful to set display to block as the button is contained within tags by default . Most of the buttons already have their own classes so you can style each one to your hearts content. As an example:

.button_buy_now{ display:block; width:6.25em; height:1.1em; color:yellow; }