Zen Theme Documentation

The Zen Starter Theme is the default SeCommerce style/template. The following documentation applies generally to all themes built on the Zen Starter Theme (currently this includes all available SeCommerce themes).

Jump to: Overview | Templates | Stylesheets | Layout | Font Sizing | Menus | Customizing

Overview

The SeCommerce Zen theme provides you with an elegant, flexible, standards-compliant foundation for modern web design that can be easily extended to suit a variety of design goals. Some highlights include:

  • Well-documented core CSS files provide a solid basis for creating professional, tableless web site layouts
  • Easily switch between one, two or three column layouts simply by changing the body class
  • Special care has been given to web site accessibility and search engine optimization
  • Well-balanced typography rendered consistently across all modern web browsers
  • Quickly create brand new designs with a minimum of effort by extending the Zen core.

Out of the box, the sample web pages provide a three-column layout with a header, footer and top navigation bar. Any product catalogs that are added using the SeCommerce Administration program will appear automatically in the left navigation menu.

back to top

Templates

Modern website design makes use of one or more templates on which design elements used by pages in common are placed. A template has placeholders which each page derived from the template uses to display information unique to that particular page.

The sample pages installed uses our publically available SeCommerce Css Zen templates for its design architecture. The template implements Asp.Net Master Pages; however the template could be modified to use Adobe dreamweaver or Microsoft expression web dynamic web templates instead.

back to top

Stylesheets

The Zen theme includes several base stylesheets that define the default layout, positioning and design of your web pages, as well as a powerful CSS framework for rapid development of new web site designs. These base styles can be overridden by your own custom styles. Some knowledge of the contents of each stylesheet will help you make the most out of the Zen starter theme.

All stylesheets are located in the /theme/default directory.

base.css
Contains base reset styles for HTML elements, including fonts, headers, block and inline elements, tables and forms. This provides a basis for cross-browser compatibility and consistency. See Font Sizing for a discussion on achieving consistent font sizes across different web browsers.
layout.css
Defines the layout and positioning of all major layout areas, including header, navigation bar, left and right columns, footer and main content. See Layout for a detailed description of layout options.
classes.css
Contains basic design styles, and several convenience styles for applying formatting to text using CSS classes.
zen.css
This is a compressed version of the above three stylesheets. By eliminating comments and whitespace, the entire Zen CSS framework is contained in a single 7kB file.
print.css
Renders printer-friendly output.
ie.css
Contains custom styles and behaviors to make IE work more like other browsers.
custom.css
Contains some simple examples of custom styles, including icon images and rounded corners. This file is where you would override and extend the core Zen CSS.

When customizing the Zen theme, you may either override existing CSS rules in custom.css, or you may wish to edit base.css, layout.css and classes.css directly. However if you do so, you will need to include them in your template files instead of, or in addition to, the zen.css compressed stylesheet. In general, it is recommended to put all your custom CSS in the custom.css file.

back to top

Layout

The Zen starter theme provides a flexible layout model that can be tweaked with minimal effort to achieve virtually any kind of web site layout.

By default, the theme provides a 960px fixed-width layout. This can be changed by setting the #page width property, for example:

#page { width: 900px; }

will change the layout to a 900px fixed width, and

#page { width: 90%; }

will create a liquid layout at 90% of the browser width. Generally, a fixed width is easier to design for. 960px was chosen because it divides evenly into many common grid sizes, including 24px, 30px, 32px, 40px, 48px, 60px, etc. Therefore it is a very versatile basis for high quality web site layouts.

The Grid

The layout.css file provides a series of CSS classes for creating ad-hoc page layouts along a regular grid pattern. These classes are named .grid1, .grid2, .grid3, etc. and allow the width of any HTML element or Asp.NET control to be set in 48px increments up to a maximum of 960px, which is the default page width.

Using these classes in combination with .float-right, .float-left and .clear allow virtually any kind of layout to be created quickly, without all the disadvantages of using tables. These classes are used extensively in the checkout pages, and on the shopcart page, but can also be used pretty much anywhere that you need to create custom page layouts.

Of course, you may wish to override the grid classes to use a different sized grid. You could also add your own classes set to any arbitrary width.

Source-Ordered Columns

Both Search Engine Optimization and web site Accessibility benefit greatly from source-ordered layouts, which place the page content near the beginning of the HTML markup. But source-ordered layouts cannot be achieved using simple floats, it takes a little more careful planning.

