A Beginner's Guide for Understanding and Implementing ASP.NET Themes

• Download demo - 11.3 KB

Introduction

This article talks about ASP.NET themes. When do we need to have themes in our application. How can we implement themes and let the user change themes.

Background

Web applications mainly has two major aspects. One is functionality and other is usability. Functionality is the core set of features that the web application provide to the user. Usability is how easy and convenient it is for the user to use the web site. 

There is one more aspect that most web developers tend to overlook. Developers mostly get so involved in implementing the functionality and usability of a web application that they forget about the appearance of the web site i.e. look and feel of the website. 

The web site appearance is also an important aspect. The appearance can then further have two aspects. One is that the user should be able to have a personalized web site. Secondly, if the website caters to multiple type of users then the appearance should change according to the user.

To achieve these two ASP.NET provides

• ASP.NET Themes: This let the developer to create separate predefined themes for the application. This can be used to show provide different appearance to different category of users and also to let the user choose a theme from the predefined themes.
• Personalization using User Profiles: Using this we can have users specify there own preferences for appearances. This is also used to remember the returning users.

In this article we will be discussing about the ASP.NET Themes. The personalization and user profiles needs a separate discussion altogether and perhaps I will write a separate article for that.

Using the code

Typically a web application contains various pages. each page can have a lot of server controls. The basic idea behind ASP.NET themes is that the web site is developed in such a way that making a change in one place will result an appearance change across all the pages and all the controls.

How do we specify the appearance of controls

There are two ways we can specify the appearance of our web pages and controls.

1. Using controls' markup - Here the asp.net server control contains the appearance specific attributes
2. Cascading style sheet(CSS) - Using CSS to control the appearance of rendered HTML page.

Along with these we will have graphics on our web pages. Typically these graphics will be in form of images that will be used in the web pages.

Now lets say we are using all these above mentioned ways to have the desired appearance on our web page. If we want the user to give a possibility to change the appearance, do we have to change all these things dynamically in the complete code-base. Or is there a better way?

ASP.NET Themes to the rescue

To facilitate the dynamic change of appearance ASP.NET make use of themes. The basic idea of themes is to externalize the appearance related logic from web pages. We put all the appearance related code for all the pages and controls in a single location and call this it a theme.

Now if we need multiple set of appearances, we can have multiple themes. All the themes will specify separate appearance for the controls and pages of our websites. to change the appearance of the website we just need to change the theme and the change will effect the entire website automatically.

We can create an APP_Themes folder in the web site to contain the the themes. Every theme folder could contain three type of things.

1. Skins - These will be used to configure the appearance that user specified in server controls
2. CSS files - These will be used to configure the appearance attributes that are expecting CSS style.
3. Images and other resources - Every theme could have separate set of resources so that the page graphics will change as the theme is changed.

Implementing Themes

Let us now try to implement themes in a small dummy application. We will create a single page website that will contain a company Logo, a website heading and some static text in the page.

We will create two themes for this website. One Light theme and another Dark theme. The image for the logo will be specified in a Skin file. The appearance of the heading will also come from the Skin file. The web page background and foreground text appearance will be specified in a CSS file.

SO with all the above requirements we will need 2 themes - "Light" and "Dark". These themes will contain Skin files to specify logo image and heading's appearance. Each theme will contain a CSS file containing the background color and foreground text colors. finally each theme will have the logo image specific to the theme.

Let us look at the skin file of each theme.

<%--Skin file of Dark Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px"/>
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="White"></asp:Label>

<%--Skin file of Light Theme--%>
<asp:Image runat="server" ImageUrl="dummy-logo.png" Height="100px" Width="100px" />
<asp:Label runat="server" Font-Bold="True" Font-Size="XX-Large" ForeColor="Black"></asp:Label>

Let us look at the CSS file inside each theme

/*CSS file of Dark Theme*/
table
{
	background-color:Black<span class="code-none">;
	color<span class="code-none">: White<span class="code-none">;
<span class="code-none">}
td
<span class="code-none">{
	border<span class="code-none">:Solid 1px White<span class="code-none">;
	border-collapse<span class="code-none">:collapse<span class="code-none">;	
<span class="code-none">}

<span class="code-comment">/*CSS file of Light Theme*/
table
{
	background-color<span class="code-none">:Silver<span class="code-none">;
	color<span class="code-none">: Black<span class="code-none">;
<span class="code-none">}
td
<span class="code-none">{
	border<span class="code-none">:Solid 1px Black<span class="code-none">;
	border-collapse<span class="code-none">:collapse<span class="code-none">;	
<span class="code-none">}
</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>

Applying Themes

Themes can be applied in a number of ways. Let us first look at the non Programmatic ways of applying themes. This way will be useful if we want to show any particular theme to a particular category of users. 

1. Specifying theme in @Page's Theme attribute - This will effect the current page only.
2. Applying themes in <pages Theme=""> inside web.config - This will apply to all pages in the website.
3. Specifying theme in @Page's StyleSheetTheme attribute - This will effect the current page only.
4. Applying themes in <pages StyleSheetTheme=""> inside web.config - This will apply to all pages in the website. 

If there are muliple places themes are specified, the first one will take precedence over the second one (considering the order mentioned above).

For now let us go ahead and specify the default theme in our web.config as

<pages theme="Light"></pages>

Now when we run the application we will see the default theme as "Light" theme.

Programmatically Changing Themes 

If we need the user to have an option for changing themes then we need to change the theme through code. To do that we have to provide some way for the user to change the theme. Then once we get the theme change request we need to change the Page.Theme property in the Pre_Init of the page.

Let us have a dropdowm for the user using which he can switch themes. the code behind for the page will look like

protected void Page_PreInit(object sender, EventArgs e)
{
    string theme = Session["theme"] as string;
    if (theme != null)
    {
        Page.Theme = theme;
    }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack == false)
    {
        DropDownList1.SelectedValue = Page.Theme;
    }
}

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    Session["theme"]= DropDownList1.SelectedValue;
}

Note: Here I have set the autopostback property of drop down to true and used Session variables to store the newly selected theme. there are other much more elegant ways of doing this. I have written this way just to keep it simple and illustrate that Pre_init method is the only place where themes can be changed. 

Let us now change the theme to Dark and see the result.

Points of Interest

Nowadays most websites use CSS to control the appearance of the websites. Still understanding and knowing themes has its benefits. I can have multiple CSS files and still use themes to control the appearance of the website. The other aspect of appearance is the personalization using User Profiles. Perhaps I will create a separate article for that. This article was written from the perspective of an absolute beginner. I hope this article has been informative.   

History

• 09 July 2012: First version.