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?
source to share
WebForms has support for themes and skinning which does a lot of what you seem to want to do here, some helpful articles
What skinning basically allows you to do is define separate stylesheets and control skins. The folder structure you have will look like
App_Themes / skin1
App_Themes / Skin2
App_Themes / Skin3
...
Then you can use asp: Image controls that point to different image urls for each skin id (or you can do it with CSS).
source to share