Styling the layout of your Joomla! template for print

There are, as we have seen, quite a few elements of our Joomla! website that we do not need to be printed.

Getting ready

The elements that are not of use when we print a page include the search box, navigation links, the Powered by Joomla! footer, and advertisements.

How to do it...

1. 1. You can hide the elements of the page, which are highlighted in the previous screenshot, by using CSS in the print.css file that you created earlier for your template.

   #tabmenu,
   #search,
   .bannergroup,
   .buttonheading,
   . module_menu,
   #power_by,
   #syndicate
   {
   display: none;
   }
   

2. 2. You can now see a more suitable view for printing, which focuses upon the content in the page:

Notice that the breadcrumb is still visible (Home>> About Joomla!). Breadcrumbs can be useful in orientating visitors who print content from your website, as it helps to identify a potential path they can follow through your website to find the content they printed online.

How it works....