• Products
  • Documentation
  • Resources

Advanced PDF export customizations

In Q2 2023 we released an update to PDF export that renders Confluence pages more accurately. However, this update does not support the customizations described in this page and will fall back to the older method of PDF export that does not render Confluence pages as accurately if these customizations are detected.

Watch our progress on export features to see future updates.

This page provides information about 'advanced' PDF export customizations. These expand upon the regular customizations described in Customize exports to PDF.

The information below is for advanced users. Be aware that the advanced customizations described below require knowledge of certain parts of Confluence, and of CSS and HTML. Customizations are not supported by Atlassian, so our support engineers won't be able to help you with these modifications.

 

Header and footers

Adding headers and footers to single page exports

Single page exports don't support adding HTML headers and footers via the PDF export page, but you can use CSS rules in the PDF stylesheet field (found within Space SettingsPDF export in the Look and feel card) to produce headers and/or footers for a single page export.

For custom headers, define any of the following rules within your @page rule: @top-left@top-center, and @top-right. These rules allow you to define the content of the left-hand side, center and right-hand side of your page's header area, respectively.

For custom footers, define @bottom-left, @bottom-center and @bottom-right rules within your @page rule.

For example, the following rules add a document title at the center of the header and a page number at the center of the footer:

CSS - PDF Stylesheet

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 @page { @top-center { content: "Document Title Goes Here"; /* This is the content that will appear in the header */ font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; font-size: 8pt; } @bottom-center { content: "Page " counter(page); /* This is the content that will appear in the footer */ font-family: ConfluenceInstalledFont, Helvetica, Arial, sans-serif; font-size: 8pt; } /* Any other page-specific rules */ }

Notes:

  • The font-family and font-size properties ensure 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.

  • 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 the header or footer, add HTML to the Header or Footer fields of the PDF Layout.  

The following example uses an HTML img element with src attribute to add an image to the left of the header. The src attribute refers to an image attached to a Confluence page. The image element is usually placed within a div element container.

HTML - PDF Layout: Header

1 2 3 <div style="margin-top: 10.0mm;"> <img src="https://confluence.atlassian.com/download/attachments/12346/header-image.png" /> </div>

In the example above, the header includes an image called 'header-image.png'. The "12346" in the src attribute is the ID number of the page to which the image is attached.

 

Follow these instructions to include an image on your page:

  1. Attach the image to a Confluence page.

  2. View the list of attachments on that page, then right-click the image and copy its location.

  3. Paste the link into the appropriate src="" attribute in your PDF Stylesheet, as shown above.

  4. Edit the image URL so that it is relative, by removing the first part of the URL before /download/....

Notes:

  • This example uses an inline CSS property margin-top in the style attribute to force 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.

  • 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 attach it to your Confluence page again. If you prefer to keep the image size and want to move the content lower instead, you can do so by configuring the margin-top properties in the @page CSS rule.

  • 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 center or right-hand side of a page by adding either the text-align:center or text-align:right properties to your style attribute. For example, to align the header image to the right-hand side of the page, your style attribute would look similar to this: style="margin-top:10mm; text-align:right".

 

Adding a dynamic title to the title page

When you export an arbitrary set of pages from Confluence, you may like to have a corresponding title added to the cover (or title) page automatically. This can be done (in a somewhat irregular way) by using the top level item from the default table of contents as the title. This method relies on having the exported pages structured as sub-pages of the top-level page. In other words, the pages to be exported should consist of a page (at the top-level) and all of its child pages. The result is that the title that appears on the cover page changes depending on the top-level page that is used for the export.

The CSS below moves, and styles, the top-level TOC item for use as the title on the cover page, and turns off the leader and page number normally associated with this item in the TOC.

CSS - PDF Stylesheet

1 .fsTitlePage { position:relative; left:0px; } /* Turn off the default section numbering for this TOC item */ .toclvl0:before { content: &quot; &quot;; counter-reset: chapter 0; } /* Hide the default page numbering for this TOC item */ .toclvl0 .tocnum { display: none; } /* Move and style this TOC item */ .toclvl0 { position:absolute; top:250px; font-size: 42px; font-weight: bold; margin: 72px 0 4px 0; text-align:center; }

 

Additional Help