I’ve been meaning to write this post for awhile, now.  When I developed this site, I wanted to have multiple sites built into one domain.

All of the sites would be managed through the same CMS installation (in this case Wordpress), but each would have a bit of a different theme.  The different style info would give each sub-site its own life.  Click around the links up top (Life of Brian, Nerds at Work, Nerds at Play, etc) and you’ll see what I mean.

With some CSS trickery, this is amazingly simple.  I got the idea from the original theme, which switched to alternate style sheets when the user clicked a button.

How to Add Multiple Themes in CSS

The basic concept?  Add a class to the body element.

Using some simple PHP logic (or using alternate HTML templates), you can alter the body element’s class.

In your CSS template, you can apply the individual style information for the sub-site.  For example, in Life of Brian’s CSS file, I define a header image, colors for links, and a background color.  With a handful of lines of CSS and one additional class, the style of the site is quickly switched over.

For example, here’s the additional style info for Nerds at Work (the current sub-site):

body.work {background: #462300;}
.work #logo h1 a { display: block; position: absolute; top: 0; left: 0; background: url(images/logo_work.png) top left no-repeat; height: 160px; width: 500px; }
.work #logo h1 { text-indent: -999em; }
.work #header {background:url(images/header_autumn.png) no-repeat left;}
.work #sidebar1 h2, .work #sidebar2 h2{color: #996600;}
.work  a:link, .work a:visited { color: #D58700; }
.work #footer {color:#000000;background:url(images/header_autumn.png) no-repeat left;}
.work #footer a:link, .work #footer  a:visited {color: #993300;}

That bit of CSS easily switches the site from the standard green template to a specialized orange template with a header image.

It’s not a complete site makeover for each sub-site. But it’s a nice quick fix for giving each section it’s own bit of personality.

You could just as easily add some style info to change the font, heading size, etc, to customize it a bit more. You could even radically alter the look of the page by re-writing a whole stylesheet for each class.

Assuming the structure of the page remained the same (header, content, sidebar) and the CSS did the layout work, you could create multiple formats with a single template file.

That’s just a bit of a teaser.  I hope to come back to the idea later in the week, with some more in depth examples and possibilities.