Click here to Skip to main content
Licence CPOL
First Posted 1 May 2009
Views 6,719
Bookmarked 3 times

Dynamically Setting the Theme

By | 1 May 2009 | Technical Blog
Themes can be used to customize the look of your Website. If you need to select the theme based on user settings, you’ll be glad to know that ASP.NET allows you to set the theme of a page dynamically when the page is being created. This process is pretty straight forward; however, there are a couple
A Technical Blog article. View original blog here.[^]

Themes can be used to customize the look of your Website. If you need to select the theme based on user settings, you’ll be glad to know that ASP.NET allows you to set the theme of a page dynamically when the page is being created. This process is pretty straight forward; however, there are a couple of issues that may arise.

First of all, ASP.NET establishes the current theme prior to the page’s Load() event. In order to dynamically change the theme before the Load() event, you'll need to set it during the page’s PreInit() event.

protected void Page_PreInit(object sender, EventArgs e)
{
    Theme = "MyTheme";
}

Setting the Theme in the PreInit() Event

That was easy enough. But what happens if your site uses a master page? Master pages allow you to control the appearance of all the pages on your site from a single master page. So it makes sense to want to set the theme from the master page. However, master pages do not provide a PreInit() event. So setting the theme dynamically from a master page is not as easy as you might guess.

One way to deal with this is to create a class that derives from IHttpModule. This class can be made to respond to all page requests on your site, and it gets called just before the request is handled, in plenty of time to set the theme for the current page.

public class ThemeManager : IHttpModule
{
    public ThemeManager()
    {
    }

    public void Init(HttpApplication app)
    {
        // Set our handler to be called just before handling a request
        app.PreRequestHandlerExecute +=
            new EventHandler(Context_PreRequestHandlerExecute);
    }

    void Context_PreRequestHandlerExecute(object sender, EventArgs e)
    {
        // Note: If handler does not implement IRequiresSessionState or
        // IReadOnlySessionState then Session state will be unavailable
        if (HttpContext.Current.CurrentHandler is Page)
        {
            // Set theme
            Page page = (Page)HttpContext.Current.CurrentHandler;
            page.Theme = "MyTheme";
        }

        public void Dispose()
        {
        }
    }
}

Setting the Theme from an IHttpModule-Derived Class

In order to use this class, you’ll have to modify your web.config file.

<configuration>
 <system.web>
 <httpModules>
 <add name="ThemeManager" type="MyNamespace.ThemeManager" />
 </httpModules>
 </system.web>
</configuration>

Web.config Changes

Also, be sure to clear any theme settings from your web.config file. Otherwise, it’s possible for ASP.NET to get confused and possibly reference multiple CSS files.

This is the solution I used for a Website I was developing and it works just fine. However, it does require a bit of work. I then started thinking of a much simpler approach that would meet my particular requirements.

ASP.NET themes are quite powerful, and can be used to manage the appearance of various controls and images. Another thing themes do is let you specify CSS, or style sheets. But, for my particular needs, I wasn't using skins. The only thing I used themes for was for style sheets. If this is all your themes are used for, then a much simpler approach can be taken.

All you need to do is add a Literal control inside of the <head> section of your master page. Then, you can set it to include your style sheet during the master page's Load event.

Since you aren't modifying the look of controls using skins, there is no need to change this setting in the PreInit() handler. In fact, you could handle it even later than the Load event since all that needs to happen is your page references the correct CSS file. The final text needs to look something like this (don’t forget to escape the double quotes so they come out right from your scripting language):

<link href="Style.css" type="text/css" rel="stylesheet" />

Stylesheet (CSS) Reference

The user's browser will do the rest once the page has been created and sent to the user.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Jonathan Wood

Founder
Black Belt Coder
United States United States

Member

Follow on Twitter Follow on Twitter
Jonathan Wood has been a software developer since 1987. His current focus is on using C++/MFC to develop desktop applications, and C#/ASP.NET to develop websites.
 
His main company, SoftCircuits, is known for producing various commercial and shareware products. Having an entrepreneurial spirit, he also has a number of other online businesses that he built from scratch such as softcircuits.net, rodentsoftware.com, fileparade.com, and others.
 
Jonathan is always willing to discuss consulting work or joint ventures with people looking to develop software or online businesses.

Sign Up to vote   Poor Excellent
Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

 
You must Sign In to use this message board. (secure sign-in)
 
Search this forum  
 FAQ
    Noise  Layout  Per page   
  Refresh
Generalin case of multiple themes and/or CSS files? PinmemberAmaanHaroon22:14 1 Jun '11  

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Mobile
Web01 | 2.5.120517.1 | Last Updated 1 May 2009
Article Copyright 2009 by Jonathan Wood
Everything else Copyright © CodeProject, 1999-2012
Terms of Use
Layout: fixed | fluid