Section 13.4. Themes and Skins

13.4. Themes and Skins

Many users like to personalize their favorite web sites by setting the look and feel of the site's controls to meet their own personal aesthetic preferences. ASP.NET 2.0 provides support for themes that enable you to offer that level of personalization to your users.

A theme is a collection of skins . A skin describes how a control should look. A skin can define stylesheet attributes, images, colors, and so forth.

Having multiple themes allows your users to choose how they want your site to look by switching from one set of skins to another at the touch of a button. Combined with personalization, your site can remember the look and feel your user prefers.

There are two types of themes. The first, called stylesheet themes , define styles that may be overridden by the page or control. These are, essentially , equivalent to CSS style sheets. The second type, called customization themes , can not be overridden. You set a stylesheet theme by adding the StyleSheetTheme attribute to the Page directive, and, similarly, you set a Customization theme by setting the Theme attribute in the Page directive.

You can set the default theme for the entire web site in web.config by adding the pages element to the system.web element within the configuration element, as follows :

 <configuration>     <system.web>             <pages theme="Psychedelic" />         </system.web>     </configuration> 

Settings in the page will override those in web.config .

In any given page, the properties for the controls are set in this order:

1. Properties are applied first from a stylesheet theme.

2. Properties are then overridden based on properties set in the control.

3. Properties are then overridden based on a customization theme.

The customization theme is guaranteed to have the final word in determining the look and feel of the control.

Skins come in two flavors: default skins and explicitly named skins . Thus, you might create a Labels skin file with this declaration:

 <asp:Label runat="server"     ForeColor="Blue" Font-Size="Large"     Font-Bold="True" Font-Italic="True" /> 

This is a default skin for all Label controls. It looks like the definition of an asp:Label server control, but it is housed in a skin file and is used to define the look and feel of all Label objects.

In addition, however, you might decide that some labels must be red. To accomplish this, you create a second skin, but you assign this skin a SkinID property:

 <asp:Label runat="server" SkinID="RedLabel"     ForeColor="Red" Font-Size="Large"     Font-Bold="True" Font-Italic="True" /> 

Any Label that does not have a SkinID attribute will get the default skin; any Label that sets SkinID="RedLabel" will get your named skin.

The steps to providing a personalized web site are the following:

1. Create the test site.

2. Organize your themes and skins.

3. Enable themes and skins for your site.

4. Specify themes declaratively if you wish.

13.4.1. Create the Test Site

To demonstrate the use of themes and skins, you'll create a new web site (Themes) but you will use Copy Web Site to bring over all the personalization code from the previous example and set the start page to Welcome.aspx .

To begin your new application, you'll need some controls whose look and feel you can set. Open Welcome.aspx and add the following controls to the page, using the code shown in Example 13-5 (add this new code after the panel but before the closing <div> ).

Example 13-5. Controls for demonstrating skins

 <table width ="100%">     <tr>         <td >             <asp:Label ID="lblListBox" Runat="server" Text="ListBox"/>         </td>         <td >             <asp:ListBox ID="lbItems" Runat="server">                 <asp:ListItem>First Item</asp:ListItem>                 <asp:ListItem>Second Item</asp:ListItem>                 <asp:ListItem>Third Item</asp:ListItem>                 <asp:ListItem>Fourth Item</asp:ListItem>                 </asp:ListBox>         </td>         <td >             <asp:Label ID="lblRadioButtonList" Runat="server"                 Text="Radio Button List"/>         </td>         <td >             <asp:RadioButtonList ID="RadioButtonList1" Runat="server">                 <asp:ListItem>Radio Button 1</asp:ListItem>                 <asp:ListItem>Radio Button 2</asp:ListItem>                 <asp:ListItem>Radio Button 3</asp:ListItem>                 <asp:ListItem>Radio Button 4</asp:ListItem>                 <asp:ListItem>Radio Button 5</asp:ListItem>                 <asp:ListItem>Radio Button 6</asp:ListItem>                 </asp:RadioButtonList><br />         </td>     </tr>     <tr>         <td>             <asp:Label ID="lblCalendar" Runat="server"             Text="Calendar"></asp:Label>         </td>         <td>             <asp:Calendar ID="Calendar1" Runat="server" />         </td>         <td>             <asp:Label ID="lblTextBox" Runat="server"             Text="TextBox"/>         </td>         <td>             <asp:TextBox ID="TextBox1" Runat="server"/>         </td>     </tr> </table> 

You will use skins to change the look and feel of these controls, and you will organize sets of skins into themes.

13.4.2. Organize Site Themes and Skins

Themes are stored in your project in a folder named App_Themes . To create this folder, go to Solution Explorer, right-click on the project folder and choose Add Folder Theme Folder. Name the new folder Dark Blue -, the folder App_Themes will be created automatically, with a Theme folder named Dark Blue under it. Create a second theme folder, named Psychedelic .

Right-click on the Dark Blue theme folder and choose Add New Item. From the template lists, choose Skin File and name it Button.skin (to hold all the button skins for your Dark Blue theme), as shown in Figure 13-12.

