Home   |   QuickStart Welcome   |   ASP.NET   |   Web Services   |   How Do I...?   
  |   I want my samples in...      

ASP.NET 2.0 Quickstart Tutorials

Using Themes to Customize a Site

The previous section demonstrated a variety of ways to specify styles for controls by setting style properties on controls themselves. For example, consider the following page, which has a number of style settings applied to individual controls on the page.

VB Page with No Theme Applied
Run Sample View Source

In addition to specifying styles on individual controls, ASP.NET 2.0 introduces Themes, which provide an easy way to define the style settings for controls and pages in your site separately from the pages of your application. The benefit of Themes is that you can design a site without regard for the style and apply the style at a later time without having to update the pages or application code. You can also obtain custom Themes from external sources to apply stylistic settings to your application. The benefit of a Theme is that the style settings are stored in a single location that can be maintained separately from the application to which the Theme is applied.

The following example demonstrates the same page with a Theme applied in order to specify the style settings for the control. Notice that the page itself does not need to contain any style information. The Theme automatically applies style properties at runtime to controls on the page.

VB Page with Example Theme Applied
Run Sample View Source

The App_Themes Folder

Themes reside in the App_Themes folder directly under the application root directory. A Theme consists of a named subdirectory under this folder that contains a collection of one or more Skin files, named with the .skin extension. A Theme can also contain a CSS file and/or subdirectories for static files like images. The figure below shows an App_Themes directory with two Themes defined, named "Default" and "White", each of which has a single skin file and CSS file.



Observe in the previous example that the contents of a skin file are simply control definitions as they might appear in a page. A skin file can contain multiple control definitions, for example one definition for each control type. The properties of controls defined in the theme automatically override the local property value for a control of the same type in the target page with the Theme applied. For example, a <asp:Calendar Font-Name="Verdana" runat="server"/> control definition in a skin file will cause all Calendar controls in pages with the Theme applied to use the Verdana font. A local value for this property on the control will be overridden by the Theme. Note that it is an error to specify an ID property value for a control definition in a skin file.

Global and Application Themes

A Theme can reside at the application-level or machine-level (globally available to all applications). Application-level Themes are placed in the App_Themes directory under the application root directory, as described above. Global Themes are placed in a "Themes" directory under the ASP.NET installation direction, for example %WINDIR%\Microsoft.NET\Framework\<version>\Themes.

Assigning a Theme to a Page

An individual page can be assigned a Theme by setting the <%@ Page Theme="..." %> directive to the name of a global or application-level Theme (the name of a folder under the Themes or App_Themes directory). A page can only have one Theme applied, but there may be multiple skin files in the theme that apply style settings to controls in the page.

Assigning a Theme in Config

You can also define the applied theme for all pages in an application by specifying the <pages theme="..."/> section in Web.config. To unset this theme for a particular page, you can set the Theme attribute of the Page directive to empty string (""). Note that a master page cannot have a Theme applied; you should set the Theme on content pages or in configuration (described below) instead.

VB Assigning a Theme in Web.config
View Source

Disabling Themes for a Control

A specific control can be excluded from having the Theme override its properties by setting the EnableTheming property to false.

VB Disabling Themes for a Control
Run Sample View Source