Customisation - Templates - Stylesheets - CSS Buttons

Revision as of 08:43, 11 September 2006

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. More 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. But notice that the Zen Cart code differs in several ways form the mod, a.o. because the Zen Cart code is based on an early version of the mod

[http:www.zen-cart.com/forum/showthread.php?t=19281 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.