Themes are used to define visual styles for web pages. Themes are made up of a set of elements: skins, Cascading Style Sheets (CSS), images, and other resources. Themes can be applied at the application, page, or server control level. We can create theme by adding App_Themes folder in our project in solution explorer panel. The simple steps are Right click on project and select Add ASP.NET folder – Theme. We can add files into it also. The sample code snippets in this article have been written in C#.

Applying Theme to a Page

A Theme is an attribute of the page class that we can set in various ways. Once the Theme is set, the page ensures that all of its controls will render according to the visual settings defined in the Theme. Listing 1 illustrates how to define a Theme to a page.

Listing 1

<% Page Language=“C#” Theme=”myTheme” %>

Applying Theme to an Entire Application

In addition to applying an ASP.NET 2.0 theme to our ASP.NET pages using the Theme attribute within the page directive, we can also apply it at an application level from the Web.config file. Then the Theme will be applied automatically to each and every page within the application. This is illustrated in Listing 2.

Listing 2

<configuration>
  <system.web>
    <pages theme=”myTheme”/>
  </system.web>
</configuration>

Applying Theme to all Applications in a Server

If we want to use a particular theme for all the web applications in the server, we can do the same. We can specify the theme that we want to use within the machine.config file. This is illustrated in Listing 3.

Listing 3

<pages buffer="true" enableSessionState="true"
       enableViewState="true" enableViewStateMac="true"
       autoEventWireup="true" validateRequest="true"
       enablePersonalization="false" theme=" myTheme " >
</pages>

Thus adding the Theme attribute to the pages node within the machine.config file is a great solution for the server having multiple applications using the same Theme. Setting a Theme in the machine.config file means that we do not need to use this theme separately for all the applications on the server. If we specify another Theme in the application's web.config file or in the Web page's Page directive, then settings that are set in the web.config file override settings that are in the machine.config file and settings that are placed in the Page directive override both settings in the machine.config and in the web.config files.

Removing Theme from Server Control

Whether themes are set at application level or page level, we can set a control’s own style on it.

Listing 4

<asp:Textbox ID=”txtTest” Runat=”server”
BackColor=”White” ForeColor=”Black” EnableTheming=”false” />

If we apply myTheme at application or page level, the same theme will be applied in all controls except the "txtTest" textbox control as mentioned above. Instead, the backcolor and forecolor, as mentioned in the code snippet, will be applied.

Removing Theme from Web Pages

If we set the Theme for an entire application in the web.config file and then want to exclude a single ASP.NET page, we can do the same by removing Theme setting at the page level, just like server control. This is illustrated in Listing 5.

Listing 5

<% Page Language=“C#” EnableTheming=”false” %>

If we make EnableTheming attribute false in the page directive, the Theme defined in web.config file will not be applied in the page. But we can still provide Theme in respect of a specific server control in the same page. This is illustrated in Listing 6.

Listing 6

<asp:Textbox ID=”txtTest” Runat=”server” EnableTheming=”true” Theme=” myTheme”/>

Theme vs. StylesheetTheme

The Page directive also includes the attribute StylesheetTheme that we can use to apply themes to a page. So, the big question is: If we have a Theme attribute and a Stylesheet attribute for the page directive, what we should use?

Listing 7

<% Page Language=“C#” StylesheetTheme =”myTheme” %>

The StylesheetTheme attribute works the same as the Theme attribute to apply a Theme to a page. The difference is that, when attributes are set locally on the page within a particular server control, the attributes are overridden by the theme when we use the Theme attribute. But if we apply pages’s theme using the StylesheetTheme attribute, the locally set attributes of the server control will not be overridden.

In order to create Theme for an application, first we need to create a proper folder structure in application. Within the App_Themes folder, we can create an additional Theme Folder for each and every Theme that we might use in application. The reasons to use more than one Theme are because seasons change, day/night changes, different business units, category of user, user preferences, etc.

The elements of a Theme Folder can be as follows:

·         A Single skin file

·         CSS files

·         Images

Creating a Skin

A skin enables us to modify any of the properties applied to the server controls in our ASP.NET page. Skins can work in conjunction with CSS files or images. To create a Theme we can use a single skin file in the Theme Folder. The skin file extension should be always .skin.  

Listing 8

