HOWTO: Asides in Sandbox

One thing I love about the Sandbox theme for WordPress is the ease which which you can create per-category CSS customization. Andy Skelton had written a note on how to do it, which I used as a basis for mine.

Here’s my CSS rules for asides. You’ll need to use the Sandbox theme, and I advise adding a link in the head of the main template file for your custom CSS.

NB: my ‘asides’ category is ‘linklist’ so edit appropriately.

The first two rules are from Andy’s post.

body.home div.category-linklist * { display:inline; }

The first rule makes all the children of a post in the linklist category (what I use instead of asides) display as inline rather than blocks.

The next hides the display of elements we don’t want to show in an aside.

body.home div.category-linklist div.entry-date,
body.home div.category-linklist span.entry-author,
body.home div.category-linklist span.entry-category,
body.home div.category-linklist span.metasep {
display:none;
}

Then my tweaks follow:

body.home div.category-linklist h2.entry-title {
font-size: 12pt;
display:inline;
}

Now have the post's title, an H2, display inline, and set the font size to the same as the body of the post.

body.home div.category-linklist h2.entry-title:after { content: ": "; }

This puts a ': ' after the post title, before the body of the aside.

Update: the following section on IE conditional comments isn't behaving right for me.

Unfortunately, IE6 does not implement the :after pseudo-element (even though it's part of CSS 2). So on IE6, the aside title will run into the aside body. The alternative is to hide the H2 for IE using a conditional comment.

<!--[if IE 6]>
body.home div.category-linklist h2.entry-title { display: none; }
<![endif]-->

And now set the padding on the entry so it doesn't run-up against other posts and asides.

body.home div.category-linklist {
padding: 0pt 10pt 10pt 10pt;
}