Nice blog printing using CSS and Sandbox

engtech · Member · Jan 21, 2007 at 9:52 am
Copy link

Add topic to favorites
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 { /* 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; } }
entomoagricola · Member · Jan 21, 2007 at 10:30 am
Copy link
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.
sunburntkamel · Member · Jan 25, 2007 at 8:38 pm
Copy link
nice tip, thanks!
twhit · Member · May 12, 2007 at 2:02 am
Copy link
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.
engtech · Member · Oct 15, 2007 at 9:35 pm
Copy link
Wrote a blog post about it: http://internetducttape.com/2007/10/15/css-save-paper-with-print-media/
raincoaster · Member · Oct 15, 2007 at 9:43 pm
Copy link
I should check that out. Thanks.
judyb12 · Member · Oct 15, 2007 at 10:12 pm
Copy link
very nicely done
vivianpaige · Member · Dec 1, 2007 at 11:26 pm
Copy link
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!
jacqueline1230 · Member · Dec 14, 2007 at 10:18 pm
Copy link
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!
timethief · Member · Dec 14, 2007 at 10:28 pm
Copy link
@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/
thesacredpath · Member · Dec 14, 2007 at 10:33 pm
Copy link
/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.

No items found.