Pro Blog Design

Blogging doesn’t end at the monitor.

Many readers print out interesting posts, but not if your website prints with text off the page, adverts and other useless content. Adding a print stylesheet to your blog is an easy method of ensuring that your content remains useful on paper.

Do you blog about phone reviews? It’s perfectly plausible that your readers will print out a few of their favourites and take them down to the shop with them. Life advice? A reader could print out your words, to read later on at their leisure. Almost every niche has a reason to be printed.

Setting Up the Stylesheet

1. Create a new file in your text editor (e.g. Notepad), and save it as print.css
2. Upload this file to your theme’s directory. (The same place where your main stylesheet is)
3. Open your theme’s header.php, and beneath the following line:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Add:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" type="text/css" media="print" />

How Do The Styles Work

The essential purpose of the print stylesheet is to remove content. To do this, look through your page’s source code for sections that can be removed. You then give all of these sections a rule which tells the printer not to show them.

For example, if I wanted to remove my whole sidebar, I would look at the page source, and discover that it is all held within a div that looks like this:

<div id="sidebar">
##Sidebar Content Here##
</div>

I now add the following rule to my print.css, and the sidebar will not be shown:

#sidebar {display:none;}

NB – Had the code said <div class=”sidebar”>, the markup would beging with .sidebar, not #sidebar.

What Should Be Removed?

In short, everything that isn’t either content or the title. In most blogs, that means that the following usually need to be removed:

• Sidebars – The links, popular posts etc. in a sidebar are meaningless on a printed page.
• Advertisements – You aren’t going to make any money from print-outs, so why annoy the reader?
• Comment Forms – They can’t use them, so why waste space?
• Footers – The title and URL of the page are printed on the top of every page, and your content is copyrighted without the notice needing to be printed. There is no need to add on your “Powered by…” notices and such.
• Navigation, search bars or anything else you may have in the page’s header which isn’t related to the content.

Use the “Print Preview,” function in your browser to see the effect your changes are having, and continue taking away until the content is all that remains. As an example, you can see Pro Blog Design’s print stylesheet here.

Is your blog printer-friendly? Share your stylesheet with us.