Using themes in ASP.NET MVC

I have finally rolled up my sleeves and created my first ASP.NET MVC (from now on, I will refer to this as MVC, since it is in .NET context) 1.0.

After looking around a bit in the slick template you first get, I notice that .css files are manually included in the master page. I, however, prefer to use themes, so I decided to adjust the application a bit.

To create a theme, simply do the following:

  • Right-click on your web project and choose Add/Add ASP.NET Folder/Theme, which will add the theme master folder App_Themes
  • Create a theme-specific folder within App_Themes, for instance Default
  • Add .skin or .css files to the folder – they will be included automatically
  • The theme can be applied in two ways:
    • Default theme (used by all project pages) – add Theme=”Default” to the pages tag in web.config
    • Page-specific theme (applied to a page) – add Theme=”Default” to the Page tag in each .aspx file
  • The theme will now be applied, which means that all its skin and style files will be loaded automatically

I prefer to use default themes and apply themes only to the pages that are to use another one. This makes it easier to switch the design of an entire application by changing one config parameter.

So, I created a Default theme and moved the Content/Site.css to the Default theme folder, modified web.config to use the theme and removed the manually applied .css file from the master page. However, when I tried to run the page, it crashed with this info:

Using themed css files requires a header control on the page. (e.g. <head runat=”server” />).

Turns out that the Default.aspx file in the project root is completely blank and only used to redirect the user.

To make the application able to use a default theme, simply add this dummy code to the page:

 <head runat="server"></head>

This will neverbe displayed and does not disturb the app in any way, but lets you use default themes, which at least I think is nice 🙂