№ 75. How to style every single post

Later edit: The example bellow doesn’t look pretty at all, because I’ve changed the blog’s design, based on another grid; anyway, the code is functional, so you either can built a grid of your own, or provide styles to the divs you’ll be using to style your posts. Happy coding .

One of the few inconvenient experiences when using a blogging platform or a CMS is the difficulty of creating individual styles for single posts. The content of a blog post is called by an unique php tag which means that you can automatically place the text inside of a single “div” tag.
This text is intended to provide a few simple solutions to this issue; the first two tips apply to the full version of WordPress; the other two do not depend on the software you use to publish the content (i.e. they work for any CMS and for blogs hosted at Blogger and even at wordpress.com).
1. Styling the posts filled in the same category
This is a well known tip for full WordPress installations. In order to apply it, you’ll have to create a series of single files (single1.php … singlen.php), set the appropriate calls in the single.php template file and create the styles for the specific tags used in the series of template files. This technique is very useful if you need to provide visual identities to certain categories. I won’t give any further instructions; you’ll find everything you need in this beautiful tutorial by Lorelle.
2. Styling certain single posts
I won’t explain this technique either, because Jean-Baptiste Jung just wrote a very clear recipe. This tip is very useful when you want to make one or few posts stand out, but the overuse will make the stylesheet grow bigger and bigger – which will dramatically increase the loading time of your blog.
3. Styling every single post using grids
Yes, that’s right, grids can do it. There’s no need that your entire blog was designed on a grid system, you only need to create a grid that fits the width of the single post area. If you’re into typography, I believe this is definitely a satisfactory result.

Grids in a single post

So, how is this done? I’ll give you a “live” example.
The design of this blog is built on a grid system that has 49 classes (this may seem huge, but it’s only flexible); the single post area is 620 px wide and covers 32 columns. In order to nest grid classes inside this area, we’ll have to set a 580 px wide basis (because of the grid classes margins, which are 10 px wide); inside of this area, we can do practically anything. Here’s an example:
The HTML:

The css:

Well, I hope it was clear enough; if it wasn’t, don’t hesitate to drop me a line.
This tip may be implemented only if you have access to the stylesheet of your template (if you blog on Blogger, the stylesheet is placed in the section of the template).
But what if you’re not allowed to edit the stylesheet. I.e. what if you blog on wordpress.com? Well, here’s what you can do:
4. Styling single posts using HTML attributes
To be more precise, “using the ‘style’ attribute”.
The text above can be reproduced exactly using this script:

And it really works on wordpress.com.
OK, that’s all folks. See you next time.

Tags: css, grids

Published on the 5th of February, 2009, in Tutorials · Print