How to: Define ASP.NET Themes

You can define your own page or global themes. Themes consist of several supporting files, including style sheets for page appearance, control skins to decorate server controls, and any other supporting images or files that make up the theme.

To create a page theme

1. Create a new folder named App_Themes in your Web site.

   Note
   The folder must be named App_Themes.

2. Create a new subfolder of the App_Themes folder to hold your theme files. The name of the subfolder is the name of the theme. For example, to create a theme named BlueTheme, create a folder named \App_Themes\BlueTheme.

3. Add files to your new folder for skins, style sheets, and images that make up the theme.

To create a global theme

1. Create a Themes folder using this path:

   iisdefaultroot\aspnet_client\system_web\version\Themes
   

   For example, if the default Web root folder is in C:\Inetpub\wwwroot on the Web server, the new Themes folder might be this:

   C:\Inetpub\wwwroot\aspnet_client\system_web\version\Themes
   

   Note
   The folder name for global themes is Themes, not App_Themes, as it is for page themes.

2. Create a theme folder as a subfolder of the Themes folder. The name of the subfolder is the name of the theme. For example, to create a global theme named BlueTheme, create a folder named ...\Themes\BlueTheme.

3. Add files to your new folder for skins, style sheets, and images that make up the theme.

To create a skin

1. Create a new text file in your theme subfolder with a .skin extension.

   The typical convention is to create one .skin file per control, such as Button.skin or Calendar.skin. However, you can create as many or as few .skin files as you need; skin files can hold multiple skin definitions.

2. In the .skin file, add a normal control definition (using declarative syntax), but include only the properties you want to set for the theme and do not include an ID attribute. The control definition must include the runat="server" attribute.

   The following example shows a default control skin for a Button control, defining the color and font for all Button controls in the theme:

   <asp:Button runat="server" 
     BackColor="Red" 
     ForeColor="White" 
     Font-Name="Arial" 
     Font-Size="9px" />
   

   Note
   A convenient way to create a skin is to add the control to a page and configure it so that it has the look you want. For example, you might add a Calendar control to a page and set its day header, selected date, and other properties. Then, you can copy the control definition from the page to a skin file, and then remove the ID attribute.

3. Repeat Steps 2 and 3 for each control skin you want to create.

   Note
   You can define only one default skin per control. Use the SkinID attribute in the skin's control declaration to create a named skin that you can apply to specific instances of a control.

See Also

Other Resources

ASP.NET Themes and Skins