Skip to main content
Version: 4.1

Customize for PDF export

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 */
}

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.

info

Insert the following code snippets between the @media print brackets.

Change background color of slides​

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

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; 
}

Font colors​

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

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

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; 
}

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;
}

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