How to: Apply ASP.NET Themes

You can apply themes to a page, a Web site, or globally. Setting a theme at the Web site level applies styles and skins to all the pages and controls in the site unless you override a theme for an individual page. Setting a theme at the page level applies styles and skins to that page and all its controls.

By default, themes override local control settings. Alternatively, you can set a theme as a style sheet theme, so that the theme applies only to control settings that are not explicitly set on the control.

To apply a theme to a Web site

1. In the application's Web.config file, set the <pages> element to the name of the theme, either a global theme or a page theme, as shown in the following example:

   <configuration>
       <system.web>
           <pages theme="ThemeName" />
       </system.web>
   </configuration>
   

   Note

   If an application theme has the same name as a global application theme, the page theme takes precedence.

2. To set a theme as a style sheet theme and be subordinated to local control settings), set the styleSheetTheme attribute instead:

   <configuration>
       <system.web>
           <pages styleSheetTheme="Themename" />
       </system.web>
   </configuration>
   

A theme setting in the Web.config file applies to all ASP.NET Web pages in that application. Theme settings in the Web.config file follow normal configuration hierarchy conventions. For example, to apply a theme to only a subset of pages, you can put the pages in a folder with their own Web.config file or create a <location> element in the root Web.config file to specify a folder. For details, see Configuring Specific Files and Subdirectories.

To apply a theme to an individual page

• Set the Theme or StyleSheetTheme attribute of the @ Page directive to the name of the theme to use, as shown in the following example:

  <%@ Page Theme="ThemeName" %>
  <%@ Page StyleSheetTheme="ThemeName" %>
  

  The theme and its corresponding styles and skins now applies only to the page declaring it.

Applying Skins to Controls

Skins defined in your theme apply to all control instances in the application or pages to which the theme is applied. In some cases, you might want to apply a specific set of properties to an individual control. You can do that by creating a named skin (an entry in a .skin file that has a SkinID property set) and then applying it by ID to individual controls.

To apply a named skin to a control

• Set the control's SkinID property, as shown in the following example:

  <asp:Calendar runat="server" ID="DatePicker" SkinID="SmallCalendar" />
  

  If the page theme does not include a control skin that matches the SkinID property, the control uses the default skin for that control type.

See Also

Tasks

How to: Disable ASP.NET Themes

How to: Apply ASP.NET Themes Programmatically

Concepts

ASP.NET Themes and Skins Overview

Other Resources

Defining ASP.NET Page Themes