Combining ASP.NET 2.0 master pages and themes

Master pages and themes allow you to centrally control an ASP.NET 2.0-based site's look-and-feel. Tony Patton combines the two elements in a basic site example, and points out existing designs provided by Microsoft to get you up and running.

We have examined two new ASP.NET 2.0 features that simplify designing the look and feel of a site: master pages and themes. This week we examine how they work together by combining the elements. Also, we take a closer look at what is available with Visual Studio 2005.

Putting it all together

We begin by using all elements to control a site's layout and style. This very basic site contains home, feedback, and privacy policy pages. We use Web user controls for the pages' header and footer areas. A master template controls overall site layout. Skins, as well as a CSS stylesheet, maintain the site's look and feel. The skin and stylesheet files are both named Default and placed in the theme's folder (which is within the main App_Themes folder). Listing A features the master page.

Weekly .NET tips in your inbox
TechRepublic's free .NET newsletter, delivered each Wednesday, contains useful tips and coding examples on topics such as Web services, ASP.NET, ADO.NET, and Visual Studio .NET.
Automatically sign up today!

A few points on the master template file:

  • The header and footer Web user controls are registered at the top of the page via the register directives.
  • A table is used to control page layout. (For all CSS and Web standards enthusiasts, we could have also used CSS positioning.)
  • The header and footer controls are placed at the top and bottom of the page in table rows with the columns merged.
  • The middle table row is the page's data area. It contains the lone ContentPlaceHolder element with the name mainArea.

The two controls are very simple; here's the source for each control, with the header first:

<%@ Control Language="C#" %>
<div style="width: 365px; height: 23px" id="header" class="header">
TechRepublic.com</div>

And, here's the footer control:

<%@ Control Language="C#" %>
<div style="width: 439px; height: 42px" id="footer" class="footer">
@2006 - Techrepublic.com<br />
<a href="PrivacyPolicy.htm">PrivacyPolicy.htm</a></div>

The master page controls layout with all custom content being placed in the middle of the page (for all pages that take advantage of the master page).

The next step is defining a theme to determine the site's appearance. Both a CSS stylesheet and a skin file are used in our theme. The stylesheet controls the basic HTML elements like the body, link, table, and the div tags used in the header and footer controls. Listing B contains the contents of the stylesheet. A skin file controls the appearance of the controls used on the feedback page, as you can see in Listing C.

Now that we have all the design elements in place, we can use them. In Listing D, the feedback is listed first; it utilizes the controls defined in the skin file (via the skinid attribute).

Notice that the feedback uses the theme via its Theme attribute and uses the master page via the MasterPageFile attribute. The same is true for the home page, which is in Listing E.

The home page's contents are basic. It utilizes the content element to define what is placed in the content area of the master page. In this case, it is some text and a link to the feedback page.

Design element precedence

Master pages bring visual inheritance to ASP.NET, which is a feature developers have been clamoring for since the introduction of the technology. When an end user invokes a subpage like the feedback page in our example, they are actually viewing a single page compiled from both the subpage and the master page that the particular subpage inherited from. This also means that the server and client code from both pages are enabled on the new single page.

You may be wary of themes since it takes over a site when applied at the site level via a config file, but you can easily disable a theme at the page level via the page's EnableTheming attribute. Simply set the attribute to false and the theme is not applied to that page. See Listing F.

This works at the control level as well, so you can easily disable a theme for specific controls on a page by utilizing the EnableTheming attribute of that control. See Listing G.

It does not matter if a SkinID is included for the control—the EnableTheming attribute takes precedence. This is true for the page directive as well; when a Theme attribute is included, the EnableTheming setting has control.

StyleSheetTheme caveat

In addition to the Theme attribute, a theme may be applied via the StyleSheetTheme attribute, which is meant to be applied during application development. It allows you to test your work without affecting the overall site design. Basically, it allows work in progress to be maintained separately from what is already in place. However, you may still want to apply Themes to an application with a StyleSheetTheme applied. If both a Theme and StyleSheetTheme are applied to an application, the StyleSheetTheme attribute is applied first. This is followed by page controls being rendered with their style overriding the StyleSheetTheme. Finally, theme properties are applied, and they override both the StyleSheetTheme setting and control properties. You may use it to apply a cascading effect.

Ready-to-go designs

While master templates and themes greatly simplify site maintenance and design, it does take time and energy to get what you want. Microsoft provides sample or starter designs to get you up and running, which include designs for personal, commerce, corporate, and small business sites. In addition, they provide standards-based templates that take advantage of existing Web standards to control site design. Visit the ASP.NET Developer Center for more information.

More options

Combining the new layout and design features of ASP.NET 2.0 allows you to centrally control the look and feel of a site, but there are options that provide granular control of a site so a setting may be overridden. Also, Microsoft provides sample site designs to be used to learn the ins and outs of these new features, or use them to format your site.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

Miss a column?

Check out the .NET Archive, and catch up on the most recent editions of Tony Patton's column.