As a web application developer, it is necessary to consistently change look and feel of your application / site, this can be done by different ways.
- Applying Inline style attribute to the page level, control level.
- Apply external Cascading style (CSS).
Asp.net 2.0 introduces new feature called as "Themes & Skins" which allow us to define style definition centrally.
Themes are set of elements like CSS, Images, Skins, etc. Themes are defined in a special directory called as "App_Themes". To make site customized you can define multiple themes, one can apply theme at application level, page level & control level.
Themes and Skins can be uniformly applied to both windows as well as web applications, you can include CSS file inside Theme, which can be used as a part of theme.
Skins:
Themes contains Skins, theme file contain style definition for individual server controls.
Types of Skins:
There are two types of skins.
Default Skins:
A control skin for which a "SkinID" attribute is not set which means skin get applied automatically for the similar type of the server controls.
Named Skins:
SkinId property will be set, i.e. Named skins can be set to the control.
Page Theme:
Page theme defines themes for the pages or for entire application, you can apply themes for single page as shown below.
<%@ Page Language="C#" AutoEventWireup="true" Theme="Theme1" CodeFile="Default.aspx.cs" Inherits="_Default" %>
Defining theme which can be used for entire application by using configuration file as:
<configuration>
<appSettings/>
<connectionStrings/>
<system.web>
<compilation debug="false" />
<authentication mode="Windows" />
<pages theme ="Theme1" />
</system.web>
</configuration>
EnableTheming:
You can enable or disable theme to particular control on the page by using EnableTheme property as:
<asp:TextBox ID="TextBox1" BackColor="ButtonShadow" ForeColor="white" EnableTheming="false" runat="server"></asp:TextBox>
Programmatically accessing them to the page.
protected void Page_PreInit(object sender, System.EventArgs e)
{
Page.Theme = Request.QueryString["Theme1"];
}
It is required to set the Theme property of the page property in or before the page_PreInit event for any static controls that are on the page.
Here is the project structure.
Themes_Skins
|
|-------App_Themes
| |
| |-----Msn_Blue
| | |
| | |-----Default.css
| | |
| | |-----Default.skin
| |
| |-----Msn_Red
| | |
| | |-----Default.css
| | |
| | |-----Default.skin
| |
|-----Default.aspx
|
|-----Index.aspx
On index.aspx I have drop-down to select theme which you want, I set this theme programmatically as below:
protected void ddSelSkin_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddSelSkin.SelectedValue.ToString().Trim() != "")
{
Session["Theme"] = ddSelSkin.SelectedValue.ToString();
Response.Redirect("./Default.aspx");
}
}
At very first I take this in session to get applied throughout the application on index.aspx.cs page & redirect to "Default.aspx" page.
protected void Page_PreInit(object sender, System.EventArgs e)
{
Page.Theme = Session["Theme"].ToString();
btnDisplay.SkinID = "btnSkin";
calNew.SkinID = "calControl";
}
I could have been done this on index.asp page but there is restriction as one can only set the "Page.Theme" under "Page_PreInit" events only & then set the SkinId's of different controls.
Microsoft has given very great feature which reduces developer's/designers headache of keep on changing GUI and color combinations.
Enjoy easy coding!