ASP .Net Theme Simplicity

ASP .Net themes are simple to implement. Themes permit the developer to dynamically show different images and use different stylesheets based on a user preference. Using Visual Studio 2008, it doesn't take long to get a web site project running and using themes.

themedemo

Exercise Steps

To work this exercise, do the following:

  1. Create a new web site project in Visual Studio 2008.
  2. Right-click on the project name within the Solution Explorer and select 'Add ASP .Net Folder'.
  3. A new sub-menu appears. Select 'Theme'.
  4. The IDE creates a label for the new theme. Type the name of the new theme. In my case, I created 'Underground1'.
  5. Drag and drop or paste files into the newly created theme folder.
  6. Right-click the 'App_Themes' folder and select 'Add ASP .Net Folder'.
  7. A new sub-menu appears. Select 'Theme'.
  8. The IDE creates a label for the new theme. Type the name of the new theme. In my case, I created 'Underground2'.
  9. Copy the files in the first theme directory into the second theme directory.
  10. Modify the stylesheet and images to your taste from the second theme directory.

Click the image on the left to get a better view of the file structure for this project.

Dynamic Theme Implementation

If the theme is to be changed on the fly, Microsoft suggests that the theme for the Page object be changed in the Page_PreInit function (see link). The view state from all controls (the Page object is a control) is used whenever there is a postback. This seems to be the more difficult part of changing themes within an ASP .Net application. So, if server controls are being used, a redirect may be needed after the postback in order for the user to be able to see the theme change. It is much simpler to provide a hyperlink or some other HTML control that links to a query string which can be read.

A special thanks belongs to styleshout.com for providing the free web template plugged into the example code.

The Final Result

Here is a screenshot of the 'Underground1' theme (click to enlarge).

Underground1 Screenshot

Here is a screenshot of the 'Underground2' theme (click to enlarge).

Underground2 Screenshot

The source files can be found here (ThemeDemo.zip (22.91 kb)).