Nice blog printing using CSS and Sandbox

  • Author
  • #51284


    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; }


    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!


    nice tip, thanks!



    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.




    I should check that out. Thanks.



    very nicely done



    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!


    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!





    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

    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


    /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.

The topic ‘Nice blog printing using CSS and Sandbox’ is closed to new replies.