Chapter 9: Applying Themes

The new version of ASP.NET allows you to work with Themes, which enable you to globally define control designs. Control designs, called Skins, can be used to standardize the look and feel of a web site. Each Theme consists of one or several Skins for each of the desired server control types. The Skins in turn contain an empty control definition with individual property assignments. You can apply a Theme globally to a complete web site or just in some specific areas or for one of the site's pages. With each definition, you may decide whether it should be applied in general for all controls of a particular type or only for particular ones.

Themes always show their big advantages when an existing web site is about to be modified. In this case, you can make changes centrally, affecting all corresponding pages at once. The only requirement is the consequent use of Themes on all pages.

Understanding Themes

You can define many properties of a control with Themes and Skins respectively; among other things this includes color values for the background, foreground, and frame. Depending on the control, it's possible to assign pictures and other resources as for example the node icons of the new TreeView control. All assigned values are static in principle.

Properties that are primarily placed at run time, such as DataSource, and properties that directly influence the behavior of a control can't be defined by a Theme. The developer of a control must decide which properties can be defined in a Theme by marking the desired properties with a particular attribute.

One of the shipped Themes for the Label control looks like this:

<asp:Label runat="server"
    ForeColor="#000066"
    BackColor="transparent">
</asp:Label>

The code gets much more complex with the TreeView control, in which the displayed pictures are defined with a Theme. Both design templates have influence on all the controls of this type as long as nothing else has been specified (see Listing 9-1).

Listing 9-1: Defining a Bunch of Properties Through a Theme

<asp:TreeView runat="server" ForeColor="#000066" BackColor="transparent"
    BorderColor="#EEEEEE" ParentNodeImageUrl="images/basicblue_greysquare.gif"
    RootNodeImageUrl="images/basicblue_greysquare.gif" NodeIndent="10"
    LeafNodeImageUrl="images/basicblue_greysquare.gif">
    <NodeStyle horizontalpadding="5" ForeColor="#000066"
        verticalpadding="1" BackColor="#FFFFFF"></NodeStyle>
    <LeafNodeStyle ForeColor="#000066" BackColor="#FFFFFF"></LeafNodeStyle>
    <LevelStyles>
        <asp:TreeNodeStyle Font-Bold="True" BackColor="#FFFFFF"
            ForeColor="#000066" ChildNodesPadding="5"></asp:TreeNodeStyle>
    </LevelStyles>
    <RootNodeStyle Font-Bold="True" BackColor="#FFFFFF"></RootNodeStyle>
    <ParentNodeStyle ForeColor="#000066" BackColor="#FFFFFF"></ParentNodeStyle>
    <HoverNodeStyle Font-Underline="false" BorderColor="#EEEEEE"
        BackColor="#FFFFFF" ForeColor="#0000FF"></HoverNodeStyle>
    <SelectedNodeStyle BorderWidth="1px" ForeColor="#660066" BorderStyle="Solid"
        BackColor="#FFFFFF"></SelectedNodeStyle>
</asp:TreeView>

At first sight, Themes and Cascading Style Sheets (CSS) have a lot in common. Both allow the overall definition of primarily visual properties of an object. On closer inspection, however, you'll discover that the possibilities offered by Themes are quite different from those of classic CSS.

Unlike CSS, Themes can be directly integrated in ASP.NET and are optimized for its concepts. Therefore, Themes can define many properties that could not have been handled in this form with CSS. One example of this: the pictures of the TreeView control mentioned previously.

Unlike CSS, Themes aren't cascading. Properties that have been defined in one Theme will generally overwrite the corresponding values that had been assigned directly to the control.

Apart from this, Themes can contain CSS files. They are automatically referenced by individual pages if they've been saved in the Theme directory.