Share via

How to: Define ASP.NET Page Themes

  • Article

In Visual Web Developer you can define page themes which you can then apply to one or more pages in your application. You can also create themes at the machine level that can be used in multiple applications on the server.

Themes consist of several supporting files, including style sheets for page appearance, control skins to define the appearance of server controls, and any other supporting images or files that make up the theme. The content of a theme is the same whether the theme is defined as a page theme or as a global theme.

Themes can be applied by using either the Theme or StyleSheetTheme attribute of the @ Page directive, or by setting the pages Element (ASP.NET Settings Schema) element in the application configuration file. Visual Web Developer will only visually represent themes applied by using the StyleSheetTheme attribute.

To create a page theme

  1. In Solution Explorer, right-click the name of the Web site for which you want to create a page theme, and then click Add ASP.NET Folder.

  2. Click Theme.

    If the App_Themes folder does not already exist, Visual Web Developer creates it. Visual Web Developer then creates a new folder for the theme as a child folder of the App_Themes folder.

  3. Type a name for the new folder.

    The name of this folder is also the name of the page theme. For example, if you create a folder named \App_Themes\FirstTheme, the name of your theme is FirstTheme.

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

To add a skin file and a skin to a page theme

  1. In Solution Explorer, right-click the name of your theme and then click Add New Item.

  2. In the Add New Item dialog box, click Skin File.

  3. In the Name box, type a name for the .skin file, and then click Add.

    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.

  4. In the .skin file, add a normal control definition by using declarative syntax, but include only the properties that you want to set for the theme. The control definition must include the runat="server" attribute, and it must not include the ID="" attribute.

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

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

    This Button control skin does not contain a skinID attribute. It will be applied to all of the Button controls in the themed application that do not specify the skinID attribute.

    Note

    An easy way to create a control 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, but you must remove the ID attribute.

  5. Repeat steps 2 and 3 for each control skin file that 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 named skins for the same type of control.

To add a cascading style sheet file to your page theme

  1. In Solution Explorer, right-click the name of your theme and then click Add New Item.

  2. In the Add New Item dialog box, click Style Sheet.

  3. In the Name box, type a name for the .css file, and then click Add.

    When the theme is applied to a page, ASP.NET adds a reference to the style sheet to the head element of the page. For more information, see How to: Apply ASP.NET Themes

Creating Global Themes

A global theme applies to all of the Web sites on a server. The location in which you create a folder for global themes depends on whether you are running your Web site using Internet Information Services (IIS) or testing it using the ASP.NET Development Server.

Note

If you are working with a file system Web site, by default Visual Web Developer runs your Web site for testing by launching the ASP.NET Development Server. For other types of Web sites, Visual Web Developer runs pages in IIS for testing.

To create a global theme

  1. Create a Themes folder using the following path.

    %windows%\Microsoft.NET\Framework\version\ASP.NETClientFiles\Themes

    Note

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

    Create a subfolder of the Themes folder to hold your global theme files.

    The name of the subfolder is the name of the theme. For example, if you create a folder named \Themes\FirstTheme, the name of your theme is FirstTheme.

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

    Note

    When you define a global theme, you cannot directly add skin and style sheet files to it using Visual Web Developer. You might find it easier to define and test the theme as a page theme and then copy it to the folder used for global themes on your Web server.

  3. If your Web site is a file-system Web site that you are testing with the ASP.NET Development Server, your theme is ready to test.

  4. If you are testing your Web site using a local IIS Web site, open a command window and run aspnet_regiis -c to install the theme on the server running IIS.

  5. If you are testing your theme on a remote Web site or an FTP Web site, you must manually create a Themes folder using the following path.

    IISRootWeb\aspnet_client\system_web\version\Themes

See Also

Concepts

ASP.NET Themes and Skins Overview