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

Comments are closed.