However, the Zen theme takes care of all the hard work, and gives you one-, two- or three-column source-ordered layouts by simply setting the CSS class on the body element. There are four classes that can be set on the body tag, which control the display of the left and right columns, as well as the size and padding of the central content area.

  • sidebar-none will hide both sidebars and expand the content area to the full page width.
  • sidebar-left will display the left sidebar, and extend the content area all the way to the right edge of the page.
  • sidebar-right will display the right sidebar and extend the content area all the way to the left edge of the page.
  • sidebar-both will display both the left and right sidebars and keep the content area contained between them.

The default width of the left and right columns is 192px (4 x 48px). If you wish to change the width of these columns, you can do so by adding the following to your custom.css (this example will produce 144px wide columns; adjust the values as needed for your layout).

.sidebar-left #content-inner {
  padding-left: 144px;
}

.sidebar-right #content-inner {
  padding-right: 144px;
}

.sidebar-both #content-inner {
  padding-left: 144px;
  padding-right: 144px;
}

#sidebar-left {
  width: 144px;
  margin-right: -144px;
}

#sidebar-right {
  width: 144px;
  margin-left: -144px;
}
back to top

Font Sizing

Font sizing in the Zen theme is based primarily on the following article: http://www.alistapart.com/articles/howtosizetextincss.

Specifying font sizes in pixels (px) is not recommended, as it does not allow fonts to be resized in IE browsers. Instead, font sizes, line heights, etc. are defined in ems, relative to the default size of 16px which is shared by all modern browsers. This leads to the most consistent results across all browsers, while still allowing fonts to be resized by end users.

The base font size is defined in elements.css, on the #page element. Out of the box, the Zen theme uses a 12px (0.75em) base font size, with a line-height of 18px. All other sizes should be specified in ems, relative to these values.

If you wish to change the base font size, change it on the #page element. If you do so, it is good practice to also adjust all other font sizes, to make them relative to the new base values. Neglecting to do so can lead to inconsistent font sizes in different browsers. In the majority of cases, the default 12px base size will not need to be modified.

Keep in mind that font sizes are always relative to the font size inherited from parent elements. Be careful not to write CSS rules that will result in undesired nested font sizing.

back to top

Menus

The Zen theme comes with some very useful base classes for creating cross-browser compatible horizontal and vertical CSS multi-level menus.

.menu is an extremely simple CSS class that removes the normal ul list formatting, facilitating menu creation. The other menu classes depend on this one. You can also use it as a starting point for your own CSS menus.

.horizontal-nav can be used as a basis for creating horizontal menus. It is used in conjunction with the .menu class (e.g. <ul class="menu horizontal-nav">.

.vertical-nav can likewise be used as a basis for creating vertical menus, and is also used in conjunction with the .menu class (e.g. <ul class="menu vertical-nav">.

Both .horizontal-nav and .vertical-nav support unlimited multi-level dropdowns, and can be extended with your own visual styles to create virtually any type of navigation menus.

back to top

Customizing the Zen Theme

The Zen theme is meant to be customized. It does not provide a full-fledged web site design, but rather a high-quality framework for creating your own unique designs. While the default configuration will suit a good deal of design goals, here are some ideas for customization.

  • Change the site logo. This is embedded in the zen.master template file. If your logo image includes your site name, you may also wish to delete the site-name element (this is the <h1> element just below the logo image).
  • Switch to a one- or two-column layout. Setting the body class to sidebar-left, sidebar-right or sidebar-none (and removing any content from the sidebars you are not using) will automatically change the layout accordingly—no CSS classes to modify.
  • Change the layout dimensions. While the default layout is suitable for the majority of end-users' displays, you may wish to change the dimensions, or switch to a fixed-width or liquid layout instead. See the Layout section above (and related documentation in layout.css for details on how to do this.
  • Adding background colors, image tiles, borders and gradients can go a long way to improving the look of your site.
  • Add your own custom classes as required, no need to limit yourself to the CSS classes that are provided by the Zen theme.
  • To achieve certain design goals or complicated layouts, it may be necessary to add extra layout divs or tables to the zen.master template.
  • You may wish to create additional templates for use on different pages, for example a full three-column layout with banner ads for the homepage, and a stripped-down two-column layout for the rest of the site.
back to top