Working with Themes in ASP.NET

Introduction

This article describes how to work with App_Themes folder. App_Themes folder has been introduced since ASP.NET 2.0 and is generally given low priority by the developer despite it plays very important role in web development. However, there are many interesting stuffs related with App_Themes that every developer should know. I am trying to cover some of them. Please feel free to suggest something that I have not cover in this article.

How to define Theme?

To define a Theme, you need to right click the Web Project > Add ASP.NET Folder >Theme. This will by default create a new folder called App_Themes  > Theme1. You are free to rename the Theme1 folder but not the App_Themes folder. The folder name under App_Themes folder will be considered as Theme name and all .css files and .skin files under this will be attached with that theme. You can create as many number of theme you want under App_Themes folder.

A Theme can have more than one .css and/or .skin files.

What is .css file
A .css file is a Cascading Style Sheet file that contains the style, behavior about a html page and its elements. These styles are written in the .css file as a block of code and they are referred to as css class. This can broadly contain three types of classes

1. for a particular element - this defines the style of any html element and is named as the html tag name like p, table, tr etc. Following style will apply to all table of the page.

         table
            {
                  border-collapse:collapse;
                  border:1px solid #c0c0c0;
            }

   2.  for any html element - this defines the style that can be implemented in any html elements. 
        This starts with . (dot) and followed by the name of the css class.

         .ChangeBackground
         {
               background-color:#c9c9c9;
         }

         Above css class can be specified in any html element. For example

         In HTML tag: <span class="ChangeBackground">My text</span>
         In ASP.NET Control: <asp:Label ID="lblMessage" runat="Server" CssClass="ChangeBackground" />

   3.   for a particular Identifier - this defines the style of an html element whose id is specific. This starts with
         the # followed by name of the css class.

         #divMain
         {
            width:100%;
            border:1px solid #cccccc;
         }

         Above css class behavior will be implemented to the html element whose id is "divMain". like
         <div id="divMain">This is main placeholder</div>

What is .skin file?

.skin file is a new type of file introduced in ASP.NET 2.0, this can contain style infomration of any asp.net server control. These information are written in this file as if they are written asp.net page but ID property is not specified. for example

 
<asp:Label runat="server" Font-Names="Courier" />
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Green" BackColor="Yellow" />
<asp:Label SkinID="LabelError" runat="server" ForeColor="Red" BackColor="Yellow" />
     

Get solutions of the .NET problems with video explanations, .pdf and source code in .NET How to's.

Notice that in the above code I have not speicified the id of the control. Also the SkinId (will explain later) is optional to specify.

If you have used the theme with above skin in your project, the 1st line defines the style of all Label controls that will be used in the aspx page. 2nd line defines the style of only those label controls whose SkinID is specified as LabelMessage. In this way you have liberty of placing number of Label controls in your .skin files with different SkinID for different types of use. (Like you can define a skin for Label control to show success message and another skin to show error message on the page.

If you want the exact behavior of the Label control as you have defined for SkinID "LabelMessage", you should be using the SkinID value of your Label control in the aspx page as "LabelMessage".

The behavior of the Label control in your aspx page will differ based on whether you have specified the SkinID of the Label control or not or speicified the CssClass or not.

There is hardly any limitation of number of .css and .skin files you can create in a Theme but it is suggested to limit the number for easier maintainability and tracking.

How to use theme

Once you have defined a theme in your asp.net project, you can use them in two different ways.

1. By predefining them in the .aspx page
You can define the name of the theme you want to use in the Page directives of the aspx page (You can't define them in the master page). Like below

<%@ Page Theme="Theme1" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

Notice that Theme1 is the name of the folder inside the App_Themes folder and it is referred as the theme name.

Once you have used the theme in your aspx page, your page is ready to use all skins defined in the theme and all css classes defined in the .css files. You can also get the intellisense in Visual Studio IDE like this.

Intellisense for SkinID defined in .skin file

Intellisense for Class definied in .css file

Now let us see different behavior of theme in different scenaiors. I have following code in the StyleSheet.css and SkinFilefile.skin files under Theme1.

Stylesheet.css

body 
{
font-family:Arial, Verdana;
font-size:small;
}
.Label
{
background-color:Black;
color:White; 
}

SkinFile.skin

<asp:Label runat="server" Font-Names="Courier" />
<asp:Label SkinID="LabelMessage" runat="server" ForeColor="Red" BackColor="Yellow" />

To create different scenario, I have following code in the .aspx page where I am referring Theme1 in the Page directives. You can notice that I have Plain text in the top without any style and four other Label controls with different combination of SkinID and CssClass. Let us see how it behaves in different combinations.

<div>
Plain Body Text
<br />
<asp:Label ID="lblMessage" runat="server" Text="Label: Text without SkinID but skin defined for Label in .skin file" />
<br />
 
<asp:Label ID="Label1" runat="server" Text="Label: Text with Skin definied in .skin file and SkinID specified" SkinID= SkinID="LabelMessage" />
<br />
 
<asp:Label ID="Label2" runat="server" Text="Label: Text without SkinID but CSS class used from .css file - CSS overrides the Theme" CssClass="Label" />
<br />
 
<asp:Label ID="Label3" runat="server" Text="Label: Text with SkinID and CSS class used from .css file - CSS doesn't override the Theme" SkinID="LabelMessage" CssClass="Label" />
</div>

Refer to below picture as the result.

1. The 1st line is a plain text and contains no style infomration so it has inherited the style defined in the body class of .css file.
2. The 2nd line has a Label control but without CssClass and SkinID so it has inherited the style defined in the .skin file without SkinID (Font name Courier).
3. The 3rd line has a CssClass defined as "Label" so it has inherited the style defined in the Label class of .css file.
4. The 4th line has both SkinID and CssClass defined so it has overriden the style defined in the CSS and has inherited only style definied in the .skin file (LabelMessage - foreground red and background yellow).

When the page renders with theme as Theme1, the .css file of theme is referred as the link element with type as text/css (as it is referred for normal .css classes) under head element.

<head>
<title> Use of Themes (Use of CSS and .skin files)</title>
<link href="App_Themes/Theme1/StyleSheet.css" type="text/css" rel="stylesheet" />
</head>

2. Changing theme dynamically

In the above example, we saw that we had pre-defined the theme of the page in the Page directives of the .aspx page, what if we want to change the theme (look and feel of the page) dynamically based on user preference? In that case we will have to see some other alternatives, the good news is we can change the theme dynamically from code behind. See the code below.

protected void Page_PreInit(object sender, EventArgs e)
{
this.Page.Theme = "Theme2" // name of the theme
}

You need to do that in the Page_PreInit event of the .aspx page and Theme2 will be applied on the page (all skins and css class of Theme2 will be applied). Based on your need you can do little more R&D and refine the way you implement the theme dynamically. This is one of the article, I had written way back in 2007 on this topic http://www.dotnetfunda.com/articles/article14.aspx

I hope this article will help getting idea about Theme and how to use that. Please let me know your feedback or suggestions. Thanks and enjoy reading.