ReportR: PDF design settings using CSS

PDF: PDF design settings using CSS


Essential
Professional
Enterprise
ReportR


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.


Use the inline CSS editor located in the Design tab to style your PDF using your own custom CSS. All you need to do is just start typing! Watch below and see. Alternatively, you can copy and paste into the inline editor.


Custom CSS GIF


This guide is only applicable for PDFs created after November 18th 2019. For PDFs created before this date, head to the Extra Options tab in the ReportR view and click Upgrade. 

Please note that this upgrade can have a negative effect on PDF's with custom CSS. We suggest to make a copy of your PDF first and upgrade the copied PDF to test.


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 way to view the HTML code is by going to the Design tab. Choose which section you want to preview and click Generate HTML. Now the PDF report you have created will appear.


CSS - View HTML


To view the source code for a section, right-click on the section and choose Inspect if you're using Chrome (recommended) or Inspect element if you're using Mozilla Firefox.


PDF Custom CSS view page source


Now if you click on the circled icon below which appears in the Inspect console, or enter Ctrl+Shift+C, you can hover on any part of the page to view the HTML code.


PDF Custom CSS view HTML code



Header and Footer

Headers are inside a div with class header-container while footers are inside a div with class footer-container.


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


Title page

The title page is considered as a separate page. The body is tagged with the ID title-page.


Final page

Just like the title page, the final page is considered as a separate page. The body is tagged with the ID final-page.


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


ReportR CSS - Widget number


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


Widget Type

CSS selector

Text

.template-widget.text

Questionblock KPI

.template-widget.questionblock_kpi

Table

.template-widget.table

Spiderchart

.template-widget.spiderchart

Formula KPI

.template-widget.formula_kpi

Column Chart

.template-widget.column_chart

Image

.template-widget.image

Custom Respondents Table.template-widget.custom_results_by_respondent_table
Bar Chart.template-widget.bar
Gauge.template-widget.gauge_widget
Formula Ranking.template-widget.formula_ranking


V
Vincent is the author of this solution article.

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.