Kentico CMS 7.0 Developer's Guide

Printer friendly CSS styles

Printer friendly CSS styles

Previous topic Next topic Mail us feedback on this topic!  

Printer friendly CSS styles

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

This chapter explains how to use 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 stylesheet in Site Manager -> Development -> CSS stylesheets, name it Printer styles and set its code name to Printer_styles, for example. See the simple example below for an illustration of the printer friendly CSS styles created for our default sample Corporate site.

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

}

 

Please note that you have to hide 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 a link to this CSS stylesheet into the <head> tag of your master page. This can be done by selecting the root document of your website in CMS Desk -> Content -> Edit and switching to the Master page tab. For example:

 

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