Building ASP.NET Web Application with Multiple Skins?

I am currently developing an ASP.NET WebForms application that will have multiple skins. The way I'm going to get closer to this is to have each skin in a completely separate folder that will contain all the images and CSS, and the CSS will link to the images accordingly.

The folder structure will 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 could:

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

      

        
        
        
      

    

And then in 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 is to avoid skin folder references as per the code like:

<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 stays clean and completely independent, and you can completely change the skin simply by referencing a different CSS file and removing the need to update image tags.

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

• The dimensions of the image in the containing element must be specifically specified in CSS as they will be implemented as CSS background images
• The web application also cannot degrade 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 to achieve this?