Introduction

In addition to presenting a Confluence article, the Presenter also allows you to export your presentation as PDF.

Export to PDF only works in Chrome for the time being. The button will be disabled in other browsers. 

The design of the PDF is based on the design of your theme. If you want to style certain elements in the PDF differently or even omit them, I will explain in this tutorial how you can do it. 🙂

Step 1: Go to theme editor

Go to the theme editor of the theme from which you want to style the PDF. Then scroll down to the "Styling" section, where you will now insert your CSS code to style the PDF.

Step 2: Setup

The CSS code for styling the PDF export is placed in the @media print area, which is enclosed in braces (see code snippets below).

@media print {
  /* here is the right place for your code */
}
CSS

Make it easy for yourself and copy the above code and paste it into your editor.

Step 3: Start styling

When styling your PDF export with Presenter you have many options. You can hide or re-color elements such as the slide header/footer in the PDF export and give the background of all slides a new color.

(lightbulb) Insert the following code snippets between the @media print brackets.

Change background color of slides

.slide-background {
    background-color: #3BA282 !important;
 }
CSS

Instead of #3BA282 you can insert your own color value here. Note that !important must be specified afterwards, otherwise the code will not work.

Change colors

Element colours

You can recolor entire elements. To do so, call the element you want to recolor and enter the new color value and the definition !important.

Example to re-color the header:

#slide-header {
    background-color: #3BA282 !important; 
}
CSS

Font colors

You have the possibility to change the color of all fonts with the following code snippet:

.reveal {
    color: #3BA282 !important; 
}
CSS

For example, if you only want to change the font color of heading 1 (also known as h1), you specify your code as follows

.reveal h1 {
    color: #3BA282 !important; 
}
CSS

Hide elements

In addition to re-coloring elements, you also have the possibility to make whole elements such as the header/footer disappear during PDF export.

To do this, call up the element and write display: none behind it.

Let me show you an example:

#slide-header {
    display: none;
}
CSS

This calls the slide header element and defines that the element should not be displayed during PDF export.

Step 4: Export your Confluence page

  1. Define your PDF style and save the changes to the theme.

  2. Open a Confluence article and select "Present" from the menu.

  3. Click on the menu item to the right of "Start presentation" in the Presenter dialog.

  4. Select "Export to PDF".

  5. Choose "Save as PDF" at destination.

  6. Save your PDF - voilà

We hope this tutorial helped you to style your PDF as desired 🙂