PDF: PDF design settings using CSS

This feature is included in the ReportR plan. Contact us for more information.

Custom CSS allows you to change other elements of your design (eg. make answers larger, make buttons out of links, etc.) which are not included in the Design tab.

Make a CSS or Text-file with the changes you want, and upload it by clicking Upload CSS.

HTML Structure

An example HTML file can be found here. Please note that opening this file in the browser will not look the same as the PDF. This HTML file is an example to show the HTML structure and all used CSS classes which can be used to adapt the styling. 

It’s recommended to download the example file and to open it in your favorite text editor. Another option is to view the source in the browser with inspect element or by right-clicking on the page and choosing View Page Source: 

Header and Footer

The header and footer are inserted as separate files, therefore they are both inside a new body-tag.

The span with ID pagenumber will only be added in the footer if the “Show Page Numbers” setting is enabled.

The header and footer do not appear on the title page.

Title page

If enabled, the first page of the PDF will have a section element with the following classes:

Example:

<section class="page title-page">
</section>

Pages

Every page content will be inside a section element with the classes page and page-container. The page-container class ensures that there’s a page break after this element.

All pages except the title page have an extra ID selector which can be used to target items on specific pages.

Example:

section.page-container {
   page-break-after: always;
   page-break-inside: avoid;
}


section#page_1 {
   color: #FF0000;
}

Widgets

Every widget has it own styling which can be found in the example HTML document. Please note that editing the layout of chart elements (spider- and column chart) will not be possible as the configuration and styling is applied at runtime where an SVG element will is created.

To target a single widget, use the order of the widget to create the selector. For example, widget with order 4 has the following CSS selector: #widget_4. The widget order can be found next to the widget name in the list of widgets:

To select all widgets with the same type use the following selector:

Examples:

#widget_3 {
   color: green;
}

.template-widget.text {
   margin-bottom: 20px;
}

CSS

Most of the CSS values are defaults, but some CSS values are inserted dynamically like font sizes and color values based on the PDF settings. To overwrite these values, mark the CSS rule as important.

Example:

.font-size {
   font-size: 15px !important;
}

Other examples:

Header and Footer

Show header and footer also on title page

#headerfile.hide, #footerfile.hide {
   display: block !important;
}

Hide header

#headerfile header {
   display: none !important;
}

Hide footer

#footerfile footer {
   display: none !important;
}

Table Widget

Table header background

th {
   background-color: #4CAF50;
   color: white;
}