I created a themes folder under the content folder
Then I referenced my css file in the master page using a helper method
<%= ThemeHelper.GetCss() %>
I also use a helper method for images
<img src=’<%=ThemeHelper.GetImageUrl("reply.png")%>’ alt="reply" class="icon" />
But most of my images are set in the stylesheet, which makes it easier to manipulate different skins
The helper methods above look at the defined theme in the config file (or database or wherever you store your settings) and then return the path to the correct resource.
Take a look at these live samples:
They are all using the same codebase but have a different theme defined. The trick is in making your HTML css-friendly by naming elements and assigning them classes as well as using Divs and avoiding tables. This allows you to create a stylesheet that radically changes the look of the site. Think of the element ids and classes as an API to your view, that the css can manipulate.
I also added a feature that lets you upload a folder theme as a zip file and have the application unzip it into the themes folder.
It would be cool if we can define a "virtual folder" in our application, so I wouldn’t have to use helper methods. Imagine if you could just say /content/theme/logo.gif and it would just work. The theme folder doesn’t really exist but instead it would route to the correct folder based on a setting. I wonder if I can do that with current routing mechanism in asp.net mvc!!! Anyone?