Using Themes in Asp.Net - Example

Using Themes
The Web pages that belong to the same Web site will invariably contain controls that have many properties in common across pages. This includes properties for setting things like background color, font size, foreground color, and other styles. You can manually set the properties for every control on every page in your site. However, that is time consuming, error prone (as you might overlook some settings), and difficult to change (as a change would have to sweep across your entire site). Instead, you can use ASP.NET themes.

ASP.NET themes consist of the following set of elements:

Skins: Skins are files with .skin extensions that contain common property settings for buttons, labels, text boxes, and other controls. Skin files resemble control markups, but contain only the properties you want to define as part of the theme to be applied across pages.

Cascading Style Sheets (CSS ): These are files with .css extensions that contain the style property definitions for HTML markup elements and other custom style classes. A style sheet is linked to a page, master page, or entire site. ASP.NET applies the styles to the page.

Images and other resources: Images (such as a corporate logo) along with other resources can be defined inside a theme. This allows you to switch out the images when you switch themes for a site.

Creating a Theme:

You create themes inside the ASP.NET special folder, App_Themes. This folder sits in your ASP.NET application root. The folder contains separate folders for each theme in your site. You then add the corresponding skins, style sheets, and images to the theme folders.

You need to apply the theme to your site. You can do so at the individual page level by adding the Theme or StyleSheetTheme attribute to the @ Page directive and setting the attribute’s value to the name of your theme (folder name).

Alternatively, you can apply the theme to an entire Web application by adding the

<pages theme="”themeName”">

element or the

<pages stylesheettheme="”themeName”">

element to the Web.config file. This will automatically apply the theme to all pages in your site.

Creating a Skin File

Skin files serve to define default settings for server control appearance attributes. Each server control has attributes for things like font, background color, width, height, and more. Many of these appearance attributes are common among the controls on your site.

A skin file differs from a style sheet in that the skin file uses the attributes of the actual control and not just a set of standard HTML style elements. Skin files contain two types of skins: default and named skins:

Default skins: A default skin automatically applies to all controls of the same type when a theme is applied to a page. A skin is considered a default skin if it does not have a SkinID attribute.

Named skins: A named skin is a control skin with a SkinID property set to a specific name value. Named skins do not automatically apply to controls by type. Instead, you explicitly apply a named skin to a control by setting the ASP.NET control’s SkinID property.

Eg: Default Skins

<asp:Button runat="server" BackColor="#FF3300" BorderStyle="Solid" Font-Bold="True" />

Eg: Named Skins

<asp:Button SkinId="BlueButton" runat="server" BackColor="Blue" BorderStyle="Solid" Font-Bold="True" />

Adding Images to Your Theme
Themes also allow you to switch out the images on your site. This is done through the skin file.

<asp:Image runat="server" SkinId="RedLogo"

ImageUrl="~/App_Themes/RedTheme/RedHead.JPG" />

Adding a Cascading Style Sheet to Your Theme:

A CSS contains style rules that are applied to elements in a Web page. CSS styles define how elements are displayed and where they are positioned on the page.

To add a CSS to your Web site, right-click the name of your theme in Solution Explorer and select Add New Item. You can then select the Style Sheet item template.

body

{

    background-color:Black;

}

When the theme is applied to a page, ASP.NET adds a reference to the style sheet to the head element of the page. In the HTML, this reference looks something like the following:

    <link href="SiteStyles.css" rel="themeName/stylesheet" type="text/css" />

Applying a Theme Programmatically:

To apply a theme programmatically, set the page’s Theme property in the Page_PreInit method.

protected void Page_PreInit(object sender, EventArgs e)

    {

        switch (Request.QueryString["theme"])

        {

            case "Blue":

                Page.Theme = "RedTheme";

                break;

            case "Pink":

                Page.Theme = "PinkTheme";

                break;

        }

    }