Themes in ASP.NET 2.0

Web development is not just designing and building the logic behind. Its much more that that as you have to take care of aesthetic sense by giving the similar overall look of the site and also the flexibility to change it as and when needed.

To fulfill this requirement ASP.NET 2.0 gives a new feature called themes, which let you define the formatting details for various controls and seamlessly reuse these formats in multiple pages. Themes are used to define the look and feel of a web site, similarly to how pages are styled using CSS. However, unlike CSS, themes can specify how server-side elements, like a TreeView control, for example, will appear when they are rendered on the browser. Themes make it much easier to standardize your website's look and feel and tweak it later. Once a theme is in place, you can give your entire website a face-lift just by changing the theme definition. Let's now take a look at how themes help with the UI development of a web application.

The Ancient Way: Standardizing Website Formatting

When web apps first made their way into the internet in the 90s, programmers had to do hard work to keep the visual elements consistent. Standardization was done ruthlessly. You just didn't have the facility to change the font or a border of any control by a simple click; you had to take care of each and every control separately! As can be expected, this was quite a tiring task.

The Old Way: Cascading Style Sheets

Then entered the CSS which made this task a little simple as it greatly helped in standardizing the layout. The added feature that it had was that the formatting and logic of the website was separated. Now the designer and the developer could be two different people working totally independent and they don't have to worry about each other work!

The New Way: ASP.NET Themes

Though CSS removed many problems however few still remained, as it only catered to fixed set of style attributes for certain controls. With the advent of new controls and features everyday and also the increasing demand of good graphical interface with flexibility, the need for something more was always felt. Themes, a new feature in ASP.NET 2.0, fill this gap. They give you what CSS gives, and also much more. One of the added advantages of Themes is that it is implemented on the server instead of the browser. Instead, they're a native ASP.NET solution that's implemented on the server. This makes them a very powerful tool on the disposal of the programmer.

Themes vs. CSS

CSS are simply not just eliminated from the scene, in fact they still have their own use but few of the key difference between them are highlighted below:

Themes are control-based, not HTML-based:

One of the biggest advantages of Themes is that unlike CSS (only HTML controls) it allows you to define and reuse almost any control property.

Themes are applied on the server:

As it has been already mentioned that Themes are applied on the server side giving you the luxury to change it as you wish, at run time.

Themes can be applied through configuration files:

In case if you want to have the luxury to apply a single theme on the whole website you can do that too. You just have to apply it through configuration files for this purpose.

Themes don't cascade in the same way as CSS:

Themes also overwrite the properties of the individual control by its own. CSS, however prioritizes a property to the nearest element present.

Theme Folders and Skins

To use themes in your website you need to make an ASP.NET Folder of 'App_Theme' in your main folder. Within this folder you can have as many different themes as you want and each theme can have its own skin file (one skin file is needed for each theme) as well as the images folder. As in the given project there are two themes i.e. Blue and Green. Each having its own .css and .skin file. Below mentioned are two examples of styles of control, from the project :

<asp:Textbox runat="server" BackColor="DarkViolet" BorderColor="AliceBlue" BorderStyle="Dotted" BorderWidth="1" SkinID="2" />

Make sure the runat="server" portion is always mentioned in the ASP.NET control. Rest it totoally depends on you what you want. The best way to make a style for any control is to put it in a normal page, set its properties and then just copy paste it to the skin file by removing the id of the control.

Adding a Simple Theme

To create a new theme for your project you can right click the website folder and in the option "Add Asp.Net Folder" click on Themes or go to "Website" on the toolbar and do the same process. Though the themes can added at runtime as well but in case if you want to set it on the design time you will have set the Theme attribute of the Page directive like below:

<%@ Page Language="C#" ... Theme="Blue" %>

Applying Themes through a Configuration File

If you want to bind your theme to the whole website instead of a single page you can do it in the web.config file as shown here:

<configuration>
  <system.web>
    <pages theme="Blue" />
  </system.web>
</configuration>

In normal case this setting will be applied to the whole website but if some individual page has its own theme then that would be used.

Applying Themes Dynamically

One of the most interesting features of Themes is its flexibility to be set up dynamically. You can provide the facility to user to change the themes (like if he wants a different color combination etc.) at runtime at his own free will. This technique has also been applied on the sample project as there are two themes 'Blue' and 'Green' which can be changed by a single click on the page. Remarkably easy, isn't it?! In the code (Page_PreInit) you just need to set the Page.Theme property to the theme you want. You have to do it in Page_PreInit as after this point, attempting to set the property causes a compilation error. Here's an example from the sample project that applies dynamic themes (blue or green) by reading the theme name from the current Session collection:

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

You can download sample Themes project, used in this tutorial.

Tutorial toolbar:  Tell A Friend  |  Add to favorites  |  Feedback  |   Google