Two CSS Files When Using ASP.NET Themes?

One of the projects that I’m working on is for a company targeting the Canadian marketplace.  These sites have to be written in both French and English for that country, which means there is a fair bit of internationalization written into our code.

Dealing with the information in the database and the strings on the page was easy enough.  But we also have to deal with images.  The way we deal with images is by detecting the language settings of the browser and setting the Theme property of the Page.

Like so:

protected override void OnPreInit(EventArgs e)
{
    base.OnPreInit(e);
    string currentCulture =
        Thread.CurrentThread.CurrentCulture.Name;
    if (currentCulture.StartsWith("fr"))
        Page.Theme = "Main.fr-CA";
    else
        Page.Theme = "Main";

}

This works great, but our designers like to be able to see what the page is going to kind of look like while they are doing the page layout.  In Visual Studio 2005 AND 2008 the only way you can do this is to set the StyleSheetTheme attribute in the page directive

<%@ Page Language="C#"
    MasterPageFile="~/MasterPage.master"
    AutoEventWireup="true"
    CodeFile="codebehind.aspx.cs"
    Inherits="details"
    Title="Our Title Here"
    StyleSheetTheme="Main" %>

But do you know what the difference between Theme and StyleSheetTheme are?

When you set the StyleSheetTheme, the CSS files in the theme directory get included in your HTML prior to the Title tag in the HEAD section of your HTML.  When you set the Theme, the CSS files in the theme directory get included right before the closing HEAD tag in your HTML.

This gives you the option of over-riding the CSS by emitting your own CSS into the head section for a particular ASPX file by using the StyleSheetTheme or disallowing it by using Theme.

But guess what happens if you use both?

Funny thing about computers.  They do exactly what they are told.  So if you set the Theme and the StyleSheetTheme, ASP.NET will include the CSS twice.  Once prior to the TITLE tag and once prior to the closing HEAD tag.

To make matters worse, you can’t just set the Page.StyleSheetTheme property to the empty string when you set Page.Theme to a theme.  You’ll get an error message if you do.  No, you have to override the StyleSheetTheme property in your Page’s class.

public override String StyleSheetTheme
{
    get { return null; }
}

Once you’ve done this, you’ll be back to only one set of CSS files being included in your page at runtime.

Related Post

  • ASP.NET Internationalization – ThemesASP.NET Internationalization – Themes A couple of weeks ago I started a series on ASP.NET Internationalization where we started by covering the basics, that is, using RESX files to supply language-specific strings in our code. Howe...
  • DotNetNuke Modules – Creating Base ModulesDotNetNuke Modules – Creating Base Modules Now that we have DotNetNuke installed into Visual Studio we can go ahead and create our first modules. Actually, creating the modules is pretty simple. But it is even easier to do it wrong, which...
  • ASP.NET Web Design SoftwareASP.NET Web Design Software What if there was a product that would allow you to create your web site themes as easy as you could create a PowerPoint presentation theme?  Wouldn’t that be cool? This past weekend I discovere...
  • if IE Conditional CSS using ASP.NET Themesif IE Conditional CSS using ASP.NET Themes Yesterday when I introduced Artisteer I mentioned that they use conditional link comments to include IE6 and IE7 specific CSS in the master page. In my world, I like to use ASP.NET themes for my ...
  • Finding a CSS Class DefinitionFinding a CSS Class Definition A couple of weeks ago I pointed out that you could easily find the definition of a property, method, variable, or class by right-clicking the item and selecting, "Go To Definition" from the contex...