How to change Page theme dynamically in asp.net | How to change website theme dynamically at runtime using asp.net - ASP.NET,C#.NET,VB.NET,JQuery,JavaScript,Gridview

How to change Page theme dynamically in asp.net | How to change website theme dynamically at runtime using asp.net

By: Suresh Dasari Oct 29, 2011

Introduction:

In this article I will explain how to change themes dynamically using asp.net.

Description:

In many sites if you observe we found options like changing the color of websites based on selection of color after seen those type of theme change options I decided to write the post to change the themes dynamically by using asp.net.

In asp.net we have feature called “Themes” by using this feature and below code to allow users to change themes dynamically for our website.

protected void Page_PreInit(object sender, EventArgs e)

{

if (Session["Theme"] != null)

{

Page.Theme = Session["Theme"].ToString();

}

Here Page_PreInit event will rise before any other event and Page.Theme is used to get the required theme from App_Themes folder based on Session["Theme"] value.

To implement this first create new website in visual studio after that right click on your website and select Add New Item after that select Master page and click OK. Now master page added to your application. Now again right click on your website and select Add ASP.NET Folder under that select Theme now App_Themes folder will add to your application. Now right click on App_Themes folder and create two new Asp.net folders and give names as “Blue” and “Red”. Now select Blue folder under that add one skin file and one css file same way add skin file and css file in Red folder also. Here we need to use Page_PreInit event in all the pages wherever we need to change themes dynamically for that reason instead of writing this same event in all the pages we need to create new class file and give name as ThemeClass and write following code.

public class ThemeClass:System.Web.UI.Page

{

protected void Page_PreInit(object sender, EventArgs e)

{

if (Session["Theme"] != null)

{

Page.Theme = Session["Theme"].ToString();

}

Note: Here we need to inherit Asp.net base class properties for that reason we added System.Web.UI.Page to our class file.

Over all our structure of the application will be like this

Now open MasterPage and write the following code

MasterPage.master page code

<title>Change Page Themes Dynamically</title>

</head>

<body>

<tr>

<b>Click Button to change Theme</b><br />

<asp:Button ID="btnBlue" runat="server" Text="Blue" BackColor="Blue" Font-Bold="true" onclick="btnBlue_Click"/>

<asp:Button ID="btnRed" runat="server" Text="Red" BackColor="Red" Font-Bold="true" onclick="btnRed_Click"/>

</td>

</tr>

<tr>

<td>

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</td>

</tr>

</table>

</form>

</body>

</html>

Now open MasterPage.master.cs file and write the following code in codebehind

protected void btnBlue_Click(object sender, EventArgs e)

{

Session["Theme"] = btnBlue.Text;

Server.Transfer(Request.FilePath);

}

protected void btnRed_Click(object sender, EventArgs e)

{

Session["Theme"] = btnRed.Text;

Server.Transfer(Request.FilePath);

}

Now open Default.aspx page and add masterpage file reference to page directive of your Default.aspx page like this

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" MasterPageFile="~/MasterPage.master" %>

After add MasterPage reference write the following code in Default.aspx page

<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<tr>

<h3>Registration Form</h3>

</td>

</tr>

<tr>

UserName:

</td>

<td>

<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Email:

</td>

<td>

<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Date of Birth:

</td>

<td>

<asp:TextBox ID="txtDOB" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

Education:

</td>

<td>

<asp:DropDownList ID="ddl_Education" runat="server" Width="162px" ></asp:DropDownList>

</td>

</tr>

<tr>

Address:

</td>

<td>

<asp:TextBox ID="txtAddress" runat="server" Columns="17" Rows="8" TextMode="MultiLine"></asp:TextBox>

</td>

</tr>

</table>

</asp:Content>

After that in Default.aspx.cs file and write the following code

public partial class _Default : ThemeClass

{

protected void Page_Load(object sender, EventArgs e)

{

if(!IsPostBack)

{

ArrayList arry = new ArrayList();

arry.Add("School");

arry.Add("Master");

arry.Add("Doctorate");

arry.Add("Graduate");

arry.Add("Professional");

ddl_Education.DataSource = arry;

ddl_Education.DataBind();

}

Note: Here we need to inherit Page_Init method from ThemeClass for that reason I added ThemeClass to our class

Now open Blue.skin file in App_Themes/Blue/Blue.skin path and write the following code

<asp:Label runat="server" Font-Bold="true" Font-Italic="true" />

<asp:Textbox runat="server" BackColor="Orange" BorderColor="DarkCyan" BorderStyle="Dotted" BorderWidth="2" />

<asp:DropDownList runat="server" BackColor="Orange" Font-Italic="true" />

Open StyleSheet.css file in App_Themes/Blue/StyleSheet.skin path and write the following code

body

{

font-size: 14pt;

color: #000000;

background-color : #44BCED;

}

.tablecss

{

border: solid 12px Blue;

background-color:#ffffff;

}

Now open Red.skin file in App_Themes/Red/Red.skin path and write the following code

<asp:Label runat="server" BackColor="BurlyWood" BorderColor="Aqua" BorderStyle="Inset" BorderWidth="2" />

<asp:Textbox runat="server" BackColor="Gray" BorderColor="RoyalBlue" BorderStyle="Outset" BorderWidth="1" />

<asp:DropDownList runat="server" BackColor="Gray" Font-Bold="true" Font-Italic="true" Font-Underline="true" ForeColor="Blue"/>

Open StyleSheet.css file in App_Themes/Red/StyleSheet.skin path and write the following code

body

{

font-size: 15pt;

color: #000000;

background-color: Red;

}

.tablecss

{

border: solid 12px black;

background-color:#ffffff;

}

Now everything ready press F5 and check your oputput

Demo

Download sample code attached

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

Subscribe by RSS

Subscribe by Email

11 comments :

Anonymous said...: Hi surese . This is really nice article with crystal smooth explanation. i just wanted to ask one question. how can we implement multiple themes on the fly without using too many skin folders under app_theme folder.

Thanks and Regards; December 16, 2011 at 5:51 AM
Unknown said...: hi... all of your articles are very nice...
Could you please post some article on httpmodule and handlers and also Linq; February 16, 2012 at 2:50 AM
Anonymous said...: hello sir
thank you for post this artical
this is easy to understand
again thank you; August 31, 2012 at 4:29 AM
Unknown said...: nice artical sir!; November 24, 2012 at 4:01 AM
Anonymous said...: Nice notes but one doubt why your using class we can write code in page preinit method right?; November 28, 2012 at 12:45 AM
Cool Goutam said...: Nice It's really Works
Thanks Buddy.; November 28, 2012 at 10:44 PM
Unknown said...: Hi,
the Article is exellent but how can do it without page refresh? is it possible?; March 8, 2013 at 1:27 AM
sagar said...: thanx for sharing this useful article wyth us..
but i want to know can we completly change the theme of a website or not?; April 9, 2013 at 2:06 AM
manish said...: hello bro...your post is very nice but its not working on my application i dont know why...its show the error executing the child request...; April 9, 2014 at 11:08 PM
Anonymous said...: THANKS...; October 3, 2016 at 2:50 AM
Unknown said...: hii, this is very helpful.
I have one question what if i just want theme change button in one page and by clicking one button every page theme should change.; March 10, 2018 at 8:53 PM