<asp:Label Runat=”server” ForeColor=”Red” Font-Names=”Verdana” Font-Size=”X-Small”/>
<asp:Textbox Runat=”server” ForeColor=”Red”
 Font-Names=”Verdana” Font-Size=”X-Small”  BorderStyle=”Solid” BorderWidth=”1px”
 BorderColor=”Yellow” 
Font-Bold=”True” />

As the above example suggest, we need to define a definition for style in respect of each server control in skin file in the application. We can create different skin files in different Theme Folder.

Listing 9

<% Page Language=“C#” Theme =”myTheme” %>

We can provide styles only for server controls using skin file. But ASP.NET pages are made up of HTML controls, raw HTML or raw Text and to implement style for them we need CSS files within Theme Folder. To create a CSS file for Theme we will click Theme Folder and then select Add New Item. In the list of options we should choose the option Style Sheet and will provide a name say test.CSS. When we are using both skin and CSS file, the skin file will take precedence over CSS file for server controls.

In .skin file of Theme’s Folder we can create multiple definitions in respect of same server control. To create multiple definitions of a single element we can use the SkinID attribute to differentiate among the definitions. The value of SkinID can be anything.

Listing 10

<asp:Textbox Runat=”server” ForeColor=”Blue”
 Font-Names=”Verdana” Font-Size=”X-Small”  BorderStyle=”Solid” BorderWidth=”1px”
 BorderColor=”Red” 
Font-Bold=”True” />
 
<asp:Textbox Runat=”server” ForeColor=”Red”
 Font-Names=”Verdana” Font-Size=”X-Small”  BorderStyle=”Dotted”
 BorderWidth=”5px” BorderColor=”Blue” 
Font-Bold=”False” SkinID=”txtDotted”/>
 
<asp:Textbox Runat=”server”
 ForeColor=”Yellow” Font-Names=”Arial” Font-Size=”X-Large”  BorderStyle=”Dashed”
 BorderWidth=”1px” BorderColor=”Red” 
Font-Bold=”False”  SkinID=”txtDashed”/>

In the above code there is no SkinID for the 1st TextBox server control definition that means it will be used as the default style for TextBox Server control. Where SkinID will be used, the particular definition of TextBox Server Control will be used.

Listing 11

<% Page Language=“C#” Theme =”myTheme” %>
<html>
<body>
<form id=”frmThemeTest” runat=”server”>
<p>
<asp:TextBox ID=”txtThemeTest1”
 Runat=”server”>TextBox1</asp:TextBox>
<p>
<asp:TextBox ID=”txtThemeTest2”
 Runat=”server” SkinID=” txtDotted “> TextBox1</asp:TextBox>
<p>
<asp:TextBox ID=”txtThemeTest3”
 Runat=”server” SkinID=” txtDashed”> TextBox1</asp:TextBox>
</body>
</html>

In the above code the Theme has been defined at design time, but we can work with the Theme programmatically.

Assigning the Pages’s Theme Programmatically

In Listing 12 it is illustrated how we can assign the pages' theme programmatically.

Listing 12

<script runat =”server”>
Protected void Page_PreInit(object sender,
 System.EventArgs e)
{
Page.Theme=Request.QueryString[“AppliedTheme”];
}
</script>

Assigning a Control’s SkinID Programmatically

There is another option to assign a specific server control’s SkinID property programmatically, which is illustrated in Listing 13.

Listing 13

<script runat =”server”>
Protected void Page_PreInit(object sender,
 System.EventArgs e)
{
txtThemeTest.SkinID=”txtDashed”;
}
</script>

Themes enable us to incorporate actual images into the style definitions. A lot of controls use images to create a better visual appearance. We should create an Images folder within the Themes folder itself.

Listing 14

<asp:image ID="Image1" 
 runat="server" Imageurl="Images/testImage.jpg" />

When the above reaches the client, the browser will be smart enough to request testImage.jpg from the App_Themes/ myTheme /Images directory (when myTheme is the selected theme).

MSDN

Themes are a powerful addition to the ASP.NET framework. By taking advantage of themes, we can dramatically reduce the amount of content that we need to add to individual ASP.NET pages. Themes enable us to define the appearance of a control once and apply the appearance throughout a Web application. Therefore, themes enable us to easily create Web sites that have a consistent and maintainable design.  This improves the maintainability of our site and avoids unnecessary duplication of code for shared styles.