Creating Web Application Using Themes in ASP.NET

A theme is a collection of settings that define the look of controls and web pages.


Introduction

Themes are also a new feature of ASP.NET that helps maintain a consistent look and feel across all or several pages of our web site. Themes are needed when we want to keep the style and layout information files separate from other web site files. A theme is a collection of settings that define the look of controls and web pages. These themes are applied across all the pages in a web application to maintain a consistent appearance. Themes are included images and skin files; the skin files set the visual properties of ASP.NET controls. Themes are of two types:

Page Theme

A Page theme contains the control skins, style sheets, graphic files, and other resources inside the subfolder of the App_Theme folder in the Solution Explorer window. A page theme is applied to a single page of the web site.

Global Theme

A Global theme is a theme that is applied to all the web sites on a web server and includes property settings, and graphics. This theme allows us to maintain all the websites on the same web server and define the same style for all the web pages of the web sites.

Let's create a theme application with the help of the following steps:

Step 1 : Open Microsoft Visual Studio 2010.

Step 2 : Select File->New->Web Site.

Step 3 : Select ASP.NET Web Site and then click Ok.

Step 4 : Now right-click in the application name in the Solution Explorer window and select Add
            ASP.NET Folder->Theme from the context menu.

3.jpg

A sub folder named Theme1 is automatically created inside the APP_Themes folder in the Solution Explorer.

11.jpg

Step 5 : Right-click on the Theme1 folder and select the Add New Item option.

Step 6 : Select the Skin file and click the Add button.

4.jpg

Now write the following code in the skin file.

5.jpg

Step 7 : Write the following code for Default.aspx page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
         Inherits
="_Default" Theme="Theme1"
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server">
    <title></title
>
</head>
<
body>
    <form id="form1" runat="server">
    <div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<br
/>
        
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        
<asp:Label ID="Label2" runat="server" Font-Bold="False"
                    Font-Names
="Comic Sans MS" Font-Underline="True"
                    Text
="THEME EXAMPLE"></asp:Label>
        <
br />
        <
br
/>
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<asp:Label ID="Label1" runat="server" Text="enter the data in the text box">
        </
asp:Label
>
       
&nbsp;&nbsp;<br />
        <
br
/>
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<asp:TextBox ID="TextBox1" runat="server" Height="42px" Width="237px"></asp:TextBox>
        <
br />
        <
br />    
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<asp:Button ID="Button1" runat="server" Text="Click Button"
                    BorderColor
="#996633" BorderStyle="Solid" BorderWidth="5px" Height="60px" />
        <
br />
        <
br />
        <
br
/>
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<asp:Label ID="Label3" runat="server" Text="Select the Theme"></asp:Label>
        <
br />
        <
br
/>
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
       
<br />
       
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      
 <br />
        <
br />
        <
br />
    </
div>
   
</form
>
</body>
</
html>

The design window will look like:

1.jpg

Step 8 : Now Press F5 key to run the application.

Output :

2.jpg

Now we will create an application for applying the theme at run time.

Step 9 : To do this add another skin file to the application and write the following code for both skin files.

Code for simple theme is as follows:

8.jpg

Code for coloured theme is as follows:

9.jpg

Step 10 : Add the following code to the Default.aspx file:

The design window looks like:

10.jpg

Step 11 : Now write the following code for the default.aspx.cs file:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page

    void Page_PreInit(object sender, EventArgs e)
    {
       // Get the theme name from a QueryString variable
        string ThemeName;
        ThemeName = Request.QueryString["Theme"];
        if (ThemeName != null)
        {
            Page.Theme = ThemeName;
        }
    }
}

Step 12 : Press F5 keys to run the application:

Output :

After selecting the Simple theme the output is as follows:

7.jpg
After selecting the Coloured theme the output as follows:

12.jpg

Here are some other useful resources which may help you

How to create Themes in ASP.NET 2.0?
Quick Themes in ASP.NET
Themes in ASP.NET
Custom Theme Creation and applying in SharePoint (MOSS 2007)
Create a custom theme using PowerPoint in SharePoint 2010