Printer friendly CSS styles

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

1. Create a new CSS style sheet in Site Manager -> Development -> CSS style sheets, name it Printer styles and set its code name to Printer_styles, for example. See the simple example bellow for an illustration of the printer friendly CSS styles created for our default Corporate site.

.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;

}

Please note that you have to hide the all the elements that should not be visible in the print version. You can do this by adding display:none; to the given style.

2. Add to the master page header tag link to appropriate CSS style. For example:

Page url: http://devnet.kentico.com/docs/5_5r2/devguide/index.html?printer_friendly_css_styles.htm