// Internet Duct Tape

Today is Blog Action Day with a focus on the environment and I’m going to teach a quick CSS trick for how to save paper by reducing what gets printed when someone prints an article from your blog.

It’s dead simple to do, and I’m always surprised that more blogs don’t do it.

@media print {
/* If printing the page, get rid of the sidebar and comments */
.somethingclass { display: none; }
}

The @media print style is only applied to your blog when someone is printing it out. Use it to apply display:none; to your header, your sidebar, your footer and maybe even your comments. Here’s a sample of a print style sheet for the Sandbox WordPress blog theme:

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

Blog Page Without Print Stylesheet

Blog Page With Print Stylesheet

My Print Stylesheet

My print stylesheet is customized for my blog and settings (and let’s face it, my CSS is a mess).

@media print {
#wrapper {
width:100%;
}

#wrapper * {
width:auto;
}

iframe,#wpcombar,#footer,#globalnav,
#menu,.sidebar,.navigation,.comments,
#respond,.entry-meta,#blog-title,
#blog-description,#header,
.idt-menu,.idt-header {
display:none !important;
margin:0;
padding:0;
}

.container {
margin:0;
padding:0;
}

body.loggedin #wrapper {
border-top:0 !important;
}
}

• making the content take up the entire width of the page
• turning off iframes so the “digg this” button doesn’t show
• turning off the “logged into wordpress.com” bar at the top of the page
• remove header, footer, sidebar, and misc elements like the category image I use
• remove comments

By setting up a special print stylesheet for your blog design you can save your readers 1-2 sheets of paper for every article they print out.