Make your Blog Printer Friendly : Code and CSS for Printing a Webpage
It is a good practice to make your blog printer Friendly. Regular readers visiting your blog may wish to print some of your articles and it is advisable to use a separate stylesheet for print purposes. This article describes how to create a printer friendly blog by using a separate print.css file.
Step 1 : Identify the Unnecessary Elements
The first step involves identifying all the unnecessary elements in your blog’s theme. Typically following elements should be removed in the print stylesheet
1. Advertisements
2. Logo
3. Comment form
4. Subscription boxes and newsletters
5. Search boxes
6. Widgets and other unnecesary icons
7. Header image and footer.
8. Sidebar
The main idea is simple.You must allow only the article to print. Other unnecessary css div’s should be kept hidden from the print stylesheet.
To identify the unnecessary classes, Install firebug. It is a very useful Firefox add on for web-designers. Using this add-on, you can see the source code of a webpage along with CSS and the scripts. Press F12 to start Firebug and identify the unnecessary classes and id’s in your blog template.
Click “Inspect” and select elements by hovering the rectangle over different positions. The corresponding code is marked blue in the Firebug pane. Note down the all the ID’s and Div classes that you want to remove (e.g <div class=”sidebar”> or <div id=”navigation”>).
Step 2: Let’s Create the Print.CSS
After you have noted down all the unwanted ID’s and classes create your “print.css” file as explained below:
1. Open notepad and create a new file. Name it “print.css”.
2. Use the following code to exclude elements from the print template
#sidebar {display:none;}
This excludes everything between <div id=”sidebar”></div> from appearing in the print template. To exclude classes (e.g <div class=”menu”></div> use the following code :
.menu {display:none;}
Similarly find all the classes and ID’s and add the codes in print.css file.
Next include the following code :
body {font-family: arial,helvetica,sans; font-size: 13px; background:fff; color:000;}
a,a:visited,a:link {color:#000; text-decoration:none}
This defines the Styling of your article. It is recommended to use only Black and White colors as this will reduce print costs at the user’s end.
Step 3: Call the CSS from the header
When you are done creating the print.css file, upload it in your web server. Next, open header.php file from WordPress theme editor and include the following code between the <head> and </head> tags:
<style type=”text/css” media=”handheld,print”>@import url( Your Print.CSS URL );</style>
Step 4: Link The JavaScript “Print this Page” From Your theme header
Finally paste the following link in your html source code. WordPress users need to paste the file in “single.php” file.
<a rel=”nofollow” href=”javascript:print(document)” title”Print Article”>Print this page</a>
You can update the header.php file from WordPress theme editor. Select your current theme and then click the header.php file to edit it
Note: Do not copy the codes directly in any htnl editor (e.g MS-Frontpage).Copy to notepad first.
Test the print.css file
Don’t Forget to test the print.css file. You can use print preview from browser or use microsoft one note to get the feel how your printed article will look. But the best option is to print an article on paper.
Do You have any more ideas to make the print.css more better and user Friendly ? Please share your ideas with us.
The print.css is infact very essential here.. It may give the readers a good option of carrying your blog offline with proper credits to you[as your blog logo can also be rpinted]
Good point Rohit. Thus it makes sense to include the logo in the print.css for proper branding.
For some reason, it’s just not working for me. Could you please help me create the print.css and the codes for header.php and single.php?
If I can get this working, my blog will be one plug-in less and faster too.
Thanks
P.S: I love your bookmarking icons. Is it a plug-in? Do you mind sharing it with me ;)
@udegbunam : What problems you are facing ? Have you previewed your site from print- preview from the browser menu ?
Anyway i can help you create the codes. Let me know about it.
The bookmarking icons are not any plugin and it’s custom code.
As always, I tried it on localhost first (so as not to ruin my blog) and it just didn’t work. Clicking on the print this page link kept throwing up errors such as “Forbidden
You don’t have permission to access /test/â€javascript:print(document)†on this server.”
Thanks man
The link mentioned is just a function to print the page. You can print preview the page from File > Print preview. I have tested the codes here and it’s correct.
Thanks anyway after much consideration, i think wp-print is a TOTALLY necessary plug-in so I’ll make do with it.
Cheers.
Great stuff – will definitely add it to my blogs!
thank you for this information, I will try it now and bookmark this page, very useful
Prints service is very impotent for the all people thanks to give this thanks
Very great article. Thank you for information :)