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:
- 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?
- What should the layout, if any, of the comments be like?
- Determine the width of content printed.
- Needs peer review
- Needs cross browser and cross platform testing
Sources:
CSS Design: Going to Print
How To Create A Simple Print CSS For Your Site
Comments
Comment #1
Anonymous (not verified) CreditAttribution: Anonymous commented