• Choose a category
• All
• Classic-Fiction

Theming Pages and Controls

You can apply themes at various levels—application, folder, and individual pages. In addition, within the same theme you can select different skins for the same type of control.

Setting a theme at the application level affects all the pages and controls in the application. It’s a feature you configure in the application’s web.config file:

The theme attribute sets a customization theme, while the styleSheetTheme attribute sets a style sheet theme. Note that the case is important in the web.config’s schema. Likewise, a theme can be applied to all the pages found in a given folder and below that folder. To do so, you create a new web.config file in an application’s directory and add the section just shown to it. All the pages in that directory and below it will be themed accordingly. Finally, you can select the theme at the page level and have styles and skins applied only to that page and all its controls.

To associate a theme with a page, you set the Theme or StyleSheetTheme attribute on the @Page directive, and you’re all set:

<% @Page Language="C#" Theme="BlueOne" %>

<% @Page Language="C#" StyleSheetTheme="BlueOne" %>

Also in this case, Theme sets a customization theme, whereas StyleSheetTheme indicates a style sheet theme.

Bear in mind that the name of the selected theme must match the name of a subdirectory under the App_Themes path or the name of a global theme. If a theme with a given name exists both locally to the application and globally to the site, the local theme takes precedence.

While we’re speaking of precedence, note that themes have a hierarchical nature: directory-level themes take precedence over application-level themes, and page-level themes override any other themes defined around the application. This hierarchy is independent of which attributes are used—Theme or StyleSheetTheme—to enable theming.

Note

Setting both the Theme and StyleSheetTheme attributes is not prohibited, even though it is not a recommended practice. There’s a behavioral gap between the two forms of themes that should make clear which one you need in any situation. However, if you set both attributes, consider that both themes will be applied—first the style sheet theme and then the customization theme. The results depend on the CSS cascading mechanism and, ultimately, are determined by the CSS settings of each theme.

Applying Skins

A skin file looks like a regular ASP.NET page because it is populated by control declarations and import directives. Each control declaration defines the default appearance of a particular control. Consider the following excerpt from a skin file:

BorderColor="darkgray"

Font-Bold="true"

BorderWidth="1px"

BorderStyle="outset"

ForeColor="DarkSlateGray"

BackColor="gainsboro" />

The net effect of the skin is that every Button control in a themed page will be rendered as defined by the preceding markup. If the theme is applied as a style sheet, the settings just shown will be overridable by the developer; if the theme is a customization theme, those settings determine the final look and feel of the control. Properties that the theme leaves blank are set according to the control’s defaults or the .aspx source.

Important

Whatever theme you apply—customization or style sheet—control properties can always be modified through code in page events such as Init and Load.

A theme can contain multiple skins for a given control, each identified with a unique name—the SkinID attribute. When the SkinID attribute is set, the skin is said to be a named skin. A theme can contain any number of named skins per control, but just one unnamed (default) skin. You select the skin for a control in an ASP.NET themed page by setting the control’s SkinID property. The value of the control’s SkinID property should match an existing skin in the current theme. If the page theme doesn’t include a skin that matches the SkinID property, the