Themes in ASP.net

Themes

Author: Prakash Singh Mehra

Introduction: Themes are the way to define the formatting details for various controls and can be reused in multiple pages. Later, by applying minor changes on the themes, the complete appearance of website can be changed with maintaining consistency.

Why another formatting feature? CSS is a very convenient formatting feature but it is limited to the generic formatting details (fonts, borders, background etc) but sometimes it’s required to achieve control specific formatting. Asp.net 2.0 provides a new feature, “Themes”, to fill this gap.

It’s different to CSS in several manners:
1. Themes are control based not Html Based.
2. Themes are implemented on the server side while in case of style sheets; client receives both page and css and combines them at client side.
3. Themes can be applied through configuration files.
4. Themes provide the flexibility to retain the css feature instead of blindly overriding it.

Creating Themes Folder:
Create a folder (with specific name) under App_Theme folder, which is under application main directory then add one or more skin files (text file with .skin extension) under the created theme folder. Application may contain many themes and all of them should be defined under different theme folders. But only one theme can be active on a page at a time.

Creating Skin Files:
Skin file is a text file with .skin extension. It contains a set of control tags with standardized properties as:
<asp:TextBox runat="server" BackColor="Orange"/>
The runat="server" portion is always required. Everything else is optional while id attribute is not allowed in a theme.

It’s also possible to place multiple skin files under the theme folder, but ASP.NET treats them all as a part of single theme definition. It’s more useful in case if separate skin files are written for complex controls (Calender, Grid View) to distinguish   their formatting from other simple controls.

Note: Visual studio doesn’t provide any design time support for creating themes, so it’s better approach to copy the tag from the web page and modify it as per theme definition.

Applying Themes:
To apply the theme in a web page, you need to set the Theme attribute of the Page directive to the folder name for your theme. (ASP.NET will automatically scan all the skin files in that theme.)
<%@ Page Language="C#" AutoEventWireup="true" ... Theme="MyTheme" %>

Once a theme is applied to a page, ASP.NET considers each control on that web page and checks the registered skin files to see if they define any properties for that control. If ASP.NET finds a matching tag in the skin file, the information from the skin file overrides the current properties of the control.

But sometimes, it’s required to override some of theme properties with self defined properties. This can be achieved by using StyleSheetTheme attribute in place of Theme. It will restrict the theme settings for those control properties which are already set and the other properties will take configuration from themes (The same thing happens when we apply css classes).
<%@ Page Language="C#" AutoEventWireup="true" ... StyleSheetTheme="MyTheme" %>

There is also an option (EnableTheming = ‘False’) to restrict themes for all the properties under the specific control.
<asp: TextBox ID="TextBox1" runat="server" ... EnableTheming="false" />

Creating multiple skins for the same control:
If more than one theme is defined for the same control, ASP.NET gives build error. But the situation can be handled by supplying SkinID attribute to the conflicting themes for the same control.
<asp:TextBox runat="server" BackColor="Orange" />
<asp:TextBox runat="server" BackColor="Red" SkinID="Dramatic"/>

Correspondingly, set the particular SkinId for the web control.
<asp: TextBox ID=" TextBox 1" runat="server" ... SkinID="Dramatic" />

Note: It’s possible to use same skinID for several themes which are associated to different control.
<asp:TextBox runat="server" BackColor="Red" SkinID="Dramatic"/>
<asp:ListBox runat="server" BackColor="Red" SkinID="Dramatic"/>

Using CSS in a theme:
Themes can be further standardized using css classes. To do so, place the css class under the respective theme folder. ASP.Net searches for all css classes under this folder and dynamically binds them to the web page (that uses this particular theme) through link attribute (It’s only possible if runat=”server” attribute is setfor the web page <head> section)
<head runat="server">

Applying themes through configuration files:
A particular theme can be applied throughout the web site using Web.config file. As:
<Configuration>
<system.web>
<pages theme="MyTheme" />
OR
<pages styleSheetTheme="MyTheme" />
</system.web>
</Configuration>

Applying themes dynamically:
Use Page.Theme or Page.StyleSheet property(Page.Theme=”MyTheme”) at the Pre_Init event. So if it’s required to change the theme, the pre_init event should be triggered again. This can be achieved by forcefully performing page postback(eg, page redirection to same page).

Similiary, the control’s SkinID property can also be set dynamically, in case of named skins.

One of the limitations of applying themes dynamically is that you can't apply theme within a user control or master page as neither of them has a Pre_Init event.

Articles on Asp Theme:

MSDN Link :

http://msdn.microsoft.com/en-us/magazine/cc163711.aspx

http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx

Dynamic Theme Load :

http://www.codeproject.com/KB/aspnet/dynamicThemes.aspx

Video Tutorial:

http://download.microsoft.com/download/3/6/0/3604c3d2-0db9-4726-910d-b3b8f93a86e4/hilo_profile-themes_final.wmv