Figure 13-12. Creating the skin file

Each skin file is a text file that contains a definition for the control type but with no ID. For example, your Label.skin file might look like this (for the Dark Blue theme):

 <asp:Label Runat="server"        ForeColor="Blue" Font-Size="Large"        Font-Bold="True" Font-Italic="True" /> 

Create skin files for each of the following types in both themes:

• Button.skin

• Calendar.skin

• Label.skin

• ListBox.skin

• RadioButton.skin

• Text.skin

At this point, your solution should look more or less like Figure 13-13.

Figure 13-13. Themes and skins in your project

13.4.3. Enable Themes and Skins

To let your users choose the theme they like and have it stored in their profile, you need to add a single line to the <properties> element in the <profile> element of web.config :

 <add name="Theme" /> 

Save and rebuild your application to make sure the profile is set properly.

13.4.4. Specify Themes for Your Page

You can set the themes on your page declaratively or programmatically. To set a theme declaratively, add the Theme attribute to the Page directive:

 <%@ Page Language="C#" AutoEventWireup="true"     CodeFile="Welcome.aspx.cs" Inherits="Welcome_aspx"  Theme="Dark Blue  "%> 

This will set the page's theme to the Dark Blue theme you've created

You can set the theme programmatically by hard coding it or (even better) by setting it from the user's profile.

13.4.5. Setting Stylesheet Themes

Stylesheet themes are set by overriding the StyleSheetTheme property for the page. Intellisense will help you with this. Open Welcome.aspx.cs , and scroll to the bottom of the class. Type the words public override and all the overridable members are shown. Start typing sty and Intellisense will scroll to the property you want, StyleSheetTheme , as shown in Figure 13-14.

Figure 13-14. Overriding Stylesheet theme

Once Intellisense finds the method you want, press TAB to accept that property. Fill in the accessors as follows:

 public override string StyleSheetTheme     {        get        {           if ((!Profile.IsAnonymous) && Profile.Theme != null)           {              return Profile.Theme;           }           else           {              return "Dark Blue";           }        }        set        {           Profile.Theme = value;        }     } 

13.4.6. Setting Customization Themes

If you are going to set a customization theme programmatically, however, you must do so from the PreInit event handler for the page because the theme must be set before the controls are created.

 protected void Page_PreInit(object sender, EventArgs e)     {        if (!Profile.IsAnonymous)        {           Page.Theme = Profile.Theme;        }     } 

The PreInit event handler is new in ASP.NET 2.0.

Setting the theme in PreInit creates a bit of a difficulty when you want to allow the user to change the theme at runtime. If you create a control that posts the page back with a new theme, the PreInit code runs before the event handler for the button that changes the theme, and so by the time the theme is changed the buttons have already been drawn.

To overcome this you must, unfortunately , refresh the page. An alternative is to post to another page, for example, adding two buttons to the ProfileInfo.aspx page at the bottom of the table at the bottom of the page:

 <tr>         <td>             <asp:Button ID="ThemeBlue" Text="Dark Blue"               Runat="server" OnClick="Set_Theme" />         </td>         <td>             <asp:Button ID="ThemePsych" Text="Psychedelic"              Runat="server" OnClick="Set_Theme" />         </td>     </tr> 

The two buttons share a single click event handler. An easy way to have VS2005 set up that event handler for you is to switch to design view and click on one of the buttons. Click on the lightning bolt in the properties window to go to the events, and double-click on the Set_Theme event. You are ready to implement the event handler. You'll cast the sender to the button and check its text, setting the theme appropriately:

 protected void Set_Theme(object sender, EventArgs e)     {        Button btn = (Button)sender;        if (btn.Text == "Psychedelic")        {           Profile.Theme = "Psychedelic";        }        else        {           Profile.Theme = "Dark Blue";        }     } 

When the user is not logged on, the page's default theme will be used. Once the user sets a theme in the profile, that theme will be used. Create skins for your two themes and run the application to see the effect of applying the themes.

13.4.7. Using Named Skins

You can override the theme for particular controls by using named skins . For example, you can set the lblRadioButtonList label in Welcome.aspx to be red even in the DeepBlue theme, by using a named skin. To accomplish this, create two Label skins in the Label.skin file within the Deep Blue folder:

 <asp:Label Runat="server"     ForeColor="Blue" Font-Size="Large"     Font-Bold="True" Font-Italic="True" />     <asp:Label Runat="server" SkinID="Red"     ForeColor="Red" Font-Size="Large"     Font-Bold="True" Font-Italic="True" /> 

The first skin is the default, and the second is a named skin because it has a SkinID property set to "Red." Open the source for Welcome.aspx and find the label you want to make red, and add the attribute SkinID="Red" , as shown in the following code snippet:

 <asp:Label ID="lblRadioButtonList" Runat="server"        Text="Radio Button List"  SkinID="Red"  /> 

When you log in and set your theme to Dark Blue, you'll find that the label for the Radio Button List is Red (honest!), as shown in Figure 13-15.