Broken Styles and Loading Alternate Themes Dynamically

 I decided to play around with the option of loading alternate themes dynamically. I found a few gotchas I'd like to share.

 First off, I have my theme set in my web.config as normal.

<pages styleSheetTheme="Swish"

But in my page, I override my MasterPage and Theme with another during the Page_PreInit.

Me.MasterPageFile = "~/Module/Layout/MasterPageButterflies.Master"

Me.Theme = "Butterflies"

Unexpected results were occuring... certain colors were retained where they shouldn't have been, etc. So I looked at the view source of my web page and I noticed that the style sheets were being loaded twice -- once for my web.config theme following the <head> tag and once again for the stylesheets in my dynamically implemented theme following the <title> tag.

Even if your stylesheets don't walk all over one another, the more stylesheets you load, the longer it takes, plus I read that IE at one point had a max CSS stylesheet limitation of 30 -- whether it still does or not, I don't know. Mine are no where near that count, but I did notice that certain styles were not working. If I removed one of my stylesheets it worked. I thought it was the content of the removed stylesheet that was breaking it, but I could empty out the entire sheet and things would still be broken. So I theorized it must be the number of sheets. After I cleaned up unwanted styles and consolidated some of my sheets, things started working again. So be aware of how many stylesheets you are loading. I only have 7 stylesheets, but that 7th sheet seemed to break things. Go figure.

I also noticed that when I dynamically loaded the masterpage and added a style to a master page table:

<td class="tdStyle">

 -- it totally ignored the style, even though the dynamic master page was exactly the same as the default master page. However, creating a "td" style worked fine. Once I removed the call to the dynamically loaded masterpage and used the "tdStyle" it worked fine.

Anyway, I just wanted to share my experience in case you have problems with themes, broken styles, etc.

So in short, if you decide to use the Me.Theme or the Me.MasterPageFile to dynamically load either, BEWARE. 

May your Nightmares NOT be in ASP.NET!

Nannette Thacker


View Nannette Thacker's profile on LinkedIn

3 Comments

  • The problem is that you're setting the StyleSheetTheme in the config file, and the Theme in your code. If you mix the two, you'll get both sets of stylesheets.

    Either change the config file setting from "styleSheetTheme" to "theme", or change the code from "Theme" to "StyleSheetTheme".

    http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx#ThemeSettingsPrecedence

  • You've got to be kidding me—it's so trasnpraently clear now!

  • Wow, that's a really clever way of tnhiikng about it!

Comments have been disabled for this content.