Section 8.2. Apply Themes at Runtime

8.2. Apply Themes at Runtime

---

Note: Allow your users to customize your web site by letting them select the theme they want.

---

The previous lab, Section 8.1, shows how to apply themes to a web site at design time. A better way to use themes is to let users to select their preferred themes at runtime, when they visit site. In this section, you will see how themes can be applied during runtime.

8.2.1. How do I do that?

Instead of setting the theme of a page at design time, in this lab you are going to let the users choose a theme they like. In addition to the Classic theme, you will create a theme called Colorful.

1. Using the same project created in the previous lab (C:\ASPNET20\chap08-Themes), add a new folder under the App_Themes folder. Name the folder Colorful.

2. Add three skin files to the Colorful folder (see Figure 8-5). The three skin files under the Colorful folder will define the look and feel of the various controls on the page.

   Figure 8-5. Adding a new theme to the project

   
   
   

3. Code the Button.skin file as follows:

   <asp:Button runat="server" Width="90px" Font-Bold="True"       BackColor="#C0C0FF" />

   
   

4. Code the Calendar.skin file as follows:

   <asp:Calendar runat="server" Width="220px"       Font-Names="Verdana" Font-Size="8pt"       Height="200px" BorderColor="#FFCC66"       ForeColor="#663399" BackColor="#FFFFCC"       DayNameFormat="FirstLetter" BorderWidth="1px"       ShowGridLines="True">    <SelectedDayStyle BackColor="#CCCCFF" Font-Bold="True" />    <SelectorStyle BackColor="#FFCC66" />    <OtherMonthDayStyle ForeColor="#CC9966" />    <TodayDayStyle BackColor="#FFCC66" ForeColor="White" />    <NextPrevStyle ForeColor="#FFFFCC" Font-Size="9pt" />    <DayHeaderStyle Height="1px" Font-Bold="True"                    BackColor="#FFCC66" />    <TitleStyle ForeColor="#FFFFCC" Font-Size="9pt"                 Font-Bold="True" BackColor="#990000" /> </asp:Calendar>

   
   

5. Code the Label.skin file as follows:

   <asp:Label runat="server" Width="256px"       Font-Bold="True" Font-Names="Arial Narrow"       Font-Size="Medium" BackColor="#FFFFC0" />

   
   

6. To the default Web Form, add the DropDownList and Button controls as shown in Figure 8-6.

   Figure 8-6. Adding new controls to the page

   
   
   

7. To get a list of available themes, check the list of folders under the App_Themes folder. Then iteratively add the list of themes to the DropDownList control. In the Page_Load event for the default Web Form, code the following.

   Protected Sub Page_Load(ByVal sender As Object, _                         ByVal e As System.EventArgs) _                         Handles Me.Load     If Not IsPostBack Then         '---get all folders under the App_Themes folder         Dim themes As String( ) = _            Directory.GetDirectories( _            Request.PhysicalApplicationPath & "App_Themes")         '---add the themes into the DropDownList         ddlThemes.Items.Clear( )         For Each theme As String In themes             '---add only the theme name and not full path             ddlThemes.Items.Add( _                theme.Substring(theme.LastIndexOf("\") + 1))         Next     End If End Sub

   
   

8. In the Page_PreInit event, get the value of the DropDownList control using the Request object and set the theme of the page using the Theme property:

   Protected Sub Page_PreInit(ByVal sender As Object, _                            ByVal e As System.EventArgs) _                            Handles Me.PreInit     Dim Theme As String = Request("ddlThemes")     Page.Theme = Theme End Sub

   
   

   ---

   Tip: You cannot directly access the DropDownList control's properties to get the theme selected, because the PreInit event is executed before the postback is processed. Hence, when the Set button is clicked and results in a postback, the theme selected would not have been available yet in the PreInit event.

   ---

9. Press F5 to test the application. You can now select a theme to apply to the page from the Select Theme drop-down list. Try it (see Figure 8-7).

Figure 8-7. Dynamically applying a theme to a page

8.2.2. What about...

...mixing themes with CSS?

Apart from applying themes to your web pages, you can also mix themes with CSS stylesheets.

1. Using the project created in this section, add a stylesheet to the Classic folder by right-clicking the Classic folder and selecting Add New Item.... Select Style Sheet, and name the CSS stylesheet Button.css. Likewise, add another stylesheet to the Colorful folder.

2. The content of the two Button.css stylesheets are as shown in Figure 8-8.

   Figure 8-8. Content of the two Button.css stylesheets

   
   
   

   ---

   Note: CSS styles apply at the client side. Hence, in this example, you define the style to be applied to the <input> element, which is the HTML code generated by the Button control.

   ---

3. Press F5 to test the application. You will notice that when the Classic theme is applied, the font used for the Button controls is Courier New. Likewise, if you change the theme to Colorful, the font is now Arial Narrow and the text is now in red (see Figure 8-9).

Figure 8-9. The effects of applying CSS stylesheets to a page

8.2.3. Where can I learn more?

If you want to learn more about CSS, I strongly suggest you take a look at this tutorial: http://www.w3schools.com/css/default.asp. There is also a good discussion of the use of themes in web applications at http://mgemmons.com/blog/archive/0001/01/01/156.aspx.