This is the first time I'm making a print.css for Drupal so please bear with me.

Add print.css to .info file

In the theme folder in blogbuzz.info add 'stylesheets[print][] = css/print.css' below 'stylesheets[all][] = css/blogbuzz.css'. So:

stylesheets[all][]   = css/blogbuzz.css
stylesheets[print][] = css/print.css
;stylesheets[all][]   = css/custom.css

Print.css

The print.css should go in the css folder in the theme folder.

body {
	margin:0;
	padding:0; 
	background: #FFF;
	font: 12pt Arial, Helvetica,"Lucida Grande", serif; color: #000;
	}
	
#header, #primary, #secondary, #breadcrumb, #sidebar-left, #sidebar-right, #footer, #closure, .extra-links, #content .box { display:none }

#content { 
	color: #000; 
	font: 12pt Arial, Helvetica,"Lucida Grande", serif; 
	background: transparent;
	width: auto;
	border: none;
	margin: 0 5%;
	padding: 0;
	margin-left: 10%;
	
 	}
 	
#comments {
	page-break-before: always;
	}
	
a:link, a:visited {
	color: #520;
	background: transparent;
	font-weight: bold;
	text-decoration: underline;
	}

Depending on the set-up of your website you may decide to change which divs to display. This can be done by adding or removing from the line of code with 'display:none'.

W3C:

This CSS code in the print.css validates as CSS level 2.1

To do:

  1. Comment form. Should the comment form be shown or not? The comment form has a class named .box. If wanting to hide the comment form is this class unique?
  2. What should the layout, if any, of the comments be like?
  3. Determine the width of content printed.
  4. Needs peer review
  5. Needs cross browser and cross platform testing

Sources:

CSS Design: Going to Print
How To Create A Simple Print CSS For Your Site

Comments

Anonymous’s picture

Status: Needs work » Active