How to Change Asp.net Applications Theme programmatically

I’m interested to Localization and globalization and one of the important issues in localization is designing scalable UIs. in this Article I’ll show you a simple way to create a scalable Asp.net UI.

—————————————————————-

GNU Logo

‪Title : ‪How to Change Asp.net Applications Theme programmatically

‪Publish Date : 30/12/2009

‪Version : 1.0

‪Author : Nasser Hajloo

‪Author Mail : n.hajloo@gmail.com

‪Copyright (c) 2009 Nasser Hajloo.

‪Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.2 or any later version published by the Free Software Foundation;

‪with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled “GNU Free Documentation License”.

—————————————————————-

in ASP.net2.0 microsoft present SKIN and Themes for Asp.net, in a short introduction, skin is a CssClass replacement and with skin you can specify some attribute that one of them are CssClass, and these other attribute goes in a *.skin file in App_Theme folder.

this will shorten back-end asp codes and makes it more readable and reliable and vice versa. in the other hand, Theme is a multi UI approach for asp.net application, with Theme you can create some different UI for you asp.net Application (Control) and the designer or back-end users select his/her desier UI from provided theme. in a theme you can create multi css classes or some skin files and in each skin file you can create many skins for a single control.

so with this short introduction, you (a a designer) can create different theme for a single application. and also can create some RTL and some LTR UI for your application (I always recommand to change HTML Directionality inside your css classes in html class like ).

html
{
directionality: ltr; /* or rtl - base on page direction */
}

usually creating an impressive UI is not a simple job and Ido not want to speak about that. Ithink you have created some Theme and now you want to let users select their theme by ownselves.

by default each theme should represent to each page to apply, this is possible inside <%@ Page %> decleration. you can represent your custom theme with Theme=”” attribute of page decleration. this apply your theme only for this page. and this let you apply different themes for different pages.

note that you can not use this approach in Master Pages.

you can change the theme for a single page programmatically, just note that theme (and skins) apply on page PreInit event. this will be a nightmare if you have more than 20 pages (just think about 300 Pages). so it is recommanded to use a Base class that it derived from System.Web.UI.Page and other pages derive from this class, so your base class should look like this

namespace Hajloo.Web.UI
{
public class PageBase : System.Web.UI.Page
{
void Page_PreInit(object sender, System.EventArgs e)
{
if (Session["Theme"] != null && Session["Theme"].ToString().Length > 0)
this.Page.Theme = Session["Theme"].ToString(); // user selected theme
else
this.Page.Theme = "Hajloo_RTL";  // default theme
}
}
}

the above code will apply a theme to the inherited pages, so now you should inherit your pages from this class. and all of your pages should look like this

namespace Hajloo.Portal.Pages
{
public partial class Default : Hajloo.Web.UI.PageBase
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}

ok this will let you to provide a section for you user to select your provided theme from a list or by clicking on an image (below you can see some diffent method witchall of them change the current theme), and only in one page you need to put this code (usually in master pages or user profile)

protected void drpThemes_SelectedIndexChanged(object sender, EventArgs e)
{
if (this.drpThemes.SelectedIndex > 0)
{
Session["Theme"] = this.drpThemes.SelectedItem.Value;  // dropdownlist Items Value should fill with theme names
Response.Redirect(Request.Url.AbsoluteUri);
}
}
protected void imbPersian_Click(object sender, ImageClickEventArgs e)
{
Session["Theme"] = "Hajloo_RTL";   // theme name
Response.Redirect(Request.Url.AbsoluteUri);
}
protected void imbEnglish_Click(object sender, ImageClickEventArgs e)
{
Session["Theme"] = "Hajloo_LTR";   // theme name
Response.Redirect(Request.Url.AbsoluteUri);
}

now you can check it out and enjoy from your multi UI application.