Tips to improve print style in Drupal

Submitted by Nicola Rainiero on 2012-07-28 (last updated on 2015-04-25)

The CSS files in the default theme folder are an excellent starting point, because they are compatibles in almost all browsers and well tested, really in my site I modified and adapted the Bartik theme. Sometime modifications lead bad surprises in print style and so you need hide a few elements, secondly you can add two useful features: complete address in the links and signature under header.

What is Cascading Style Sheets (CSS)? "It is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language" (definition taken by Wikipedia). A famous example on the big potentialities of this language is "css Zen Garden: The Beauty in CSS Design" page, where web designers create for the same content different sheet styles.

When I had adapted Bartik sub-theme, I focused mainly on style.css and a little on layout.css. The first describe the style of all the elements that compose a web page: title, images, lists, paragraphs, tables, etc, The second the pagination. On print.css, the print style sheets for Bartik, nothing! It worked fine and above all was not an immediate priority.

Well! Some time after that I have fixed the basic page style, I focused finally on print.css (in the remote future I will try to fix the CSS for mobile devices!). The changes are showed in the following two images:

original print.css modified print.css
original print.css
modified print.css

Before starting

Check if your active theme has a print style sheets. How? It's sufficient to edit in "sites/all/themes/mio_tema/" folder and search or add this string:

stylesheets[print][] = css/print.css

In the beginning among square brackets the print word describes the media type and on the right side there is name and location of the CSS file for the cited type. This is the Bartik default description.

Another problem is to find the respective CSS selectors, without time-wasting looking the HTML source. I actually use Firebug, an ntegration of Mozilla Firefox that you can download at the following link. How it works? In the web page select the element and click the right mouse button, on the drop-down menu select Check element with Firebug: it will open a window in the bottom with all the HTML informations. Look an example:

Select the image on the left, click RBM and in the menu Check element with Firebug On the new bottom window there is the relative HTML code and in the upper the selected image is highlighted.
Select the image on the left, click RBM and in the menu Check element with Firebug
On the new bottom window there is the relative HTML code and in the upper the selected image is highlighted.

Recently I have found a similar function in Google Chrome and Opera. In this case, you have to click the Inspection element item.


The CSS rules are many but I want to bring out one in particular: when in the HTML code the element is signed like this id="SELECTOR" in the CSS you must use #SELECTOR, otherwise class="SELECTOR" then .SELECTOR.

Let's start!

Hide useless elements

In a printed page colors, backgrounds, menu, and other items are less interesting than they are displayed in the monitor. Bartik hides almost all by itself, but doesn't know that I moved the language selector and search blocks in the header! So I have to find these selectors in the page and then inform my print.css file to do not display them. Using Firebug I found:

<form id="search-block-form" accept-charset="UTF-8" [...]
<div id="block-locale-language" [...]

In the print.css I add these two id elements with an unequivocal property:

#block-locale-language { 
  display: none; 

I also added the following descriptors:


Innovations on the print style sheets

I modified the font size and line height in this way:

body { 
  width: 600px; 
/* codice aggiunto */ 
 font-size: 12pt; 
  line-height: 1.9; 

The links printed in blue color are insignificant, it is better having them coloured in black and bold and with the ability to read the complete web address. I choose to limit this last feature to links included in paragraphs and lists.

#content a {color: #000; font-weight:900;}
p a:after,
ul li a:after {
  content: " [" attr(href) "]";

[2012-12-11] In order to hide the link of some classes, I use the following code:

a[class="footnote-label"]:after {
content: "";

The signature was a problem! I tried varied solutions to having the localization in Italian and English, but with bad results. I changed the node.tpl.php template in a similar way as the "Posted on: [...] and last update on" that you can see down the title of my articles, but did not works very well. At the end I resolved using CSS code:

#header:after { 
position: relative; 
left: 115px; 
text-align: center; 
content: "by Nicola Rainiero -"; 
margin-bottom: 10px; 
border: 1px solid #bbb; 
padding: 3px 5px; 
font-size: 12pt; 
font-style: italic; 

The only alternative was create two different CSS as suggested in a topic of Drupal Community: Language based CSS on Multilingual Site, but I renounced this idea: too much work for only a string of text!

Last modification concerns the comment block, I moved it in a new page using this code:

#comments { 
   page-break-before: always; 




Related Content:

Nicola Rainiero

A civil geotechnical engineer with the ambition to facilitate own work with free software for a knowledge and collective sharing. Also, I deal with green energy and in particular shallow geothermal energy. I have always been involved in web design and 3D modelling.