I love the way I have the header of this blog set up to display random images. I think it adds visual draw to the page, making RickBeckman.org look better than perhaps it really is. However, I think it would be nice to be able to have certain headers displayed on certain days with no randomness involved. For instance, my second wedding anniversary is rapidly approaching (8 days!), and I wanted a way to show a certain header image on that day all day long without compromising the randomness of any other days’ headers.
Well, I was poking around K2 (the WordPress theme currently in use here) looking for a way to do that. K2 is crazy powerful, due to its use of Sandbox-inspired semantic class names, so I knew this wouldn’t be a difficult task.
And I found myself staring at the BODY declaration in this blog’s source…
There it was, all the information I needed in order to tap into for date-specific styling: y2007 m09 d09 h12. With it, I could manipulate the site’s style based on year, month, day, or even hour. Thank you K2! (And Sandbox!) Styling an element is easy enough; in this case I would want to apply styling to the #header block. And I could even style it in a way that only affects a change on the seventeenth:
body.d17 #header {
background: url("anniversary.jpg") !important;
}That’s very trivial. All that code does is apply style to the #header element only when the BODY tag has a class of d17, which will only be true on the seventeenth of the month. The !important tag exists in order to override the styling for random header images which appears a bit later in this site’s source code.
However, as that style definition stands, it will show my anniversary image on the seventeenth of every month unless I remove the code after it’s done its part.
That’s not good enough; I wanted to be able to take advantage of the fact that K2 gives me both a day and a month class to deal with. But how to access that information via style sheet?
Well, it turns out that multiple class values can be addressed in styling! I’m unsure how cross-browser compatible this is, but it works in Internet Explorer 7 and Firefox 2. And it allows me to have my per-day styling without hacking anything other than my custom.css file.
This is what the final definition looks like:
body.m09.d17 #header {
background: url("anniversary.jpg") !important;
}Now #header is only going to receive that special styling on the seventeenth day of September. Score!
As many class values as needed can be addressed provided that they are all separated by a full stop (“.”). So if I really wanted to, I could pull all the class values in that BODY declaration above and do something like this:
body.wordpress.k2.y2007.m09.d09.h12.home.loggedin.columns-two.lang-en { }The level of styling this opens up is virtually inexhaustible, and I really feel weird even talking about it — I’m by no means designer enough to take full advantage of such a powerful styling framework, but I hope someone reading this is. Enjoy!