Following on from the styling of the header information (Pages, Archives etc.), I’ve styled the post title, date and the meta data at the end of every post.
Another little tweak was to add the relative time since the post was made below the post title. The iTunes information now fits into the scheme better and the Technorati tags follow on nicely from them with the potential for more snippets like these in the future.
The Technorati tags were difficult to style. They’re added automatically by ecto, the blog editor I am using, as a plain <p>. There’s no way to edit the template for this to add a class to that paragraph so that it can be styled independently from the rest of the post. So how could I pinpoint this paragraph and apply the styles to it? What was unique about it?
I had to read up about adjacent selectors in order to solve this one. This paragraph’s unique attribute is that is immediately follows the div.iTunes, so
div.iTunes + p {}
does the trick.
Problem: Because the iTunes div and the Technorati p sit within the ‘postentry’ div they retain its margin so I have to override this with a negative margin – which is a bit hit and miss between different browsers because it’s specified in ’ems’. I’ll have to change that back to pixels so I can get it lining up exactly with the edge of the box (including all the hacks for IE).
