Customizing and Managing Your Site's Appearance / Part 3 - Page 2 | WebReference

Customizing and Managing Your Site's Appearance / Part 3 - Page 2

[previous] [next]

Customizing and Managing Your Site's Appearance - Part 3 [con't]

Master Pages and Themes

ASP.NET themes provide a centralized way to define the appearance of a Web site. Although your content pages can make use of themes, you can simply use master pages to set the theme for your site as a whole. That is, you cannot use the Theme attribute within the Master directive at the top of the master page (although you can still do so in the Page attribute of each of your content pages).

However, you can use your master page to provide a user interface element that allows the user to browse and dynamically set the theme for your content pages. You may recall back in Listing 6.4, you programmatically set the theme of a page within the PreInit event of the page and you used ASP.NET session state to store the currently selected theme. Unfortunately, you cannot set the theme for your content pages within the PreInit event of the master page. Instead, you must have the PreInit event handler within the content page. If you have hundreds or even thousands of content pages, does that mean you must have the same PreInit event handler in all of these content pages?

Fortunately, no; you can make use of some simple object-oriented inheritance so that you only need code the PreInit event handler once. Recall that the code-behind class for all Web Forms has the Page class as its base class. You can define your own class that inherits from this base class and which contains the PreInit event handler that sets the themes. This new class then becomes the base class for the code-behind classes in your site.

The example site contained in Listings 6.9 through 6.13 demonstrates this technique (along with the other material covered in this chapter on master pages). It uses master pages to specify the structure of the site, themes, and CSS to control the appearance of the site's pages. The master page contains both an advertisement banner image that is customized by each content page as well as a theme selector. Figures 6.16 and 6.17 illustrate how the example appears with its two themes.

Listing 6.9 contains the code for the new class that will become the base class for all your Web Forms. Like Listing 6.4, it simply retrieves the theme selected by the user from the session state and applies it to the (content) page. This class file should be saved in your project's App_Code folder.

Listing 6.9 ParentPage.cs

I won't bother showing you all the content pages in the site. Listing 6.10 illustrates one sample content page (the home page).

Listing 6.10 Default.aspx

The code-behind for this sample content page (see Listing 6.11) must be altered to use your ParentPage class as its base class. Notice as well that it modifies properties exposed by the master page to customize the advertisement that appears within the master page.

Listing 6.11 Default.aspx.cs

Listing 6.12 defines the markup for the master page.

Listing 6.12 BookWithThemes.master

Like the other master pages examined in this chapter, this master page contains no formatting. The CSS and skins of your themes control the appearance of each page. The master page contains four main sections:

, and
. The sideArea and mainArea sections contain the two ContentPlaceHolder controls. The header section contains the logo image, an advertisement image, and a DropDownList that allows the user to change the theme. The theme list is not filled via markup, but instead is filled programmatically in the code-behind class for this master page, as shown in Listing 6.13.

Listing 6.13 BookWithThemes.master.cs

The only remaining files are the skins and CSS for the two themes. For space reasons, I do not include them here (although they can be downloaded from my Web site at They are quite similar to those shown in Listings 6.5 through 6.8.

[previous] [next]