Skins and themes in ASP.NET

Submitted by planetsourcecode on Tuesday, June 9, 2009 - 13:07.

Sometimes we have to design those pages which have different color schemes but it is very difficult to maintain these types of pages. We can overcome from this situation by using skins and themes. This makes these things easier. 1). First create a Master Page having the following components. * One Content Placeholder 2).Create another page (default.aspx) and select the Master Page 3). Add a textbox and a dropdown control into the page Like



Change the page to blue!
Change the page to red!
Change the page to green!

4). Add the following function


public void Page_PreInit()
{
// Sets the Theme for the page.
this.Theme = "Blue";
if (Request.Form != null && Request.Form.Count > 0)
this.Theme = this.Request.Form[4].Trim();
}

5). Change the header of the page like below


%@ Page Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="User Selectable Themes" StylesheetTheme="Blue" %>

6). Create a folder App_Theme And create three sets of theme folder, the theme set will include one CSS file and one .skin file Folder Names: Blue,Green, Red Hierarchy App_Theme • Green * default.css * default.skin • Red * default.css * default.css • Blue * default.css * default.css Coding for individual files: blue theme set Filename: default.css


td.title 
{
font-size: 1em;
text-align: center;
font-family: verdana;
font-size: x-large;
font-weight: bolder;
color: Navy;
}
table.header
{
background-color: #cee9ff;
}
h1
{
font-size: large;
color: Navy;
}
h2
{
font-family: Verdana;
font-size: medium;
margin-top: 30;
color: Navy;
}
p
{
font-family: Verdana;
font-size: small;
color: Navy;
text-align: left;
}
hr
{
border: 0;
border-top: 2px solid Navy;
height: 2px;
}

Filename: default.skin

Coding for individual files: Green Filename: default.css


body 
{

}
td.title 
{
font-size: 1em;
text-align: center;
font-family: verdana;
font-size: x-large;
font-weight: bolder;
color: Green;
}
table.header
{
background-color: Lime;
}
h1
{
font-size: large;
color: Green;
}
h2
{
font-family: Verdana;
font-size: medium;
margin-top: 30;
color: Green;
}
p
{
font-family: Verdana;
font-size: small;
color: Green;
text-align: left;
}
hr
{
border: 0;
border-top: 2px solid Green;
height: 2px;
}

Filename: default.skin

Coding for individual files: Red Filename: default.css


body 
{

}
td.title 
{
font-size: 1em;
text-align: center;
font-family: verdana;
font-size: x-large;
font-weight: bolder;
color: Maroon;
}
table.header
{
background-color: Red;
}
h1
{
font-size: large;
color: Maroon;
}
h2
{
font-family: Verdana;
font-size: medium;
margin-top: 30;
color: Maroon;
}
p
{
font-family: Verdana;
font-size: small;
color: Maroon;
text-align: left;
}
hr
{
border: 0;
border-top: 2px solid Maroon;
height: 2px;
}

Filename: default.skin



//Add all the others controls if you have in the form

About the author: Planet Source Code is a place for all developer providing free source codes, articles, complete projects,complete application in PHP, C/C++, Javascript, Visual Basic, Cobol, Pascal, ASP/VBScript, AJAX, SQL, Perl, Python, Ruby, Mobile Development

Skins and themes in ASP.NET

Comments

sharukh

Add new comment