The Web Store uses ASP.NET 2.0 features to help facilitate customization of the look and feel of the Web Store user interface. The application uses theming and by default ships with two themes - Standard and Professional - which can of course be customized.

A Web Store Theme consists of:

• An ASP.NET 2.0 Theme (CSS based only)
  
• A CSS Style Sheet
  
• A set of images used by the style sheet (for optional background images etc.)
  
• A set of Master Pages that make up the core 'outer' layout of the site
  

ASP.NET Themes and CSS Styling

The ASP.NET Theme is managed primarily through a CSS style sheet which bears the same name as the Theme. The default theme is called Standard and it provides the default layout as well as the core frame behavior logic. The Standard Theme is also the theme that is used and displayed in Visual Studio designmode. All other themes essentially inherit from the base functionality and it's recommended that you create new themes by copying one of the existing themes and then customizing it.

Let's briefly switch out the theme to the Professional Theme on the Web Store Configuration Form to demonstrate switching a theme completely to a canned Theme. On the bottom of this form there's a drop down that lets you select the UI Theme:

Go ahead and pick the Professional Theme which looks a little different for our MauiTouch application:

This theme uses a different layout style - it runs in a fixed frame, it uses different colors and it has a different layout with account options showing up at the top of the form vs in the sidebar. These are the kind of things that you can easily change with a theme.

To create a brand new theme it's recommended you copy an existing theme other than the Standard Theme. The Standard Theme is also duplicated as the Hawaiian Theme, so if you want to use this layout you can copy the Hawaiian Theme.

Let's do this for MauiTouch:

• Copy the App_Themes\Hawaiian folder to App_Themes\MauiTouch
  
• Copy the App_Templates\Hawaiian folder to App_Templates\Mauitouch
  

This effectively creates a new Theme for your application and MauiTouch shows up on the list of Themes.

To do this let's open the project in Visual Studio (or Visual Web Developer) by opening a File based project from <installDir>\WestWindWebStore as the Web site directory. You should see something like this in the Solution Explorer:

To customize the look and feel of the site you can change the CSS file for the theme. Using only CSS attributes and replacing two images you can change the color scheme and basic feel of the store.

At this point you can start customizing the Theme. So what I'll do is add a few new images and change around some colors of the style sheet to provide a new look and feel. Changing the theme requires that you're somewhat familiar with CSS 2.0, but I think you'll find that the style sheet is fairly logically laid out with tag names that are easy to match to the content you see on the page. The best way to modify the CSS file is to load up one of the HTML pages and look at the CSS class (CssClass="" or class="") attributes on various elements.

Some of the more common styles you probably want to change:

• gridheader - used for most list headers
  
• gridalternate - alternate grid row display
  
• alternatebackground - alternate background color (used in sidebar)
  
• menuband - used for menu headers
  
• menulink - used for sidebar menu links
  
• webstorebannerXXX - styles related to the top menu band
  
• errordisplay - used for error boxes
  
• submitbutton - used for normal buttons (image)
  
• smallbutton - alternate smaller button (image)
  

For example, here's the MauiTouch site adjusted with a red color scheme which was accomplished by manually changing the CSS tags and changing 3 images (you can also run without images if you remove any of the image links from the stylesheet).

The CSS stylesheet uses a number of styles for common display attributes. So there are styles such as gridheader, gridalternate, menuheader, menublock, titlebar, categorylistbackground and so on that refer to specific CSS classes on most pages. The best way to find out exactly which style is used with each each mechanism is by using one of the developer toolbars for Internet Explorer or Mozilla browsers.

• Internet Explorer Developer Toolbar
  
• Web Developer for Mozilla and FireFox Browsers
  

These toolbars allow you to see the Class tags used either by hovering over elements or in a global view on the page by using the View CSS Classes option. With this information it's easy to find the appropriate class in the style sheet and customize the class attributes.