Theming the printed version of your Drupal website
Thu, Mar 18, 2010 by Justin
A lot of times designers forget to make sure that their websites print out clean and readable. This means, when a user wants to archive a website as a hard copy, so they can reference it later, it can get messy. Instead of clicking some random print button on the page, most people will print by doing the most obvious: File > Print. In this blog I will explain how easy it is to theme a printed page.
Note: Some important things people print off the web are coupons and purchase orders, which is normally reminded on the web page.
The printed page will show the navigation menu system, a random blank white page, a bunch of ads, which form elements such as input boxes, and useless images. The content that most people really want is just a section on the cluttered page of ink. The solution is to clean these pages up, make it readable for even your grandmother, and most of all to save paper.
First step is to add a print.css file to all your printed pages, to do this is to add the code to your theme_name.info file.
stylesheets[print][] = print.css
Now in your theme create the print.css file which will only be called when you print the page.
Normally in my print.css I start by hiding most of the header, but not the logo because it makes it easier to remind myself which website I got the page from. I remove the navigation because obviously you cant click on paper. Most importantly, don't be worried about getting back to the webpage because the full url is printed at the top and bottom of the page.
Also, to make things easier, I change the font to a larger size and make the color black. I underline all the links, so that the default light coloured fonts are more readable. From here on out, I just theme the page based on File > Print > Preview, removing things that don't seem relevant to print. If there is another way to improve printing on the web, feel free to leave a comment below, and share your ideas.
Andy posted on March 25, 2010 6:32 am
No. Don't get the Zen theme. I strongly recommend you READ the docs of Drupal themeing and start from scratch. It really isn't that hard, and in my opinion you save a ton of time. It is NOT easier to come from Zen to another theme if you ask me. It's much easier to read through another theme's page.tpl.php file (and other files) to get a feel for what the variable names are (and they are in the Drupal docs).
You make your info file, you make your page.tpl.php file, the css files .I recommend you get the Conditional Comments module to add conditional IE CSS. Then you can add something like the following to your theme-name.info file:
conditional-stylesheets[if lt IE 8][all][] = ie.css
Syntax: conditional-stylesheets[conditional comment rule][type][] = filename.css
If you care about minifiying(which you should), then you'll need to manually minify this CSS as the module does not process the CSS with the Drupal caching functions.
In your info file, define regions: regions[content] = Content, etc.
In your page.tpl.php file print $content; and all the rest of the variables. Look at page.tpl.php for almost any theme and you can get the default Drupal variables as well.
Zen does not give you a head start. It gives you a huge headache. And why on earth does it have crap (hacks) in the CSS for IE5 Mac, IE 5.5, hiding from IE5, IE6 bad (slow) hacks like the position:absolute hack, and a whole lot more.
In terms of debugging print CSS, it's not the easiest thing on IE (on Firefox, just use Web Developer Toolbar and tell it use Print style). My setup is with 3 VMs (soon to be 2 probably, removing IE6; will be adding an IE9 VM one when it comes out; Linux box). I have PDFCreator installed on all the VMs, because sometimes IE's print preview does not suffice. Work on your CSS, reload, print (or try to use print preview, it will save time). Once everything is working you should be okay. Issues I've found in IE 6 are mostly to do with using pixel widths on the screen CSS and they do not work exactly the same on print CSS (this is kind of not surprising). (Do use the IE Developer toolbar on IE 6 and 7, and the development tools on IE 8 of course.)
One of my sites, http://anfplaylists.com uses a theme I made from scratch and non-minified, optimised, etc has less than 500 lines altogether (this includes IE CSS, main CSS, print CSS, Views tpl.php files, and more; total: 9 files (avoided use of images)).
I'm not a designer by trade but I really believe in simple designs and to me, Zen is extremely complex and the automatic praise is without reason, especially for the simple blog sites out there that use Drupal.
Justin posted on March 19, 2010 9:13 pm
Thanks Garrett for the response,
The zen print.css is a great example to look at. The CSS trick to make links show the URL is:
a {
content: " (" attr(href) ") ";
}
Which is pretty cool unless you got some massive links such as google map urls etc.
Garrett Albright posted on March 19, 2010 6:17 pm
Check out the Zen theme - it comes with a great, but fairly basic, print.css included. It basically hides the sidebars, flattens the colors, and even does a spiffy CSS trick to make links show the URLs they link to. Fortunately IE 6 and up support printing stylesheets.
Drupal Theme Garden posted on March 19, 2010 11:46 am
Thanks for the article. Could you give some example of print.css file. What's about compatibility with moz/ff IE/6,7 ...?
Post new comment