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.
<asp:Login runat="server" BackColor="#EFF3FB" BorderColor="#B5C7DE"
BorderPadding="4" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333">
<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" />
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
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.
border:solid 1px navy;
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.
<asp:DropDownList ID="ddlTheme" runat="server"
<asp:LinkButton ID="lnkThemeChange" runat="server" CausesValidation="false"
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.