Code in Style with ASP.NET Themes Part 2

sakthi · by sakthi on Wed Jan 09, 2008 6:30 pm

#

Applying Custom Themes to an ASP.NET Page
Once you create the custom themes, applying them to individual ASP.NET pages is very simple. Basically you need to follow the same process that we used for applying built-in themes to an ASP.NET page. For the purposes of this example, let us create an ASP.NET Page named CustomThemes.aspx and modify the code in the page to look like the following.

<%@ page theme="ControlsTheme" language="C#" %>

<html>

<head runat="server">

<title>Applying Custom Themes to an ASP.NET Page</title>

</head>

<body>

<form runat="server">

<asp:button id="Button1" runat="server" text="This button inherits the style specified in the Button.skin file" />

<br/><br/>

<asp:label id="Label1" runat="server">This Label inherits the style specified in the Label.skin file</asp:label>

</form>

</body>

</html>

The above code is very simple and straightforward. We start by specifying the name of the theme as the value of the theme attribute. Then we have a label control and a button control in the page. As you can see, we haven't set any style attributes for these controls. But since we have already specified the skins for the button and the label control in the ControlsTheme folder, the controls in the page will automatically inherit the style settings specified in the skin files. If you navigate to the above page from the browser, you will see the following output.

The skins that we have created so far are called Control Skins, meaning that they automatically apply to all controls of the same type. For example, if you create a default control skin for a label control, the skin applies to all label controls on pages where you are using the theme. Control skins can be further classified into default skins and named skins. The skins we have created earlier are an example of default skins in which the skin is matched exactly by control type. For example, a button skin applies to all the button controls in the page. Named skins are skins for which you must assign a skinid identifier and then use that in different pages to reference it. This approach is very flexible in that you can add multiple entries for the same type of control to a skin file, uniquely identifying each one using a skinid attribute. This means you can have more than one style for a label control on a page. Let us demonstrate this by looking at an example. For this example, let us add one more skin named TextBox.skin to our ControlsTheme. After the file is created, we will add the following lines of code to it.

<asp:textbox skinid="lightGrayBackColor" runat="server" font-bold="True" font-size="Small" forecolor="RoyalBlue" backcolor="LightGray" font-italic="True"/>

<asp:textbox skinid="whiteBackColor" runat="server" font-bold="True" font-size="Small" forecolor="DarkGoldenrod" backcolor="GhostWhite"

font-italic="True"/>

The above code contains the style for the textboxes. However, this is different from the previous skins (label.skin or button.skin) in that this skin file contains multiple styles for a textbox control. Each style is uniquely identified by the skinid attribute. The page that uses the above skin can uniquely identify each of the textbox styles by specifying the skinid attribute. Let us look at an example that illustrates this.

<%@ pagelanguage="C#"theme="ControlsTheme"%>

<html>

<headrunat="server">

<title>Named Skins Example</title>

</head>

<body>

<formrunat="server">

<asp:textboxid="TextBox1"skinid="lightGrayBackColor"

runat="server"width="392px">

This control uses the lightGrayBackColor

Skinid

</asp:textbox> <br/><br/><br/>

<asp:textboxid="TextBox3"skinid="whiteBackColor"runat="server"

width="392px">

This control uses the whiteBackColor skinid

</asp:textbox>

</form>

</body>

</html>

The above code starts by specifying the Theme attribute in the Page directive. Then it declares two textboxes with each one containing different text. As you can see from each of the textbox declarations, they now contain a new attribute named skinid and the value of this attribute matches up with the value of the skinid attributes specified in the TextBox.skin file. Now if you navigate to the above page using a browser, you will see the following output.

As you can see from the above example, named skins offer us the flexibility to create multiple styles for the same control and then differentiate them by using the skinid attribute.

Accessing Themes Programmatically

There are times where you may want to programmatically set the theme for an ASP.NET page depending on certain parameters. For example, in a library management Web site, you might want to provide one theme for the visitors of the Web site and provide a completely different theme for the administrators of the Web site. You can easily accomplish this by setting the Theme property of the Page object to an appropriate value at runtime. The following code example shows how to set the Theme attribute of the page at runtime.

<%@ pagelanguage="C#"%>

<html>

<headrunat="server">

<scriptrunat="server">

void Page_PreInit(object sender, System.EventArgs e)

{

Page.Theme = "ControlsTheme";

}

</script>

<title>Dynamic Named Skins Example</title>

</head>

<body>

<formrunat="server">

<asp:textboxid="TextBox1"skinid="lightGrayBackColor"

runat="server"width="392px">

This control uses the lightGrayBackColor skinid

</asp:textbox> <br/><br/><br/>

<asp:textboxid="TextBox3"skinid="whiteBackColor"

runat="server"width="392px">

This control uses the whiteBackColor skinid

</asp:textbox>

</form>

</body>

</html>

The above code is very similar to our previous example except that in this case, we set the Theme attribute for the Page at runtime using the Page.Theme property. Note that you can set the Theme attribute only in the Page_PreInit event.

Configuring Themes Using the web.config File Settings

So far we have configured the Theme attribute using the Page directive. We have also seen an example where we set the theme of the page at runtime. Even though both of these approaches are very useful, you need to perform this in each and every page. This can be very tedious and can result in a lot of duplication of code, especially when all the pages in the Web site use the same theme. In that case, you can obviate the need to specifying the theme attribute in every page by setting the theme attribute in the pages element (that is present under system.web) in the web.config file. For example, the following line of code in the web.config file specifies that all the pages in the Web site will use the ControlsTheme as their theme.

<pages theme="ControlsTheme" />

All the pages in the application will use the above theme specified in the web.config file unless a Theme attribute appears in the Page declaration, in which case, the selected theme for that page will override the theme specified in the web.config file.

Themes and CSS

To apply a default stylesheet for a theme, all you need to do is create a .css file within the appropriate theme folder in the Themes directory. For example, you could place a css file called DefaultStyle.css within the Themes\DefaultStyle folder. When you specify the DefaultTheme in the theme attribute of the @page directive in a page, the DefaultStyle.css file is automatically applied. Note that you can still apply a stylesheet manually in the HTML by specifying the Link element in the head tag. You can actually place more than one stylesheet file within a theme folder - in which case ASP.NET will attempt to apply all stylesheets in that theme folder to the site, combining definitions contained in all the CSS files.

Themes versus CSS Style Sheets

Themes are similar to CSS style sheets in that both themes and style sheets define a set of common attributes that apply to any page where the theme or style sheet is applied. However, themes differ from style sheets in the following ways:

* Themes can define many properties of a control or page, not just a specific set of style properties. For example, using themes, you can specify the graphics for a TreeView control, the template layout of a GridView control, and so on.
* Themes can include auxiliary files, such as graphics, that can't be included in a CSS style sheet.
* Themes do not cascade the way style sheets do; for example, theme property values always override local property values.
* Themes can include style sheet references. In that case, the style sheet definitions are applied along with other property values defined in the theme.

Conclusion

This article has examined what themes are and how they can be used to provide a consistent look and feel for an entire Web application. We have also seen how to extend built-in themes by creating custom themes that can go a long way in customizing the look and feel of a Web site. Also covered was how to set the Theme property of the Page object at runtime using the Page.Theme property and how to set the theme for an entire Web site using the entries defined in the web.config file. Finally, the article looked at how to use existing CSS style sheets in conjunction with ASP.NET 2.0 themes, which makes it possible to leverage existing investments in CSS style sheets.

Regards
Sakthi