Mon, 15 Sep 2008

A print style sheet

I learned something interesting from a book my brother-in-law gave me: "Advanced Professional Web Design", by Clint Eccher - how to create a style sheet for printing blog entries.

The following the style sheet (print.css) which I added to my "Entries" blog. It makes sure the font is big enough to be legible on the print-out and suppresses the header, sidebars, footer, the form where visitors can enter comments (basically an empty text field) plus the invitation to leave a comment, horizontal lines, the link to the comments feed and the trackback link.

p { font-size: 12pt; }
#header { display:none ;}
#sidebar-1 { display:none ;}
#sidebar-2 { display:none ;}
#footer { display:none ;}
form  { display:none ;}
hr  { display:none ;}
h4#respond { display:none ;}
span.commentsrsslink { display:none ;}
span.trackbacklink { display:none ;}

I also added a line to the file header.php (which is one of the files of the K2 theme I'm using) - a normal style sheet link:

link rel="stylesheet" type="text/css" media="print" href="print.css"

Some PHP code before "print.css" ("echo get_template_directory_uri();") simply makes sure the style sheet is found. (There are a few backslashes too many in this line as it is displayed here - I haven't yet found a way to display code properly in Blosxom.)

Posted on 15 Sep 2008 at 20:07 in /technology/internet. -- Permalink