Confluence Docs 3.0 : Advanced PDF Stylesheet Customisations This page last changed on Sep 17, 2009 by ggaskell. This topic provides information and details on popular PDF stylesheet customisations. These expand upon the basic customisations described in the Editing the PDF Stylesheet topic. On this page: Page Customisations Changing the Page Orientation Customising Specific Page Margins Page Header and Footer Customisations Adding Headers and Footers to Single Page Exports Adding Images to Headers and Footers Page Selector Rules ## Page Customisations Modifications to page and margin properties are made in the `@page` Cascading Style Sheet (CSS) rule. As described in Editing the PDF Stylesheet, all CSS rule customisations are implemented in the 'PDF Export Stylesheet' section of the space's PDF Stylesheet. #### Changing the Page Orientation To change the page orientation of your PDF space exports, reverse the order of the values declared in the `@page` rule's `size` property, since the first and second values of this property represent the width and height of the page, respectively. For example, to generate PDF space exports in A4-sized landscape orientation, your `@page` rule might look like this:
    @page
    {
    /*A4-sized pages in landscape orientation are 297 mm wide by 210 mm high*/
    size: 297mm 210mm;
    }
#### Customising Specific Page Margins To set the margins of each side of a page independently of the other, you can declare each margin size in the `@page` rule using the following properties:
Properties | Description
--- | ---
`margin-top` | Margin height at the top of the page.
`margin-bottom` | Margin height at the bottom of the page.
`margin-left` | Margin width on the left of the page.
`margin-right` | Margin width on the right of the page.
For example, to generate PDF space exports with top and bottom margins of 1 inch and left and right margins of half an inch, your `@page` rule might look like this:
    @page
    {
    margin-top: 2.54cm;
    margin-bottom: 2.54cm;
    margin-left: 1.27cm;
    margin-right: 1.27cm;
    }
## Page Header and Footer Customisations #### Adding Headers and Footers to Single Page Exports As mentioned in Editing the PDF Stylesheet, custom headers and footers by default, only apply to 'space exports' and not 'single page exports'. However, it is possible to add CSS rules to your PDF export stylesheet that allow custom headers and footers to appear in single page exports. To make custom headers appear in single page exports, you need to define custom `@top-left`, `@top-center` and `@top-right` rules within your `@page` rule for content that appears within the left-hand side, centre and right-hand side of your page's header area. Similarly, to make custom footers appear in single page exports, you need to define custom `@bottom-left`, `@bottom-center` and `@bottom-right` rules within your `@page` rule for content that appears within the left-hand side, centre and right-hand side of your page's footer area. To add a document title to the centre of a header and a page number to the centre of a footer (with the word 'Page' preceding the page number), you can add the following header (`@top-center`) and footer (`@bottom-center`) rules within the `@page` rule of your PDF export stylesheet like this:
    @page
    /* Any page-specific properties */
    {
        @top-center
        {
            content: "Document Title Goes Here";
            font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
            font-size: 8pt;
        }
        @bottom-center
        {
            content: "Page " counter(page);
            font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif;
            font-size: 8pt;
        }
        /* Any other page-specific rules */
    }
| The `font-family` and `font-size` properties in these header and footer rules ensures that the header and footer text is rendered in the same default font style used for the body text (based on the default CSS rules). Please note that it is not possible to use this method to insert images (stored as attachments within your Confluence instance) into the headers and footers of single page exports.
#### Adding Images to Headers and Footers To insert an image into a header or footer, you will need to edit the 'PDF Export Header' and 'Footer' sections of the PDF stylesheet and use an XHTML `img` element with `src` attribute to refer to an image attachment within your Confluence instance. This is usually placed within a `div` element container. To add an image to the left of the header, you can add XHTML code to the 'PDF Export Header' that references the image, like this:
    <div style="margin-top:10mm">
      <img src="/download/attachments/12346/header-image.png"/>
    </div>
In the example above, an image called 'header-image.png' is attached to a Confluence page and is referenced via its relative URL (that is, without the Confluence site's base URL component). You can obtain the URL of an image attached to a Confluence page by viewing the list of attachments on that page and moving your mouse over the attachment's name. The URL of the image should appear in your browser's status bar or you can copy the link.
| This code uses an inline CSS property in the `style` attribute to set formatting properties specific to this header image. The `margin-top:10mm` property forces the image away from the top of the page by 10mm. This comes in handy when your header image is large enough to touch or spill over the top of the page. Likewise, for footers, you can use the `margin-bottom:XXmm` property to force an image away from the bottom of the page by 'XX' mm. Be aware that very large images can spill over into the body of a page or alter the position of text or other elements used within a header or footer. In such situations, it is recommended that you reduce the size of the image and then re-upload it to your Confluence instance. By default, a header or footer image is aligned to the left-hand side of the page. However, you can align this image to the centre or right-hand side of a page by adding either the `text-align:center` or `text-align:right` properties, respectively to your `style` attribute. For example, to align the header image (above) to the right-hand side of the page, your `style` attribute would look similar to this: `style="margin-top:10mm; text-align:right"`.
To add an image to a footer, add similar XHTML code consisting of an `img` element and `src` attribute to refer to an image attachment within your Confluence site. Incorporate the inline CSS property `margin-bottom` to separate the image aware from the bottom of the page if necessary. ## Page Selector Rules If your PDF exports are destined for double-sided printed media (for example, books), you can define different customisations for left- or right-hand pages. This is achieved through two CSS pseudo-classes 'page selectors' that you define as separate rules within the PDF export stylesheet. Use the `:left` psuedo-class with the `@page` CSS rule to define customisations specific to left-hand pages and the `:right` psuedo-class with `@page` to define customisations for right-hand pages. You can use these page selector CSS rules in your PDF export stylesheet to define alternating left and right margins that allows room for binding a double-sided document, as shown in the following example:
    @page :left {
      margin-left: 3cm;
      margin-right: 1.27cm;
      /* Any other left-hand page-specific properties and rules */
    }

    @page :right {
      margin-left: 1.27cm;
      margin-right: 3cm;
      /* Any other right-hand page-specific properties and rules */
    }

Document generated by Confluence on Nov 05, 2009 23:36