The Body Class Switcheroo
Lachlan Hardy
Visual Net Applications
Introduction
- The 'Body Class Switcheroo' is a silly name for a clever trick
- Numerous sites use it, one of the most notable being Doug Bowman's Stopdesign1
- It involves structuring your CSS so that simply changing the class of your <body> element can alter any element on the page
Using the Cascade
- Using a specific class on the <body> of each type of page allows you to create specific styles for that page
- It allows the cascade to override the styles for particular elements
- An common use is to have a different layout on the home page, ie 3 columns on the home page, with 2 columns elsewhere
Layout as Example
- Changing the layout is the easiest way to illustrate the power of this technique, check out the example1 page
- Adding a class of 'swap' will move the sidebar to the left
- Adding 'threecol' will spread the sidebar into three columns
- Adding 'subswap' will swap the two smaller columns (when in three columns)
- http://vna.com.au/information/present/wsg/2004-11-15/example/
Possibilities
- Those are just a few simple examples
- Obviously this technique can be used to change any styles at all
- A prime example is Stopdesign1 where Bowman uses this technique to change his colours, layout and background images for each section of the site
Conclusion
- The Body Class Switcheroo is a simple technique that allows great flexibility
- Try it out
- If you have any trouble, let me know: lachlan.hardy@gmail.com