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).

CSS

@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.

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

Change background color of slides

CSS

.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:

CSS

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

Font colors

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

CSS

.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

CSS

.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:

CSS

.slide-header {
    display: none;
}

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