Print CSS

I really don’t like the “Printer Friendly” icons. Don’t you think when you hit print it should just print? Why are we forced to hit he printer friendly icon and then print either a new page or something from a pop-up? Seems kinda old school. Then again maybe you like that. I don’t. As I build a site I try to consider writing a complete print.css file. Building a site usually uses various DIV tags and css files to layout how the site is going to look. Basic stuff. A lot of time is considered how the site will look under Firefox, IE, Safari, Opera, etc… but how much time is spent looking at how your page will look to a printer? You just have to click “Print Preview” to see it. Does your site look good? I know the default theme (K2…?) for WordPress prints an extra page or two of sidebar crap.

The quickest and easiest way to build a nice print.css file is just copy your style.css to print.css and start knocking things out. I add the following line to my header.

<link rel=”stylesheet” href=”<?php bloginfo (’stylesheet_directory’); ?>
/print.css” type=”text/css” media=”print” />

The next step is to start knocking out the stuff you don’t need. For example in the default WordPress default theme you’ll see:

#sidebar
{
padding: 20px 0 10px 0;
margin-left: 545px;
width: 190px;
}

This is the size and display of the sidebar div tag. The #sidebar, in the print.css file, can then be changed to:

#sidebar
{
display:none;
}

That will remove the sidebar from being printed. Very simple. Go through the rest of the print.css file and remove any class or element not required. Set your font face and sizes… all done.

I’m currently using the Elegant Grunge theme. I had to change the comment.php file to prevent the comments from being printed. Basically I wrapped it up in a div tag called comment-print then in the print.css file set the display to none for that tag. I also don’t like printing 5 pages of comments for one page of article.