ASP.Net - Skinned Sites - Best Way?

Soldato
Joined
5 Mar 2003
Posts
10,769
Location
Nottingham
Hello!
I have a site I'm creating that is basically functionally identical but for 3 different clients. For maintainability I want to create one site and basically skin it. From the url I'll be able to work out which client so thats no problem... what I'm wondering is whats the best way to skin the site?

All colours / icons / images etc will be different, so I was thinking to basically do everything in css. With things like logos etc, do you just have a div with a different back ground image, or is there a 'standard' way to do things like this?

Cheers.
 
Please don't use ASP.NET Themes, they're horrible.

The best way to skin the site is to have 3 stylesheets for the site and then link to the right one (adding the reference in your master page's code behind based on the host/appSetting/whatever). You'd probably have a general style sheet with generic stuff, then a custom one per site.

A folder structure something like this...

/CSS/general.css
/CSS/Images/
/CSS/Site1/style.css
/CSS/Site1/Images/
/CSS/Site2/style.css
/CSS/Site2/Images/
/CSS/Site3/style.css
/CSS/Site3/Images/
 
What we do at work (for country specific sites) is have several sub-directories for CSS/Images/Javascript with different suffixes. e.g. "img.en-GB" & "img.fr-FR" then use a simple virtual directory to map to the correct one during deployment. E.g. "/img" is mapped to "/img.en-GB".

Very little performance overhead, and we have keep everything under source control easily.

akakjs
 
Don't think I worded my original post. Basically, assume I need a logo to go at the top of the page... now obviously each site has its own logo... possibly different size / slightly different position.

I could either:
1) store the image path in the database and have an image control and populate that with the path.
2) have a div with an id and in each of the css files I have a different background image (the logo).
3) some other standard practice I don't know...

I've gone with '2' at present but not sure if having loads of empty divs that are sized / positioned / background-imaged is the correct way to do it?

Thanks :)
 
If you need to vary the position/sizes of the images, your approach with multiple CSS files is the way to go. We have multiple image versions each the same size and positions. So using the virtual directory approach means we only have to maintain the images, rather than the CSS & images.

It's all down to how customisation you'd like to offer your clients. One thing that's worth doing however is splitting your CSS into client specific and "shared" files.

akakjs
 
Back
Top Bottom