Muffinresearch Labs by Stuart Colville

Classes on the body tag | Comments (6)

Posted in CSS on 16th June 2005, 12:26 am by Stuart

In Doug Bowman’s second @media presentation he mentioned utilising classes on the body element to be able to affect the layout of the entire page. This simple technique uses descendant selectors in such a way that an entire page layout can be altered by adding or changing a class applied to the body tag.

For example visualise the following (simplified) stylesheet


  #maincontent {
    float : left
  }

  #secondarycontent  {
    float  : right
  }

  .home #maincontent {
    float  : right
  }

  .home #secondarycontent  {
    float  : left
  }

Assuming maincontent and secondarycontent are two divs, by adding the class ‘home’ to the body tag (<body class=”home”>), the two columns could be reversed. When you think about it, this method can be used to radically change the entire site layout with only one change to the markup and without requiring extra stylesheets. It’s this exact method used to alter the look of each of the sections on Doug’s site http://www.stopdesign.com

Post Tools

Comments: Add yours

1. On June 16th, 2005 at 6:38 am Mike said:

That’s pretty interesting. I might have a play around with this idea at the weekend.

2. On June 16th, 2005 at 1:49 pm Tim said:

I would hasten to add, this method really comes into it’s own when you utilise semantic naming techniques (use #secondaryContent instead of #rightColumn)…

Swapping core elements around becomes really easy. For instance, if you want subnavigation on the right hand side on one page but on the left hand side in another.

Like I said: Ace!

3. On June 18th, 2005 at 10:34 am Tim said:

You really need to sort out your carriage return replacement in the comments, Stupot. It really gets on my wabs!

4. On June 20th, 2005 at 1:09 am Stuart said:

Yep I’d been meaning to get round to that.

Linebreaks are now automagic!

5. On July 6th, 2006 at 5:11 pm Dynamic Semantic Classes · plaintxt.org said:

[...] I won’t claim any of this is ingenious or even original (to me—thanks, Andy) as many, many others have posted on this very topic (see Classes on the body tag and/or Dynamic ID for the <body> for just a couple examples). [...]

6. On August 2nd, 2009 at 5:26 am wimal said:

I am amazed that I finally found what I wanted. Many Thanx to you. Everyone was saying it slows down to use two style sheets and didnt give a solution. with this technique I can use two different backgrounds in the body tag for home page and other pages. Thanx again.







XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>



Using Loggerhead with mod_wsgi|(0)

Here’s a post I wrote over on the Project Fondue Blog about our use of Loggerhead with mod_wsgi under Apache. Loggerhead is the rather nice branch viewer for bazaar branches as used on Launchpad.net.

If you’re not already subscribed to the Project Fondue blog feed then I can recommend it, as there should be some interesting posts coming out of there in the coming months (yes I’m unashamedly biased!).

Ubuntu: Turn off changing workspace with mouse wheel|(1)

I found the changing with the workspace with the mouse wheel really annoying. To disable it go to System => Preferences => CompizConfig (available if the compizconfig-settings-manager package is installed) and uncheck “Viewport Switcher” which is under the “Desktop” heading.

Photos on Flickr

© Copyright 2004-10 Stuart Colville, all rights reserved. May contain traces of Muffin. Powered by WordPress. Hosting by Slicehost.com This page was baked in 0.680s.