Tag Archives: Themes

To apply a theme to your web site, you have three different options: at the page level in the Page directive, at the site level by modifying the web.config file, and programmatically

To apply a theme to your web site, you have three different options: at the page level in the Page directive, at the site level by modifying the web.config file, and programmatically.

  • Setting the theme at the page level: Setting the Theme or StyleSheetTheme property at the page level is easy: just set the relevant attribute in the Page directive of the page:
    <%@ Page Language=”VB” AutoEventWireup=”false” CodeFile=”Default.aspx.vb” Inherits=”_Default” Theme=”DarkGrey” %>
  • Setting the theme at the site level: To enforce a theme throughout the entire web site, you can set the theme in the web.config file by adding a theme attribute to the <pages> element
    inside the <system.web> element:
    <pages theme=”DarkGrey”>

    </pages>
    Make sure you type theme with all lowercase letters because the XML in the web.config file is case sensitive.
  • Setting themes programmatically: The third and final way to set a theme is programmatically through code.

Different Types of Themes

An ASP.NET page has two different properties that enable you to set a theme: the Theme property and the StyleSheetTheme property. Both of these properties use the themes that you define in the App_Themes folder. Although at first they seem very similar, it’s their runtime behavior that makes the difference. The StyleSheetTheme is applied very early in the page’s life cycle, shortly after the page instance has been created. This means that an individual page can override the settings from the theme by applying inline attributes on the controls. So, for example, a theme with a skin file that sets the BackColor of a button to purple can be overridden by the following control declaration in the markup of the page:
<asp:Button ID=”Button1” runat=”server” Text=”Button” BackColor=”Red” />
The theme in the Theme property, on the other hand, is applied late in the page’s life cycle, effectively overriding any customization you may have for individual controls.