By combining ASP NET pages with master pages and CSS style sheets, yvll can go a long way in separating form and function, whereby the look and feel of your pages are defined separately from their operation. With themes you can take this a step further and dynamically apply this look and feel from one of several themes that you supply yourself.
. A theme consists of the following:
¤ A name for the theme
¤ An optionalJ:SS style sheet
¤ Skin (. skin) files allowing individual control types to be st;led These can be applied to pages in two different ways – as a Theme or as a
¤ Theme – All skin properties are applied to controls, overriding any properties that the controls on the page may alreadyhave.
¤ StyleSheetTheme – Existing control properties take precedence over properties defined in skin files.
CSS style sheets work in the same way whichever method is used because they are applied in the standard CSS way
Applying Themes to Pages
You can apply a theme to a page in several ways, declaratively or programmatically. The simplest declarative way to apply a theme is via the <%@ Page %> directive, using the Theme or StyleSheetTheme attnbute
Alternatively, you can specify a theme to use for all pages in a site, using an entry in the Web. config file
Again, you can use Theme or StyleSheetTheme here. You can also be more specific by using <location> elements to override this setting for individual pages or directories, in the same way as this element was used in the previous section for security information. Programmatically, you can apply themes in the code-behind file for a page. There is only one place where you are allowed to do this – in the Page_Pre1ni t () event handler, which is triggered very early on in the life cycle of the page. In this event, you simply have to set the Page. Theme or Page .
StyleSheetTheme property to the name of the theme you want to apply, for example: protected override void OnPre1nit(EventArgs e)
Because you are using code to do this, you can dynamically apply a theme file from a selection of themes. This technique is used in PCSDemoSite, as you see shortly.
Themes are defined in yet another of the “special” directories in ASP.NET – in this case App_Themes. The App_5hemes directory can contain any number of subdirectories, one per theme, where the name
of the subdireqory defines the name of the theme. Defining a theme involves putting the required files for the theme in the theme subdirectory. For CSS style sheets, you don’t have to worry about the file name; the theme system simply looks for a file with a . css extension. Similarly, . skin files can have any file name, although it is recommended that you use multiple. skin files, one for each control type you want to skin, and each named after the control it skins. Skin files contain server control definitions in exactly the same format as you would use in standard ASP.NET pages. The difference is that the controls in skin files are never added to your page; they are simply used to extract properties. A definition for a button skin, typically placed in a file called Button . skin, might be as follows:
<asp:Button Runat=”server” BackColor=”#444499″ BorderColor=”#OOOOOO”
This skin is actually taken from the Oefaul tTheme theme in PCSDemoSite, and is responsible for the look of the button on the Meeting Room Booker page you saw earlier in this chapter. When you create a skin for a control type in this way you don’t use an 10 property.
Themes in PCSDemoSlte
The PCSDemoSite Web site includes three themes that you can select on the /Configuration/Themesl Oefaul t. aspx page – as long as you are logged in as a member of the HegisteredUser or Si teAdministrator role. This page is shown
The theme in use here is Defaul tTheme, but you can select from the other options on this page. shows the BareTheme theme .
This brightly colored and difficult to read theme is just a bit of fun, really, but it does show how the look of a site can be drarnancally changed using themes. On a more serious note, themes similar to this can be used to pro\ ide high-contrast or large-text versions of Web sites for accessibility purposes, In PC;SDemoSite, the currently selected theme is stored in session state, so the theme is maintained when you navigate around the site. The code-behind file for Confl.g-~ra·lon ”I’hemesDefaul t.aspx is as follows:
The key functionality here is in -ApplyTheme( ), which puts the name of the selected theme into session state, using the key SessionTheme. It also checks to see if there is already an entry here, and if so, removes it. . As mentioned earlier, themes must be applied ul the Page_Prelni t ()even! hartdlet. This isn’t accessible from the master page that all pages use, so if you want to apply a selected theme to all pages, you are left with tWooptions:
¤ Override the Page_Prelni t () event’haQler in all pages where you want themes to be applied.
¤ Provide a common base class for all pages where you want themes to be applied, and override the Page_Pre Ini t () event handler in this base class
PCSDemoSite uses the second option, with a common page base class provided in Code/M’yPageBase. cs:
This event handler checks’ the 5elfion ~~e for an entry in SessionTh~me and applies the selected theme if there is one; otherwise DefaultT1}¥le isused, Note also that this class inherits from the usual page base class Page. This is necessary because, otherwise, the page wouldn’t function as an ASP.NETWebpage
For this to work, it is also necessary to spedfy this base class for all Web pages. There are several ways of doing this, the most obvious being either in the <@ Page %> directive for a page or in the code behind a page. The former strategy is fine for simple pages but precludes the use of custom code behind for a page, as the page will no longer use the code in its own code-behind file. The other alternative is to change the class that the page inherits from in the code-behind file. By default, new page~ inherit from Page, but you can change this. In the code-behind file for the theme selection page shown earlier, you may have noticed the following code:
Here MyPageBase is specified as the base of the Defaul t class, and thus the method override in MyPageBase. cs is used.