How To: Create a Print Friendly Thesis Website

I was thrown a curve ball this week when a new client asked that their site be print friendly. He said his clientele was older felt like they might print off his homepage which contains his phone number, hours, and a map. Of course I obliged, and found myself having a blast “blowing everything up” so it could fit on an 8×11 sheet of paper.

We will need to remove backgrounds, images, the navigation, and change the font from Pixels or EM to the print friendly “pt”.

Step 1: Create a new stylesheet called, “print.css” and upload it to /custom/

/*Reset Style*/
body.custom {
	margin: 0;
	padding: 0;
	line-height: 1.4em;
	word-spacing: 1px;
	letter-spacing: 0.2px;
	font: 12pt Arial, Helvetica, "Lucida Grande", serif;
	color: #000;
	background: none;
	border: none;
}
a, a:hover {
	color: #000;
	font-weight: bold;
}
#logo, #logo a {
	background: none;
	font-size: 20pt;
	font-weight: bold;
	text-decoration: none;
	margin: 0;
	padding: 0;
}
#tagline h1 {
	font-size: 16pt;
	font-weight: bold;
}
h1, h1 a {
	font-size: 16pt;
	font-weight: bold;
}
h2, h2 a {
	font-size: 14pt;
	font-weight: bold;
}
h3, h3 a {
	font-size: 12pt;
	font-weight: bold;
}
h4, h4 a {
	font-size: 10pt;
	font-weight: bold;
}
/*Move Element*/
#content {
	float: left;
}
#sidebars {
	float: right;
}
/*Remove Element*/
.menu {
	display:none;
}
#sidebars ul li {
	list-style: none;
}
#multimedia_box {
	display:none;
}
#footer {
	background: none;
}

Step 2: Link up the Stylesheet using custom_functions.php

// Print Friendly CSS
function print_css() {
?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/print.css" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');

Just FYI – If you need to create an Internet Explorer friendly print.css (and you probably will) then use instead the code below on custom_functions.php

// Print Friendly CSS
function print_css() {
?>
<!--[if IE]?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/ie-print.css" type="text/css" media="print"?>
<![endif]--?>
<link rel="stylesheet" href="/wp-content/themes/thesis_16/custom/print.css" type="text/css" media="print" />
<?php }
add_action('wp_head','print_css');

Step 3: Check your work

Using any major browser: File –> Print Preview

OR

Using the Web Developer Toolbar for Firefox: CSS –> Display CSS By Media Type –> Print

Tagged as: CSS, Print, Thesis