Creating Fully Themable Websites with ASP.Net
ASP.Net and the .Net Framework provide a powerful engine that allows themes and skins to change the appearance of asp controls, but what do you do if you want to completely change the appearance of a website, including its layout? This great tip will allow your website to be completely themable 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.
To start off with, create a blank ASP.Net website and 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 sub folder 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 you 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 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. 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:
- /// <summary>
- /// Summary description for BasePage
- /// </summary>
- publicclass BasePage :System.Web.UI.Page
- public BasePage()
- // TODO: Add constructor logic here
BasePage.cs: BasePage class inherits from System.Web.UI.Page
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.
- protectedoverridevoid OnPreInit(EventArgs e)
- string theme ="default";
- MasterPageFile ="~/themes/"+ theme +"/site.master";
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 into 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).
- publicpartialclass _Default : BasePage
- protectedvoid 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 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, add CSS style sheet files, images and even user controls within the theme. Everything that is 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
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.
More Tutorials in Active Server Pages (ASP.Net)
- What is ASP.Net?
- ASP.Net for PHP Developers
- Creating a Simple ASP.Net Page
- ASP.Net Website Navigation Using a SiteMap
- Using ASP.Net Master Pages and Content Pages
- Validating Input using ASP.Net
- Tracing and Remote Debug in ASP.Net
- Creating Custom Error Pages with ASP.Net
- Managing Session State in ASP.Net
- Using Themes and Skins in ASP.Net
- Creating User Controls in ASP.Net
- Difference between ASP.Net User and Custom Server Controls
- Fully Themable Websites with ASP.Net ⇦ You Are here
- Ultimate Guide to the Web.Config File
- Adding StyleSheets to ASP.Net via C#
- Extending the Web Sitemap Xml Document