"Commerce" Template

This template has been designed with an online-shopping scenario in mind, but it can be used for a wide variety of other purposes as well. Its layout consists of three columns with the main navigation menu at the top of the page.

The layout has a "fluid" width, which means that it adjusts its size to the user's browser window. While this is nothing spectacular in itself, there is some added benefit for users with large monitors: the content expands only to a certain point after which it doesn't get any wider anymore. The result is greatly increased readability of your content since the lines of text will never extend beyond a comfortable width. Likewise, the content won't ever be squashed to a point beyond legibility when the user narrows the browser window.

Note: general features of this template which are common to all templates are described in the introduction to the template set. Make sure to read this document first if you haven't done so already.

Main features

Themes

The template comes with three distinctly different themes called Magnolia, Jazz and Snow. The desired theme is set in the web.config file in the application root. Set the stylesheetTheme attribute of the pages element to the name of one of the themes and view the result in the browser.

Fluid, but not really

As described in the introduction to this template, the content of a page, though essentially fluid, will never extend beyond a comfortable reading width— regardless of the width of the user's browser window. This behavior is achieved by taking advantage of a very clever CSS layout technique named the Jello Mold and invented by Mike Purvis. Mike has written an in-depth article explaining the inner workings of the technique. This article is highly recommended reading if you plan to make major layout changes to the template.

Treeview

Some of the sample pages of this template contain an instance of the ASP.NET Treeview control used for simulating hierarchical product categories. See the notes on customizing the Treeview below.

Accessibility

The sample pages of this theme (with the exception of the ones using the Treeview control) are in compliance with Priority 1 checkpoints of the W3C Web Content Accessibility Guidelines (WCAG 1.0) as well as § 1194.22 of Section 508. Use the techniques shown there for your own pages as well, so they'll be accessible for site visitors with disabilities.

The Treeview control relies on JavaScript for displaying child nodes in a hierarchy, which violates paragraph (m) of § 194.22 of Section 508. If your applications have to be 100% Section 508-compliant, you may have to forego using the Treeview control and use a Menu control instead.

Database

The template includes a SQL Server Express version of the Northwind database for displaying dynamic product data in various pages. You may have to grant read and write permissions on the Northwind.mdf file located in the App_Data directory to the ASP.NET process account (ASPNET on IIS 5.x, NETWORK SERVICE on IIS 6) if you encounter errors when trying to view the data-driven pages.

If you don't want to use the SQL Express database, simply change the connection string in the connectionStrings section of the web.config file to point to a different destination.

Designer support

Due to the complexity of the layout, the web form designer in Visual Studio 2005 and Visual Web Developer Express 2005 doesn't display the master page itself (MasterPage.master) correctly, but editing the content pages derived from the master works without problems.

Template structure

The first thing you'll probably notice when inspecting the master page of this template is a set of nested div elements below the body tag called sizer, expander and wrapper. These are necessary to make the semi-fuid layout (the Jello Mold, see above) work. The remaining div elements structure the actual page content. Their names indicate their purpose so you should be able to find your way around the element hierarchy pretty quickly.

For stability reasons, the main content div had to be positioned after the two sidebar div elements in the XHTML source. To avoid burdening users of assistive devices with the sidebar content on every page before they can access the main content, a "Skip to main content" link has been placed at the top of the template. This link is not visible in browsers, but will appear in assistive devices such as screen readers.

The look of each theme is achieved by a combination of background colors and background images that are assigned to specific div elements of the master page. See the style sheet for further details.

Customizing the template

Modifying a template's design to suit your needs is done almost exclusively in the CSS and .skin files of a theme. The recommended approach to customizing a theme is to make a copy of the one that most closely resembles the look you're going for in the App_Themes directory and give it a new name.

The main areas of customization of this template are: company logo, treeview, colors, background images and, of course, the page content.

Company logo

The logo is placed inside the header div. Depending on which theme you decided to customize, the image might need to have a transparent background. The logo image moves horizontally on top of the large header image as the user resizes the browser window, so it needs to look good over various backgrounds.

Treeview

There is a number of ways to customize the Treeview control. You can style the links in the control's skin or rely on the default link format set in the style sheet. The images representing the nodes and their relations can be set using the ImageSet property or you can supply your own images using the CollapseImageUrl, ExpandImageUrl and NoExpandImageUrl properties. See the MSDN documentation of the Treeview control for further information.

Images

The images used to create the design of each theme are stored in the Images subfolder of the theme. Some images have very specific widths or heights to make them fit into the layout. If you want to stay on the safe side when editing the supplied images in a graphics program, try not to change any image dimensions. Note that this warning only applies to images used for layout purposes, such as background-tiles. There is no restriction on modifying pictures used in the page contents, of course.

Page content

Before you start to add content to the pages of your themed application it is a good idea to study the sample pages provided with each template as well as the master page. Sections that require specific markup are commented and contain instructions on what the markup should look like so it will actually pick up the styles set in the style sheet and the skin file.

Note: the sample shopping cart is not a complete implementation and merely intended to showcase the themes' design elements.