Another ASP.NET Quicky: Ordering stylesheets in your theme

ASP.NET offers the possibility to use themes and I’m a big fan of that. It’s so much easier to switch the look of a website, just by changing the theme. Combine theming with masterpages and you will become a true ASP.NET themed-websites-master (Is that even a job title?). There are however some caveats with this as I quickly discovered when I tried to build a theme.

The way CSS files are processed from a theme

A theme usually contains images, stylesheets and skins. These things combined will give you the look of the website. Okay, so you would think there’s more to it, but really there isn’t. There aren’t any rules being applied to the order in which the files in the theme are processed. Microsoft instead opted for the shotgun approach to processing the theme files. CSS files are loaded in a seemingly random order. And so are the skin files.

This can give you major issues when your stylesheets need to be loaded in order. If you’re using stuff like reset.css and grid.css (from http://960.gs) you are most likely getting into a whole lot of trouble when the correct loader order isn’t maintained.

Creating order

The good news here is that it isn’t really random, but more numerical/alphabetical order. So you can order your CSS files, simply by prefixing them with a set of numbers. For example, you have reset.css, grid.css, elements.css and text.css in your theme and you want them in that order. You can achieve this by numbering the files like so:

• 00-reset.css
• 01-grid.css
• 02-elements.css
• 03-text.css

This ensures that the CSS files are loaded in that particular order.

Conclusion

There’s a long explaination of the specifics surrounding ASP.NET themes and there’s the short one. I opted for the really short one, leaving out some vital information on how you actually use themes. If you are interested in how theming works, I suggest you check out one of the following websites to get more information:’

• ASP.NET themes and skins – http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx
• Themes in ASP.NET 2.0 – http://odetocode.com/Articles/423.aspx

Share this