The next process discussed is selecting a theme for the site. Some web sites allow you to choose the theme of the site, which changes the color style of the site to a different color. This is a nice feature to have for a site, so we will implement that here.

The .NET 2.0 Framework incorporated the idea of themes into a site, which allows the site to be personalized with both client-side CSS and server-side Skins, a new way to apply styles using the .NET server control conventions.  If you have not seen a server-side skin, let us take a look at the following skin for the Login control.

Listing 3

<asp:Login runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE" 
  BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333">
<TextBoxStyle />
<LoginButtonStyle BackColor="White" BorderColor="#507CD1" BorderStyle="Solid" 
  BorderWidth="1px" ForeColor="#284E98" />
<InstructionTextStyle Font-Italic="True" ForeColor="Black" />
<TitleTextStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
</asp:Login>

A skin can assign a value to any property that has the Themeable attribute set, which is not always known. The way to know whether this works or not, is to set the value in the skin and run the application. If you cannot assign a property value using the skin, the compiler will let you know.

A personalized skin for a specific situation can be assigned by adding the SkinID attribute. If a skin has a SkinID specified, any control that has a matching SkinID (2.0 also added the SkinID property at the control level) will apply that skin. This skin overrides the default skin applied.

CSS styles work the same way, except they set client-side attribute values instead. For instance, the following defines two CSS classes.

Listing 4

hr
{
      border:solid 1px navy;
      width:1px;
}
.ModalPopupBackground
{
      background-color: #C0C0C0;
}
.ModalPopupPanelBackground
{
      background-color: #FFFFCC;
      color: #000080;
      border: solid 1px #000080;
}

The period denotes a CSS class that is applied through the HTML class property, whereas the first style works with the HR tag simply by matching the name.

All of these styles make up a theme, which this example will allow the user to change.  The interface for changing the themes appears below.

Listing 5

<asp:DropDownList ID="ddlTheme" runat="server" 
  CssClass="SiteLayoutMenuBarDropDown"
  DataTextField="FriendlyName" DataValueField="Name" 
  onchange="themeDropDown_change"></asp:DropDownList>
<asp:LinkButton ID="lnkThemeChange" runat="server" CausesValidation="false"
  CssClass="SiteLayoutMenuBarItem">Change Theme</asp:LinkButton>

Clicking on the "change theme" button, this posts back to the server to show the new theme.  There is a two-step process for changing the theme of a site dynamically. The first challenge is accessing the value of the selected theme and storing it for the post back. The second option is loading the stored value and changing the theme.

The challenge with this is that changing themes at runtime has to happen during PreInit, which can be a challenge. Before getting to this, let us look at the approach used.