Custom CSS allows you to change elements of your design (e.g., make answers larger, create buttons with links, etc.) that are not included in the Design tab. You can make use of the HTML view to preview your changes.
Professional Enterprise 
ReportR DistributR Use the inline CSS editor located in the Design tab to style your PDF using your own custom CSS. Alternatively, you can copy and paste it into the inline editor.
What are the advantages of using custom CSS?
- It helps brand recall – it helps you recreate your company's branding entirely to make the survey match and will therefore enable customers to immediately identify the survey with your company.
- Greater flexibility to tweak the design – check out the examples below to see how many things you can change. If there are a few things bothering you about the way the survey appears, CSS enables you to tailor the survey style in all details.
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 PDFs with custom CSS. We suggest making a copy of your PDF first and upgrade the copied PDF to test.
This guide will teach you:
1. HTML Structure
1.1 Generate HTML
1.3 Title page
1.4 Final page
1.5 Pages
1.1 Generate HTML
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 that can be used to adapt the styling. It’s recommended to download the example file and to open it with 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 (Cover page, final page or page content) and click Generate HTML. Now the PDF report you have created will appear.
To view the source code for a section, right-click on the section and choose to Inspect.
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.
1.2 Header and Footer
Headers are inside a div with a class header-container, while footers are inside a div with a class footer-container.
The header and footer do not appear on the title and final page.
1.3 Title page
The title page is considered a separate page. The body is tagged with the ID title-page.
If you want to set a background page for your cover page, the ideal height and width are 1121 px and 810 px.
1.4 Final page
Just like the title page, the final page is considered a separate page. The body is tagged with the ID final-page.
1.5 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 that 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;
}2. Widgets Classes
Every widget has its 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, a 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:
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 |
What's next?
- Conditional Rendering is a way of displaying elements based on a condition. It allows you to create simple conditions inside a widget and reduce the number of widgets and rules. With Conditional Rendering, you can render different UI markups based on certain conditions.
- The custom results by respondent table is a dynamic type of widget that will add records automatically to the table once you have set it up. You can set the maximum number of records to show and set the table to sort records from low to high or high to low.
- The text widget allows you to write and display your content in your report. You can use it to give further information about questions, give feedback or explain a particular answer. This is an absolutely essential building block of your PDF report.