How to optimize your wordpress blog for print

A modified version of the print style for WordPress’ Default theme “TwentyTen”. Many websites share the same elements, no need to reinvent the wheel again.


------------------------------


 @media print { 
    body { 
        background: #fff none !important; 
        color: #000; 
    } 
    #wrapper { 
        clear: both !important; 
        display: block !important; 
        float: none !important; 
        position: relative !important; 
    } 
    #header { 
        border-bottom: 2pt solid #000; 
        padding-bottom: 18pt; 
    } 
    #colophon { 
        border-top: 2pt solid #000; 
    } 
    #site-title, 
    #site-description { 
        float: none; 
        line-height: 1.4em; 
        margin: 0; 
        padding: 0; 
    } 
    #site-title { 
        font-size: 13pt; 
    } 
    .entry-content { 
        font-size: 14pt; 
        line-height: 1.6em; 
    } 
    .entry-title { 
        font-size: 21pt; 
    } 
    #access, 
    #branding img, 
    #respond, 
    .comment-edit-link, 
    .edit-link, 
    .navigation, 
    .page-link, 
    .widget-area { 
        display: none !important; 
    } 
    #container, 
    #header, 
    #footer { 
        margin: 0; 
        width: 100%; 
    } 
    #content, 
    .one-column #content { 
        margin: 24pt 0 0; 
        width: 100%; 
    } 
    .wp-caption p { 
        font-size: 11pt; 
    } 
    #site-info, 
    #site-generator { 
        float: none; 
        width: auto; 
    } 
    #colophon { 
        width: auto; 
    } 
    img#wpstats { 
        display: none; 
    } 
    #site-generator a { 
        margin: 0; 
        padding: 0; 
    } 
    #entry-author-info { 
        border: 1px solid #e7e7e7; 
    } 
    #main { 
        display: inline; 
    } 
    .home .sticky { 
        border: none; 
    } 
} 

How to optimize your blogger blog for print

To add the CSS code, go to ‘Template’ on the new Dashboard, press "Customize", then "Advanced", "Add CSS" and paste the code in the box – if you have other CSS customizations saved here, add the print CSS preferably at the bottom, to make this the last thing the browser reads and renders on the page.

------------------------------

@media print {
/* hide Blogger bar */
#navbar-iframe { 
 display: none; }
/* Reset colors to black text on white background and background images */
.header, .footer-outer, .post-outer { 
 background-color: white; background-image: none; 
 color: black; text-shadow: none; }
/* Hide Pages, sidebars, embedded videos & iframes */
.tabs-outer { 
 display: none; }
.sidebar { 
 display: none; width: 0%; }
iframe, object { 
 display: none; }
.blog-pager, .quickedit, .post-feeds, .post-share-buttons, .comment-replybox-thread { 
 display: none; }
/* Reset post width to fill the entire page */
.main-inner, .columns {
   padding-left: 0px !important;
   padding-right: 0px !important;
   width: 100%; }
.content-outer { 
 margin: 0px; width: 100%; }
.content-inner { 
 padding: 0px; width: 100%; }
.post-outer { 
 border: none; width: 100%; }
/* Specific for my blog */
#footer-2-1, #footer-2-2, #sharenav, .buttonlist, .videocontainer { 
 display: none; }
}