Designing Individual Blog Posts (Your Own Personal CSS Zen Garden)

I have always struggled with redesigning my site over and over again just to feed the urge for something new. It was past time that I stopped redesigning my site and starting styling individual posts instead (That should keep me going for a while). For those of you not familiar with the CSS Zen Garden, you should be ashamed.

There are a number of things to consider and a number of things to avoid if you decide you can handle a new design for each post that you do.

Other then satisfying your own urges to constantly design (like myself), it will show that you put that extra bit of thought into your work and how powerful the use of web standards can be.

Update: [Nov. 19 2009] – Smashing Magazine just put out a great article – The Death of the Boring Blog Post with examples of this practice.

So what do you want to style with each post?

It’s completely up to you, but you’ll want to keep it simple enough to quickly put together. I chose to pull out my headers, background images and most element colors. I left everything else for a couple reasons:

  1. You don’t want to spend several hours tweaking the overall layout
  2. You’ll want to keep your navigational elements and secondary info consistent amongst all the designs.

Consistent elements to aid usability

Anything that’s used as navigational elements in your site (tags, recent posts, categories, etc.) should be kept consistent among the varying designs in order for users to move quickly between posts without having to re-learn the interface.

Keep number of style sheets to a minimum

You should always keep the number of stylesheets attached to a page to a minimum. I always recommend only having one if you can but in this case we’ll settle for two. The first stylesheet should hold everything that is set in stone and the second should hold everything that will potentially be customized for each post.

There is no need to separate different style sheets for resets, layout or typography. With a little organization all of them can and should be kept together, keeping multiple requests back to the server at a minimum and allowing for quicker downloads.

Avoid !important

The last thing you want to do is have to use !important in your CSS to override the cascade. You also don’t want to serve up all the extra unnecessary data, so anything that you decide will be customized in each post should be pulled out of the main stylesheet and put into the secondary dynamic one. This will also save you from wondering why a style you just applied in your custom css isn’t showing up (that’s always no fun).

Let the Feed-Readers see it!

So what’s the point in designing each post if lots of people are going to see it without any style in their feed readers? You’ll want to reinforce the custom design in the feed version of your posts, so do us all a favor – put a screen-shot in the feed and encourage those readers to move along to the site to see it in all it’s glory.

The plan

To get this to work in a CMS, you’ll need to setup a custom field. All CMS’s should have this ability and once that’s setup you’ll:

  1. Link to the Main stylesheet (as usual)
  2. Create an If Statement in the code to pull the custom field (if it exists)
  3. If it doesn’t exist, pull in a default secondary stylesheet

Super simple.

TextPattern Implementation

I’ve been using TextPattern for sometime now (see Sorry WordPress, You Just Lost Your Battle to TextPattern) and have really grown to appreciate it’s simplicity.

Setting up the custom field

In the TextPattern Interface:

  1. Go to Admin > Preferences > Advanced
  2. Find the list of Custom Fields and give any empty one the value of “Custom-Style”

Create the custom styles

In Presentation > Style

  1. Create a new style called “secondary” to use as your customizable template (so you’ll save some time on future posts) – again this should contain all of the potentially custom items with default values assigned to it. In the event that your post doesn’t have a custom style, it will pull this one in instead.
  2. Copy the new style and give it a name that describes it (I’d call this post “Zen”)
  3. Do your magic on it – changing the default styles

Customize your posts

When actually writing your article:

  1. Open up the Advanced Options and find the newly created “Custom-Style” input box
  2. Enter in the name of the stylesheet you just created (there’s no need for a CSS extension)

Pulling in the custom field as a stylesheet

In the form that you reference your header data, setup an if/else statement. Call your primary CSS file first, if there is a custom CSS, call that. In the event that there isn’t a custom one, call the secondary CSS file. We’ll always end up with two stylesheets like so:


<txp:css n="default" />
<txp:if_custom_field name= "custom-style">
     <txp:css n="<txp:custom_field name="custom-stylesheet-name" />" />
<txp:else />
     <txp:css n="secondary" />
</txp:if_custom_field >

I think this is self explanatory – if there isn’t a custom style attached to a post, it won’t end up referencing an empty stylesheet.

Yep, couldn’t be more simple.

WordPress Implementation

Since WordPress is THEE blogging platform of choice these days, I’ll go ahead and show you how to do it there too (Thanks for making me setup a local install to see how to do this).

Setting up the custom field

You can setup your custom field directly from your blog post in WP(WordPress). Below the post, expand the “Custom Fields” – enter “custom-style” into the “name” input box. The value input box should hold the name of your custom stylesheet (this should have a .CSS extension).

When you go to create a new post, the “custom-style” custom filed will be available to enter in a value.

Create the custom styles

Using an editor, create the template that will hold all your potentially customizable items – set these up with default values and call it something like “secondary.css” and upload it to your theme/css directory. This will be the style that’s pulled in if a post does not have a custom style.

Customize your posts

For each post:

  1. Go to the custom field “custom-style”
  2. Enter in a value with the name of your custom stylesheet (with a .CSS extension)
  3. Upload the custom CSS file to the theme/css directory.

Pulling in the custom field as a stylesheet

I’m not going to go into much detail about how to read out the custom fields in WordPress. Here’s how the code should look. It pulls in the default stylesheet, checks to see if it has a custom stylesheet, and determines if it needs to pull in the secondary (template) stylesheet or the new custom one.

This should go into your templates where you typically pull your CSS (more than likely it should go into the “Header” template in Appearance > Editor).

Because the code is a little long, I’ll mark unnatural line breaks with a “»”. 


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"  »
type="text/css" media="screen" />
<?php
$customCSS = get_post_meta($post->ID, 'custom-style', $single = true);
if($customCSS !== '') { ?>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ »
     <?php echo $customCSS ?>" type="text/css" media="screen" />
<?php }
else{ ?>
     <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ »
     secondary.css>" type="text/css" media="screen" />
<?php }?>

That’s really all there is to it.

Please share if you know other CMS’s

I don’t have all the time in the world to be trying this out in other CMSs, so if you know how to do this in Moveable Type or other platforms, please let us all know in the comments.