The woof and the warp weblog about web stuff.

So how do you tackle a good looking print page

First of all I want to point out that I try to avoid using a print icon or something like that in the template, printing is a browser functionality and not a feature in a website.

The start of your print page design adventure is adding a print css file to your Joomla! template css directory which you can simply call "print.css".

To hook up that file with your template you'll need to open your template "index.php" file and find the following line:

<jdoc:include type="head" />

That piece of code is what renders Joomla! meta data and javascript and css files. Below that line you need to add the following html:

<link rel="stylesheet" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/css/print.css" type="text/css" media="Print" />

Now once that file is created and the line is added to the head section of your template you can start crafting your print page css.

Things like; read more links, last 5 forum posts, large header images, ads or other clickable items are not really useful when you are reading the content on a piece of paper. That's why we are going to hide everything that doesn't need to be printed.

You can do two things, look for what you want to hide in your template file or just do a view source in your browser. I usually start with the template file to hide the large chunks and after that I start looking in the source for things like; read more links which are rendered by the CMS itself.

In the css file you just start adding classes and id's to a list that is set to display none. Make sure you leave your content container untouched to keep it visible.

#nav-container,
#promo-container,
#middle-sidebar,
#right-sidebar,
#more-container,
p.read-more,
div.items-pagination,
div.items-links,
div.after-content-events {
	display: none;
}

You can test what is happening in your browser by using the print preview function.

When you are at the point where you only have the content left that you would like to show on print you can start adding some css to the print.css file to make it look a little more beautiful, there are limits but you can add some eye candy.

Now, one of the reasons why you should create print pages is my dad. He is one of those old school guys that prints pages from the internet to read instead of reading on screen and there are probably more oldies like him that do the same :-)