As you probably know, I'm a fan of Sandbox, the semantically rich Wordpress theme for hard-core theme designers. Honestly, I don't know why theme designers would want to work off anything else… it just rocks.

So for my latest example of the cool "Pure CSS" funkiness you can accomplish with Sandbox, I draw your attention to these asides I've just introduced.

Now, I'm not the first to implement asides. As I mentioned in my first aside, Matt Mullenweg has had asides on his blog for quite a while, and specifically the "inline" type of asides that I think work the best. (The other kind of asides tend to be listed in a separate and thinner column alongside the main content column, but in my opinion these are often lost in the clutter of what, for most blogs - mine included, is a very "busy" second/third column.)

If you look under the hood of Matt's HTML code, you'll see that his asides are rendered in completely different HTML from his normal posts. And that's fine… but it means you're either dependent on some third-party plugin or the kind of PHP programming skills which most of us can only dream of.

In my case, I decided that thanks to Sandbox's richly marked-up HTML, I should be able to achieve the same thing without any PHP or HTML hacking whatsoever. In other words… CSS or bust!

And, dear fellow blog theming afiscionado, that's the point. If you're working off semantically rich HTML markup, you should not need to touch the HTML (or worse, PHP)… you should be able to make your dreams come true with CSS alone.

Pure CSS Asides Using The Sandbox Theme

What makes "Pure CSS" asides possible in Sandbox is the fact that each post's wrapping DIV tag includes a whole stack of identifying classes, inluding a class for each category to which it has been assigned. Here's the opening DIV tag of my previous post (an aside), so you can see what I'm talking about:

<div id="post-300" class="hentry p1 post publish author-admin category-asides category-gadgetstools y2007 m07 d10 h09">

See that category-asides bit? That's Sandbox telling the CSS designer that this post has been assigned to the "asides" category. Wow… now you have a way to isolate all asides in CSS and change their styling.

And… well.. I don't know what to say. See, that's about it. Everything else I could tell you is technical CSS stuff related to the specifics of my own theme's CSS and what I had to do to get the asides to look right (mostly turn stuff off… display:none… d'uh!).

Ok so there was just one tiny thing I had to add to the HTML to get it to match Matt's "look": I had to wrap a tiny but of text in a SPAN with it's own class, so I could turn that little bit of text off, otherwise, the number of comments shown at the end of each aside would have had the word "Comments:" in front of it… which I didn't want. But otherwise, I was true to my word: Pure CSS!

Now… try doing this with any other Wordpress theme!

Updates

* I'm not the first to do this with Sandbox, I now realise. Here's another very similar achievement.

Comments