Printer friendly CSS styles

   Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic! Mail us feedback on this topic!  

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:

 

<link href="CMSPages/GetCSS.aspx?stylesheetname=Printer_styles" type="text/css" rel="stylesheet" media="print" />

 

 

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