WordPress.com

1. engtech
   Member
   Jan 21, 2007, 9:52 AM

   I just did this CSS hack to make articles on my blog print without the header, sidebar, comments and footer. Felt like sharing.

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

2. entomoagricola
   Member
   Jan 21, 2007, 10:30 AM

   I was thinking these days how to do it, but I was not finding the way (at least not an elegant way).
   It me works perfectly with IE 6.0 and 7.0, and with Firefox 1.5 and 2.0, under linux and Windows ;-)
   Thanks, great job!
   Alex.

3. sunburntkamel
   Member
   Jan 25, 2007, 8:38 PM

   nice tip, thanks!

4. twhit
   Member
   May 12, 2007, 2:02 AM

   Thanks so much, engtech!

   I think this by itself could be enough reason for some people to get the CSS upgrade.

   This works well with the 1-Column skin in Sandbox. With the 3-Column skin, the sidebar columns do not print, but the middle column with the content remains limited in width as if the sidebars were still there. I haven't figured out how to override that.

   Also, anyone who wants the Comments to print along with the post can just remove the line that says

   .comments { display: none; }

   from the engtech's CSS above.

5. engtech
   Member
   Oct 15, 2007, 9:35 PM

   Wrote a blog post about it: http://internetducttape.com/2007/10/15/css-save-paper-with-print-media/

6. raincoaster
   Member
   Oct 15, 2007, 9:43 PM

   I should check that out. Thanks.

7. judyb12
   Member
   Oct 15, 2007, 10:12 PM

   very nicely done

8. vivianpaige
   Member
   Dec 1, 2007, 11:26 PM

   I added this code to my blog - thanks so much! Only problem: my sidebar continues to print. But hey, it's better than it was before!

9. jacqueline1230
   Member
   Dec 14, 2007, 10:18 PM

   I'm new to the 'hood (over from Blogger) and loving it. Mostly.

   How do I get an individual post to be printable? This is a significant disadvantage if it's not possible...

   I don't know CSS either, just got HTML proficient....please don't make me go back!

   -Jacqueline

   http://theleatherdistrictgourmet.wordpress.com
   http://the sixteenthminute.wordpress.com

   Thanks!

10. timethief
    Member
    Dec 14, 2007, 10:28 PM

    @jacqueline1230
    The original post in this thread provides the instructions to print your posts out without the header, sidebar, comments and footer.

    I do not know what your css/html comment means. We cannot access or edit the html or php in our underlying blog templates at wordpress.com http://faq.wordpress.com/2005/09/27/edit-my-templates/

    Provided we have css editing experience and we are prepared to do the work ourselves (no staff support for learning) then we can alter the appearance, but not the function of our blogs by purchasing a css editing upgrade http://faq.wordpress.com/2007/10/18/about-the-custom-css-upgrade/

11. thesacredpath
    Member
    Dec 14, 2007, 10:33 PM

    /nod to timethief
    The CSS hack shown above, if you have the CSS upgrade, should work. I say should, because I do not know if it will work the same with all themes or not. Knowing engtech, I would think that it would.

Topic Closed

This topic has been closed to new replies.