This is quite cool:

My page logo is identical on all pages (it’s patched in with server-side includes), but I’ve always wanted a way to distinguish it on different pages. But, I don’t want to maintain half a dozen different stylesheets either. I finally figured out how to do it: <body> IDs.

In the template for each page, I added an id attribute to the <body> element. Now I can do this to change the look of the header on my Projects page:

body#projects #logo {
 background-color: #660000;
 background-image: url("/images/hilbert_red.gif");
}

I cribbed this technique from cinnamon.nl, a site so elegantly designed it makes me cry. Be sure to view-source.

Update: Eric Meyer suggests using body IDs as CSS signatures to enable domain-specific overrides in user stylesheets, which is an insanely cool idea. Simon Willison says I could do this and do what I want with body classes instead. And Ian Hickson would just like to point out that he’s been doing this forever. Hey, I never said it was new; it’s just new to me.

§

Respond privately

I am no longer accepting public comments on this post, but you can use this form to contact me privately. (Your message will not be published.)



§

firehosecodeplanet

© 2001–9 Mark Pilgrim