Creating Fully Themable Websites with ASP.Net

This tutorial will show you how to make themable websites and dynamic content using a few properties and parameters and class inheritance.

ASP.Net and the .Net Framework provide a powerful engine that allows asp.net themes and skins to change the appearance of asp controls, but what do you do if you want to completely change the appearance of the website, including its layout? This great tip will allow your website to be completely themeable and dynamic.

In a previous tutorial we looked at ASP.Net Skins and Themes, but these can only change the appearance of an ASP.Net control. You cannot change the layout of a website or page, nor can you have multiple content layouts or even add or remove controls on a per-theme basis. This tutorial will show you how to create a fully customisable theme file using master pages, inheritance and very little code.

Creating a Themable Websites Project

To start with, create a blank ASP.Net website which we are going to use as a sample Themable Websites project. Create a folder called "themes" (without quotes) and another folder called default within themes. Note: This is not an ASP.Net folder 'App_Themes' it's just a simple folder called themes. You can call it whatever you like.

Next, we need to create a master page file inside our default theme folder. Visual Studio will not allow you to create a master page inside a subfolder so we have to create it in the root and move it in after. This applies to the master page, style sheet and any other file specific to the theme. When you create the master page call it 'site.master' then move it to the default theme folder.

Now we need to delete the Default.aspx page and create a new one that uses a master page, so add a new item to the project (File->Add New Item or right-click on the project and add new item) and select a new web form. Make sure that the "Select master page" checkbox is ticked before clicking OK. A new window will ask you to select the master page, so browse to your themes/default/site.master.

Now we need to sort out a base page class that all pages we create can use so that they all inherit the theme functionality we are about to include. Right-click on the project in Solution Explorer and add a new item. Select Class and name it BasePage.cs. Visual Studio will display a message stating:

"You are attempting to add a class to an ASP.NET application. For a class to be generally consumable in your site, it should be placed inside the 'App_Code' folder. Would you like to place the class in the 'App_Code' folder?"

Click on "Yes" and Visual Studio will create the folders and a new class file.

Extending the System.Web.UI.Page

Our class is going to inherit from a standard ASP.Net page and provide extra functionality in the form of themes. At this stage, all we are going to do is tell our BasePage class to inherit from the standard System.Web.UI.Page class:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

// <summary>
// Summary description for BasePage
// </summary>
public class BasePage : System.Web.UI.Page 
{
  public BasePage()
  {
    /
    / TODO: Add constructor logic here
    /
  }
}

BasePage.cs: BasePage class inherits from System.Web.UI.Page

Loading the Theme

In the OnPreInit event for the class, we are going to set the location of the master page to use ('themes/default' will be the default) using the MasterPageFile property.

protected override void  OnPreInit(EventArgs e)
{
  string theme = "default";
  MasterPageFile = "~/themes/" + theme + "/site.master";
  base.OnPreInit(e);
}

This code has to go into the OnPreInit event because anywhere else is too late to set the MasterPage because it has already been loaded.

I have hard-coded default in this example, but you can load the theme from the web.config, user profile, query string or any other method - I'll leave that for you.

Go back to the default.aspx page and view the code in default.aspx.cs. Each ASP.Net page has its own class which inherits from the System.Web.UI.Page class, we need to change this so that Default.aspx inherits from our BasePage class (which in turn inherits from System.Web.UI.Page).

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : BasePage 
{
  protected void Page_Load(object sender, EventArgs e)
  {

  }
}

Default.aspx.cs: _Default page class inherits from BasePage rather than System.Web.UI.Page

So now we have a BasePage class which is our Default.aspx page inherits from. Within the BasePage class, we can programmatically set the master page to use by setting a MasterPageFile property on the Page_Load event.

You can modify the master page to create your default theme, and add CSS style sheet files, images and even user controls within the theme. Everything unique to the theme should be in the themes folder.

When you want to create a new theme, simply duplicate the folder and start changing it how you want it, the only code changes to make are those that are unique to the theme, and you will need a method to change themes or allow your users to change themes.

When you add more pages to your website, to have them use this new skinning platform simply change the class they inherit from System.Web.UI.Page to our new BasePage class.

Download Sample Themable Websites Project

You can download the source code for this tutorial below; I have created two themes with the ability to switch themes using two links. You can see that although the content is the same, using different master pages allows the site to look completely different between themes. One theme has a left sidebar, content and right sidebar, whereas the second has two right-hand sidebars with different content.

Themable Websites with ASP.Net Sample Project