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