// Internet Duct Tape

Blog Action Day: Save Paper when Readers Print Your Blog

Posted in CSS and Web Design, Technology by engtech on October 15, 2007

Bloggin Tips and Tricks

Today is Blog Action Day with a focus on the environment and I’m going to teach a quick CSS trick for how to save paper by reducing what gets printed when someone prints an article from your blog.

It’s dead simple to do, and I’m always surprised that more blogs don’t do it.

@media print {
/* If printing the page, get rid of the sidebar and comments */
.somethingclass { display: none; }
}

The @media print style is only applied to your blog when someone is printing it out. Use it to apply display:none; to your header, your sidebar, your footer and maybe even your comments. Here’s a sample of a print style sheet for the Sandbox WordPress blog theme:

@media print {
/* If printing the page, get rid of the sidebar and comments */
div#wrapper { width: 100%; }
div#wrapper * { width: auto; }
div#header { margin: 0; padding: 0; display:none !important; }
div#footer { margin: 0; padding: 0; display:none !important; }
div.sidebar { margin: 0; padding: 0; display:none !important; }
div.container { margin: 0; padding: 0; }
.navigation { display: none; }
#blog-title { display: none; }
.comments { display: none; }
}

Blog Page Without Print Stylesheet

Blog Page With Print Stylesheet

My Print Stylesheet

My print stylesheet is customized for my blog and settings (and let’s face it, my CSS is a mess).

@media print {
#wrapper {
width:100%;
}

#wrapper * {
width:auto;
}

iframe,#wpcombar,#footer,#globalnav,
#menu,.sidebar,.navigation,.comments,
#respond,.entry-meta,#blog-title,
#blog-description,#header,
.idt-menu,.idt-header {
display:none !important;
margin:0;
padding:0;
}

.container {
margin:0;
padding:0;
}

body.loggedin #wrapper {
border-top:0 !important;
}
}
  • making the content take up the entire width of the page
  • turning off iframes so the “digg this” button doesn’t show
  • turning off the “logged into wordpress.com” bar at the top of the page
  • remove header, footer, sidebar, and misc elements like the category image I use
  • remove comments

By setting up a special print stylesheet for your blog design you can save your readers 1-2 sheets of paper for every article they print out.

22 Responses

Subscribe to comments with RSS.

  1. David Bradley said, on October 15, 2007 at 4:10 pm

    Another great tip! Presumably, you’d make a little printer icon for each post so that people would get the message, although if your CSS traps the print command that obviously wouldn’t actually be required.

    db

  2. engtech said, on October 15, 2007 at 4:34 pm

    This is supported by all modern web browsers, so no special “print version” is needed. The browser applies the @media print stylesheet automatically.

    There’s a similar stylesheet hack for hand-held devices like the iPhone.

  3. judyb12 said, on October 15, 2007 at 5:11 pm

    consider it stolen (and properly credited, of course).

    I hadn’t tried to print anything off my blog before, but without this little bit of code, Firefox crashed its brains out!

    Thanks for the duct tape when i didn’t even know i needed it :-)

  4. [...] Save your readers ink and paper by using a special “Print Style Sheet” – Don’t you just hate it when people don’t do stuff like this and all of your money goes down the drain buying more ink cartridges? [...]

  5. timethief said, on October 15, 2007 at 6:21 pm

    Thanks engtech. :)

  6. Diseases caused by Global Warming said, on October 15, 2007 at 8:58 pm

    [...] Blog Action Day: Save Paper when Readers Print Your Blog [...]

  7. [...] Internet Duct Tape: Blog Action Day: Save Paper when Readers Print Your Blog [...]

  8. Melissa Donovan said, on October 15, 2007 at 9:46 pm

    This is great advice! Wish I had a printer so I could test it out; instead I’m bookmarking this one for future reference.

  9. Best of Blog Action Day - Simplehelp said, on October 16, 2007 at 2:33 am

    [...] Save Paper when Readers Print Your Blog – note to self: implement this [...]

  10. Javier Aroche said, on October 19, 2007 at 10:07 am

    I remeber you posted something in WordPress.com forums sometime ago. I used that to made my own print stylesheet, but I leaved things like the blog title and post meta, while I hide others that I don’t find useful like post comments. Anyway, every blog should have their own “pss” to be more accessible

  11. Rolling a blog joint « Cuzoogle said, on October 27, 2007 at 7:13 am

    [...] Internet duct tape gives tips on saving paper. [...]

  12. Bluebeetle(one) said, on October 29, 2007 at 4:26 pm

    Wow great idea: thanks for sharing this great tip.

    I have to test it on my blog.
    ;o)

    Bluebeetle(one).

  13. Colin said, on October 29, 2007 at 10:25 pm

    @Melissa Donovan:
    No need for a printer, “Print Preview” will show you the results. :-)

  14. engtech said, on November 08, 2007 at 6:00 pm

    @Colin:

    Just going through old comments I hadn’t responded to and had to stop and take a second look at your domain name.

    I’m surprised you’re not doing anything with that site. :) It would make for a good web comic.

  15. [...] already some good tutorials out there, but I thought I’d share how I created the printer-friendly stylesheet for this site, which [...]

  16. Missy said, on January 24, 2008 at 9:26 pm

    Hi—Sorry if this is a terribly dumb question, but exactly how do i create a print style sheet?

    Is this a file that already is a part of my blog theme? or a wordpress item? or what.

    I’m totally confused, but i want to learn how-to make my blogs printable. (and efficiently so)

  17. engtech said, on January 25, 2008 at 12:14 am

    @ Missy:

    You would need this print style sheet for your blog:

    @media print {

    #mta_bar, #nav, #header_img, #footer, #sidebar, .sociable, #comment_form {
    display:none;
    }

    object {
    display:none;
    }

    #content_box, #content {
    width: 100%;
    }

    }

    you are running Cutline, so you could put the print style sheet code in your /wp-content/themes/Cutline 1.1-3ColumnRight/custom.css

  18. Ricardo said, on June 24, 2008 at 3:15 pm

    You can also help nature using this site:
    theprintcostcalculator.com
    :D

  19. Ink cartridges said, on February 26, 2009 at 4:20 am

    sweet… thanks…

  20. Patti said, on April 22, 2009 at 11:31 am

    I am happy to have stumbled on this instruction, you are very generous with your help. Working on my first food blog and would like each post to have the ability to print just the recipe. i.e. PRINT THIS RECIPE and it opens in another window. I see on some food blogs that the recipe in a post is in a shaded frame. Any advice as how to do this in WordPress? I am in the early phases of this but have a lot of recipes to do. THANKS!

    Many thanks, Patti http://www.WorthTheWhisk.com

  21. Utah Web Designer said, on September 10, 2009 at 11:20 am

    oh that is cool… easy and it looks nice :-)

  22. Car insurance claims >> http://onlinecarinsuranceclaims.com/ said, on November 23, 2009 at 4:07 pm

    [... - engtech.wordpress.com is other must see place of tips. Online Car insurance claims [... -


Comments are closed.

Follow

Get every new post delivered to your Inbox.

Join 285 other followers

%d bloggers like this: