Nice blog printing using CSS and Sandbox

  • Author
    Posts
  • #51284

    engtech
    Member

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

    #51400

    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.

    #51850

    nice tip, thanks!

    #52100

    twhit
    Member

    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.

    #52192

    engtech
    Member
    #52193

    raincoaster
    Member

    I should check that out. Thanks.

    #52195

    judyb12
    Member

    very nicely done

    #52229

    vivianpaige
    Member

    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!

    #52234

    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!

    #52235

    timethief
    Member

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

    #52236

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