Confluence 3.5 : Editing the PDF Stylesheet
This page last changed on Mar 10, 2011 by pwatson.
Before You StartPlease take note of the following points:
Customising the PDF LayoutYou can add your own HTML to customise the title page, page headers and page footers in the PDF output. To customise the PDF layout:
Customising the PDF StylesheetYou can adjust the appearance of the PDF pages by editing the CSS stylesheet. To customise the PDF Stylesheet:
Default CSS Settings
PDF Export MethodsThere are two PDF export methods (see Exporting Confluence Pages and Spaces to PDF):
To make your PDF layout customisations apply to a single page exported to PDF, either:
Examples of Basic CustomisationsThis section provides examples of typical customisations that you can add to your PDF stylesheet. Once you are familiar these basic customisations, you may wish to try some advanced customisations. Page CustomisationsModifications to page and margin sizes are made in the @page CSS rule. To make changes to this rule, implement the following type of code in the PDF stylesheet. @page { /*Page specific styles (that is, customisations of properties) go here*/ } Customising the Page SizeThe default page size is based on the locale of your Confluence server. For example, if this server is located in the US then the default paper size of your PDF export will be US Letter size (8.5 inches wide by 11 inches long). If the server is located in Australia, the default paper size will be A4 (210 mm wide by 297 mm high). To modify the page size to A4, add a size property to the top of the rule like this: @page { /*The A4 paper size is 210 mm wide by 297 mm high*/ size: 210mm 297mm; } More information about paper sizes can be found on Wikipedia. Customising the Page MarginsTo add a margin of 15 mm to a paper size of A4, your CSS @page rule would look like this: @page { size: 210mm 297mm; margin: 15mm; } Customising the Table of ContentsBy default, a table of contents will be generated after the title page, or at the beginning of the document if no title page is defined in the PDF layout. To make changes to the look and layout of the table of contents, define the appropriate CSS rules in the PDF stylesheet. For details about the default CSS rules applied to the table of contents, download the default CSS rules (from the link above) and examine the specific rules with toc in their name. Disabling the Table of ContentsTo prevent the table of contents from being generated in your PDF document, add the div.toc rule to the PDF stylesheet and set its display property to none: div.toc { display: none; } Changing the Leader Character in the Table of ContentsThe leader character is used to link the name of a heading in the table of contents with its page number. The page number is usually aligned to the right-hand margin of the page. By default, the leader character is the '.' (dot) character. You can change it by customising the leader character CSS rule span.toclead:before and adding this to the PDF stylesheet. To change the leader character to a solid line, modify the CSS rule to: span.toclead:before { content: leader(solid); } To change the leader character to spaces, modify the CSS rule to: span.toclead:before { content: leader(space); } (Be aware that using a space as a leader character can make the table of contents difficult to read.) Wrapping Long WordsIn order to break long words or words that are not separated by whitespace, add a selector to the PDF stylesheet containing the word-wrap property with a value of break-word: div { word-wrap: break-word; } Adding a Title PageYou can create a title or cover page to your PDF document using HTML. Use the 'PDF Space Export Title Page' section of the PDF layout to do this. Adding a New Title PageThe following example uses HTML with an inline CSS rule to generate a title page. Including Content Above Table of Contents in Default Title PageThe following example includes content above the automatically-generated table of contents that appears on the default title page, so that your title page includes your own content plus the table of contents. Adding an Image to your Title PageIn the examples above, the title page includes an image called 'titlepage.png', centred in the middle of the page. The image is attached to a Confluence page and is referenced via its relative URL (that is, we use only the last part of the URL, excluding the Confluence site's base URL). Follow these instructions to include an image on your title page:
Adding Headers and FootersYou can add headers and footers to your PDF pages using HTML. Use the 'PDF Space Export Header' and 'PDF Space Export Footer' sections of the PDF layout to do this. For simple headers and footers, plain text is enough. The following example adds a simple copyright notice. Adding Page Numbering to a Header or FooterTo add page numbering to your documentation, you need to combine some customised HTML in the header or footer with some customised CSS in the PDF stylesheet.
Analysing the above CSS selector rule in more detail:
General FormattingYou can use the stylesheet to customise the output of just about anything else that will influence the look and feel of the final document. This includes fonts, tables, line spacing, macros, etc. The export engine works directly from the HTML output produced by Confluence. Therefore, the first step in customising something is to find a selector for the HTML element produced by Confluence or the Confluence macro. Then add a CSS rule to the PDF stylesheet. Your customisation will appear in the PDF export. Notes
Related TopicsAdvanced PDF Stylesheet Customisations |
![]() |
Document generated by Confluence on Mar 16, 2011 18:20 |