Creating ASP.NET web application with multiple skins?

Question

I'm currently in the process of developing an ASP.NET WebForms application that will have multiple skins. The way I'm thinking of approaching this is to have each skin in a completely separate folder, which will contain all images and CSS, and the CSS will reference images accordingly.

The folder structure would be something like this:

• /Default.aspx
• /Skins/Master.css
• /Skins1/Skin1/Skin1.css
• /Skins1/Skin1/Images/ ...
• /Skins1/Skin1/Skin2.css
• /Skins1/Skin2/Images/ ...
• /Skins1/Skin1/Skin3.css
• /Skins1/Skin3/Images/ ...

So, for example, we might have:

<div id="foo-logo"></div>
<a href="/bar/"><div id="bar-logo"></div></a>

And then in the CSS:

#top-logo { height: 100px; width:200px; background:url(images/foo-logo.jpg); }
#bar-logo { height: 50px;  width:100px; background:url(images/bar-logo.jpg); }

My logic behind this is to avoid having references to the skin folder in-line with the code, like this:

<img src="/skins/<%=Settings.CurrentSkin%>/images/foo-logo.jpg" />
<a href="/bar/"><img src="/skins/<%=Settings.CurrentSkin%>/images/bar-logo.jpg" /></a>

This way, the HTML will remain clean and be completely independent, and it will be possible to completely change the skin simply by referencing a different CSS file and remove the need to update image tags.

The main downsides of this that I can think of are:

• Image dimensions on the containing element will need to be specifically specified in CSS as they will be implemented as CSS background-images
• Web application may not degrade as well if important brand elements such as the logo are only visible with CSS

Is there anything else I should be aware of when using this method and/or is there a better way of achieving this?

Answer 1

WebForms has support for Themes and Skinning which does a lot of what you seem to want to do here, some helpful articles are

Ode to Code, MSDN

What skinning basically allows you to do is define seperate stylesheets and control skins. The folder structure you have would be look like

App_Themes/Skin1

App_Themes/Skin2

App_Themes/Skin3

...

You can then use asp:Image controls that point to distinct image urls for each skin ID (or you can do it via CSS).