What is a Theme?

Themes are the text-based style definitions in ASP.NET 2.0. Themes are similar to Cascading Style Sheets (CSS) in that they enable you to define visual styles for your Web pages.  A theme is a collection of property settings that allow you to define the look of pages and controls, and then apply the look consistently across pages in a Web application, across an entire Web application, or across all Web applications on a server.

In the solution explorer, Themes and Skins are centrally placed at App_Themes folder.  To add a new Theme to your project, Right click your solution explorer, Select “Add ASP.Net folder” and click “Theme”. This will add “App_Themes” folder and a default theme with name “Theme1” under this. Rename this theme as per your requirement.

Each theme folder can contain combination of following elements,

Ø       Skin files

Ø       CSS files

Ø       Images

Ø       Other resources files that is used to style the page and page elements.

You can add css files and CSS files from “Add New Item” dialogue box.

The CSS files will have the CSS styles sheets which can be used to style the page and page elements as usual. Skin is new feature that is released new in ASP.Net 2.0. We will see more about Skins in coming sections. Themes can also include graphics and other resources, such as script files or sound files or Image Files.

It will be good if we understand how to apply theme before understanding Skins. Next section, we will see about that.

Applying Themes

A theme can be applied to an ASP.Net project in various ways.

1.      At Page level

2.      At Application level

3.      At Control level

4.      At Server level

At Page Level

A theme can be applied to a form through the @Page Directive by the following syntax,

<%@Page Language="VB" Theme="DotNetIndiaSkin" %>

At Application Level

We can also apply it at an application level from the web.config file.

<system.web>

<pages theme=" DotNetIndiaSkin" />

</system.web>

Now all the Web forms under this web.config will apply the “DotNetIndiaSkin” theme.

Skins

A skin is a definition of styles applied to server controls for your ASP.NET page. A skin file is created with extension .skin that contains the controls with styles assigned to it.

To create a Skin file, right click the themes folder in your Solution Explorer, click “Add New Item”. Select a skin file.

You can define 2 types of skins for the page controls,

Default skin

It is a type of skin that gets automatically applied to a page when the theme name is assigned in @Page Directive. In other word, a default skin does not have SkinID. Suppose, if you define a default skin for a Button Control then it will apply to all the button controls in that page when it is applied. For example, it is something similar to defining CSS styles for HTML elements like LI, LABEL which will be automatically applied when the style sheet is referenced in the HTML file.

Refer a default skin for button control below,

<asp:Button runat="server" BackColor="#FFE0C0" BorderStyle="Solid" ForeColor="Maroon" />

Named Skin

It is a type of skin which we have to apply to every control explicitly. In other words, it will have SkinID attribute associated with it. To apply it to a control, the skin ID should be assigned to the SkinID property of the control.

<asp:Button SkinID=”ClassicButton” runat="server" BackColor="#FFE0C0" BorderStyle="Solid" ForeColor="Maroon" />

Applying the named skin to a control

   <asp:Button ID="btnSave" SkinID="ClassicButton" runat="server" Text="Button" />

This is an example of applying theme to control level. Make sure, you have set Theme property of Page attribute to a Theme that contains the skins.

Types of the Themes

The Themes we discussed above is private to that particular web application because it appears in the private folder “App_Themes” under that web application. The types of themes we can create depend on accessibility will be,

1.      Page Themes

2.      Global themes

Page themes are the one which we discussed above.

Global Themes

Global themes can be used across the applications that are hosted on that server.

These themes will be residing in the following location of the web server,

C:\%WINDIR%\Microsoft.NET\Framework\<version>\ASP.NETClientFiles\Themes

I have installed framework on C drive.

So, if you want to create a theme that should be global then put it into the above location. The Theme file should be under the subfolder in that above said Location while the name of the sub folder will be your name of the theme.

Note

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

Precedence

Case 1:

If you set the @Page directive’s Theme property, which have themes defined for all controls and you have specified properties for a control in the page itself. Now in this case the properties defined in theme will override the property value that is been set in the page. This is to provide consistent look to the project even if you change the properties in the page.

Case 2:

Alternatively, you can apply a theme as a style sheet theme by setting the page's StyleSheetTheme property. In this case, local page settings take precedence over those defined in the theme when the setting is defined in both places. This is the model used by cascading style sheets. You might apply a theme as a style sheet theme if you want to be able to set the properties of individual controls on the page while still applying a theme for an overall look.

Programmatically Setting the Themes

We can set the Theme attribute of Page Programmatically in Page_PreInit Event.

protected void Page_PreInit(object sender, EventArgs e)

{

Page.Theme=”DotNetIndiaClassic”;

}

See the Project “MultipleThemes”.

Points to Note

Ø       If we have applied theme for the entire application and if we like to exclude one page from the applied the theme, then we have to set the following attribute in the page directive of that particular page.

EnableTheming="False"

            You can also do this programmatically. Refer the below code snippet,

Disabling Theme Set in Web.Config in a Page Programmatically

Ø       There is always a need to set media attribute to style sheet reference (<link> tag) for print screen. But, when we use Themes, the style sheets will be automatically referenced in the aspx page which makes difficult to add media attribute. To overcome this difficulty, refer the following code snippet,

Setting Media property for StyleSheets When Using Themes in ASP.Net