Using printer friendly CSS styles

✖
Copy to clipboard

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

  1. Create a new stylesheet in the CSS stylesheets application.

  2. Name the stylesheet Printer styles and set the Code name to Printer_styles (for example).

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

  4. 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 page 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.