|
|
Printer friendly CSS styles |
|
|
|
|
|
Printer friendly CSS styles |
|
|
|
|
|
|
Printer friendly CSS styles |
|
|
|
|
|
Printer friendly CSS styles |
|
|
|
|
|
|
||
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 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 a link to this CSS stylesheet into the header 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" /> |