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.
