Using printer friendly CSS styles

This page explains how to use printer friendly CSS styles on your website. These styles are used only if a document is sent to a printer.

Create a new stylesheet in the CSS stylesheets application.
Name the stylesheet Printer styles and set the Code name to Printer_styles (for example).

Write the printer friendly CSS styles, for example:

CSS



.zoneLeft, .zoneRight, .zoneTopInfo, .zoneTop, .horizontalmenu, .zoneBottom {
            display: none;
}

.eventCalendarDetail .zoneLeft, .eventCalendarDetail zoneRight {
            display: block;
}

.eventCalendarDetail zoneRight {
            float: left;
}

.logonReg .zoneLeft, .logonReg .zoneRight {
            display: block;
}

.logonReg .zoneRight {
            float: left;
}

.zoneContent {
            float: left !important;
}

Tip: To hide elements that you do not want in the print version, add the display:none; style to the appropriate classes.

Add a link to the printer CSS stylesheet into the <head> tag of your master page:
1. Open the Pages application.
2. Select the root document of your website.
3. Switch to the Master page tab.
4. Add the link into the head section. For example:
```
<link href="CMSPages/GetResource.ashx?stylesheetname=Printer_styles" type="text/css" rel="stylesheet" media="print" />
```
5. Click Save.

The stylesheet applies to the print media, i.e. when your sites pages are sent to a printer.