Codeable info

Create A Printer Friendly Style Sheet

Posted on by in WordPress Tutorials

Most sites allow visitors the option to print content easily and efficiently. They do this by offering a print only version or style sheet so that extra advertisements and excess web content doesn’t appear on the printed copy.

If a print version style sheet is coded correctly the blog or website header, footer and sidebars can be excluded as well as a lot of extra and unnecessary content.

The trick is to create the print style sheet from a basic template of your WordPress enabled blog or site.

The reason not to use a plugin is because you can style and customize the print template to match your personal preferences. Most plugins have a default or basic layout. Creating the print style sheet manually allows you to integrate it with your current or active theme.

Create The Print Style Sheet

In order to take full advantage of this tutorial you will need proper FTP access to the related WordPress site or blog you would like to edit.

The first step is to copy the “Style.css” or original style sheet of the blog in question. Creating a new style sheet by altering the original style sheet is the best way to integrate the printable version with a current WordPress theme or layout.

Rename the new style sheet copy to “Print.css”.

To continue you must be familiar with HTML and CSS programming, if you are unclear how either language works we do not recommend continuing with this tutorial.

Edit The New Print.css Style Sheet

Every style sheet is different so theres absolutely no way for us to list every variation in this tutorial.

This is where the HTML and CSS knowledge comes in handy. The next step is to skim through the new “Print.css” style sheet and remove the excess content that you do not wish to appear in the printable page version.

Begin by looking for the following tags (separately) and delete the pertaining content if you do not want it to appear.

#header, #nav, #sidebar, #footer .noprint {display: none;}

To break this down here is the list of the above tags and what role they play in the style sheet.

#header

This tag is obviously related to the template header and all pertaining content. It is recommended to remove the header from the print style sheet.

#nav

The “nav” tag relates to the navigation panel for the website or blog. This is generally the main menu or list of native website related links. It is recommended to remove all “nav” tag and content code.

#sidebar

The sidebar tag controls what appears in the blog side panel(s). Usually the sidebar contains custom content, post and web links, and possibly advertisements. It is recommended to remove all sidebar links and content in the print style sheet.

#footer .noprint {display: none;}

The footer tag quite blatantly takes care of all footer content for the related WordPress theme or template. We recommend removing all content related to the footer, unless you list contact information here. That is of course, if you would like your contact information to appear on a printed version of your published blog posts.

After removing all excess content from the new style sheet the next step is to expand the actual featured content area. Basically by enlarging the content area size and increasing the font the printed content will be easier to read.

Usually the following tag is associated with a standard content area:

#content {width: 0; margin: 0; float: none;}

Of course depending on your active theme or template the actual style sheet code may vary.

All colors of hovered, visited, and standard links as well as additional text and content should be black. Any section with the option to enter an HTML color code should be changed to “000000” (HTML code for black). This will ensure the printed version remains one color instead of a multitude of font colors (which ultimately saves ink).

Tell Your Page To Use The New Style Sheet

At the very top of the “Print.css” style sheet input the following code:

/* Print Style Sheet */
@media print {
body { background:white; color:black; margin:0 }
}

This will tell the browser to use the style sheet when someone is printing the page. It only works however when the viewer prints the page through their internet browser settings or menu.

Creating A Print Link

We recommend placing the following link in the header of your WordPress theme or layout but it can actually be placed anywhere.

Input a link using the following code:

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

Obviously the link can be customized with a button or image mask of some kind.

After the link has been placed somewhere on your WordPress enabled blog or site, all the required tasks for setting up a print friendly version of your blog should be done.

Provided you set up the “Print.css” style sheet correctly any printed content should appear stripped down of excess images and the text will print in black ink only. Considering most people print on plain white paper, black is a good standard to use.

Comments Closed

Codeable info