Theming the printed version of your Drupal website

March 18, 2010
blog author


Team Lead

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 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.