Customisation - Templates - Stylesheets

From Zen Cart(tm) Wiki
Jump to: navigation, search


What is a stylesheet? (A Primer)

The Stylesheet is the standard way to define the look of your site, from fonts and colors to the complete layout of a page.


Style Rules

Stylesheets are made up of a list of style rules describing how web documents are presented in a browser.

Selectors

Style rules are formed as follows: selector { property: value }


An element or type selector is the tag name of an HTML element and matches all elements of that type.

h1 {
font-size: 1.5em;
}

This example sets the size of all h1 elements.


An id selector is preceded by a pound sign (#). An id selector can be used only one time in a document.

#headerWrapper {
margin: 0em;
padding: 0em;
}

The above example describes the "header" portion of your document.


A class selector is preceded by a period (.). A class selector can be used more than once.

.important {
font-weight: bold;
}

Anything with class="important" will be bold.

Stylesheets in Zen Cart™

In Zen Cart™ the list of style rules is saved in a file called stylesheet.css.

By default, stylesheet.css is stored in includes -> templates -> template_default -> css