So far, you've styled your Magento store for electronic screens, but what about for those customers who want to print product pages? Even in this digital age, some customers like to print details of a product and review them offline.

You can specify a separate CSS file in your Magento theme to be applied when your documents are printed. By default, Magento inherits the print.css file in the /skin/frontend/default/default/css/ directory, which provides some basic styling for printed documents, such as removing navigation and the store's footer, as shown in the following screenshot:

As you can see, there is still some work to be done here, as the sidebar content (the Facebook box) isn't functional or useful when the page is printed!

You can overwrite the print.css style sheet for your theme by creating a file called print.css in your theme's css directory (for example, /skin/frontend/default/m18/css/), but this will overwrite some of the work that the base print style sheet already does to help style your store's pages better for printing. Instead of overwriting this file, you can add another CSS file to add custom style instructions for printing.

To do this, open your theme's local.xml file (in the /app/design/frontend/default/m18/layout/ directory) and add the highlighted XML instruction within the <default> handle:

<default>
<reference name="head">
  <action method="addCss">
      <name>css/print-custom.css</name>
    <params>media="print"</params>
  </action>   
</reference>
</default>

You can now create a new CSS file called print-custom.css in the /skin/frontend/default/m18/css/ directory and begin to add the print CSS specific to your new Magento theme:

.sidebar {
display: none;
}

If you now refresh the print preview of the page, you will see that the sidebar has been hidden in the following screenshot, and the content printed is much more useful!