"Personal" Design Template

This template is best suited for a personal, or blog-style web site. Its layout consist of two columns with the main navigation menu spanning the top. 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 — after all, table-based layouts have behaved like this for years — 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 the content because 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 and theme selection

The template comes with three different themes called Red, Green and Brown, named after — you guessed it — their predominant color. While the other templates in the template set have to have their theme set in the application's configuration file by the site's administrator, this one leaves the selection up to the visitor. Once a user has selected a theme, the choice is stored in their profile and restored upon their next visit.

Implementing the theme picker functionality required the introduction of a common base class for all pages in the application. You can find the PageBase class in the App_Code directory of the sample application. Rather than having to manually configure every page to inherit from this class in the @Page directive, the pageBaseType attribute of the pages configuration element in web.config is used:

<pages pageBaseType="PageBase" />

This way, all pages automatically inherit from PageBase rather than from the default System.Web.UI.Page. Take a look at the code in PageBase.cs as well as the code-behind file of the master page (AppMaster.master.cs) to see how dynamic theme selection works.

While selection of the preferred theme is up to the user, you can influence the default theme which will applied when the user first visits your site. Simply find the following section in web.config and change the value in bold to the name of the desired theme.

<profile enabled="true"> <properties> <add name="StylesheetTheme" defaultValue="Red" allowAnonymous="true" /> </properties> </profile>

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.

Accessibility

The contact form found in Contact.aspx is 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 forms as well, so they'll be accessible for site visitors with disabilities.

Database

The template includes a SQL Server Express version of the pubs sample database for displaying the list of books on the Publications.aspx page. You may have to grant read and write permissions on the pubs.mdf file located in the application's 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 Publications.aspx page.

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

Since the template's current theme is set dynamically as explained above , the web form designer in Visual Studio 2005 and Visual Web Developer Express 2005 has no way of determining which theme to apply at design time, so there is no designer support initially.

However, it is possible to temporarily set a theme while you work in the designer and then remove the instruction before deploying the finished application. Simply add the following code to the web.config file below the system.web node:

<pages styleSheetTheme="Brown" />

This will set the default theme for use during design time. Please note that dynamic theme selection will not work if you preview the pages in the browser while the above instruction is contained in web.config. Remove the code when you're ready to deploy and theme selection will work as expected again.

Template structure

The first thing you'll probably notice when inspecting the master page of this template is a set of nested divs 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.

The sidebar is floated to the right and neatly fits in the 243px right margin of the content div.

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: personal information, colors, background images and, of course, the page content.

Personal information

The name of the site owner as well as the (optional) slogan is set in ownername div of the master page, additional information can be provided in the ownerinfo div. Don't forget to put an appropriate copyright notice in the footer div.

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.