---
url: https://docs.sysreptor.com/designer/faqs.md
---
# Report Design FAQs

These FAQs cover CSS and HTML for PDF report templates: page background, headers, fonts, markdown rendering, code blocks, and layout.

Using SysReptor (permissions, designs in projects, licensing) is in the [application FAQs](/faq/application). Install and ops questions are in [self-hosted](/faq/self-hosted) or [cloud](/faq/cloud). Exam students: [exam report FAQs](/faq/exam-reports).

::: details How to set solid color as page background?
Set background color for all pages

```css
@page {
    background-color: red;
}
```

Set background color only on the first page (cover page)

```css
@page:first {
    background-color: red;
}
```

:::

::: details How to set a header background color?

```css
@page {
    --header-background-color: red;
    --header-margin-bottom: 5mm;

    @top-left-corner { 
        content: "";
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom);
    }
    @top-center { 
        content: ""; 
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom);
        width: 100%;
    }
    @top-right-corner { 
        content: "";
        background-color: var(--header-background-color); 
        margin-bottom: var(--header-margin-bottom); 
    }
}
```

:::

::: details Why are my font styles (e.g. italic or bold) not working?
We provide some [preinstalled fonts](/designer/design-guides#fonts) that should work out of the box.

If you want to use custom font, make sure to [upload and include](/designer/design-guides#custom-fonts) them in your CSS.
:::

::: details Why are my images or markdown not rendered in the report?
Your design may reference the variable incorrectly. Make sure to use this syntax:

```html
<markdown :text="report.executive_summary" />
```

:::

::: details How to format links like normal text?
If you want all links to appear as normal text, use following CSS:

```css
a {
  color: inherit;
  text-decoration: none;
  font-style: inherit;
}
```

If you want only target specific links, define a CSS class:

```css
.link-none {
  color: inherit;
  text-decoration: none;
  font-style: inherit;
}
```

Then, add the defined class to your links.

HTML:

```html
<a href="https://www.example.com" class="link-none">https://www.example.com</a>
```

Markdown:

```md
[example.com](https://www.example.com){.link-none}
```

:::

::: details How to reference the filename in the report?
This is not possible, unfortunately.

However, if you want to display your filename in your report, you might define a custom report field (or generate a dynamic filename like `report_{report.customer_name}_{report.title}.pdf`) and copy the filename from the preview to the filename textbox.
:::

::: details How to highlight parts of code blocks with custom style?
Highlighting within code-blocks works with the attribute `highlight-manual` and the marker `§§` ([see also](/reporting/markdown-features#code-blocks)):

````md
```http highlight-manual
POST /§§important.php§§ HTTP/1.1
```
````

To customize the highlight style, add CSS styles for the `<mark>` tag, e.g.:

```css
mark {
    background-color: red;
}
```

:::

::: details How to reduce the padding of code blocks?
Add following rules to CSS

```css
pre code {
  padding: 0.3em !important;
}
```

:::

::: details How to increase the space between list marker and text in lists?
Add following rules to CSS

```css
/* Bullet list */
ul > li {
  list-style: "\2022    ";
}
/* Numbered list */
ol > li::marker {
  content: counter(list-item) ".   \200b";
}
```

:::

::: details How to use landscape page orientation?
SysReptor uses page orientation `portrait` by default. However, you can change that via CSS.

```css
/* Make all pages landscape */
@page {
    size: A4 landscape;
}
/* Only target specific pages via CSS named pages */
.section-landscape {
    page: page-landscape;
}
@page page-landscape {
    size: A4 landscape;
}
```

:::

::: details How to add markdown headings to table of contents?
SysReptor uses the CSS class `in-toc` to add headings to the table of contents. Optionally in combination with class `numbered` for chapter numbers.

```md
### Markdown Heading in ToC {.in-toc.numbered}
### Markdown Heading not in ToC
```

If you want to automatically add all markdown headings to table of contents, add following function at the top of your design's HTML code.

```vue
{{
    (function setMarkdownHeadingClasses() {
        new window.MutationObserver((m) => {
            document
                .querySelectorAll('.markdown h1,h2,h3,h4,h5,h6')
                .forEach(h => h.classList.add('in-toc', 'numbered'));
        }).observe(document, { childList: true, subtree: true });
    })()
}}
```

:::

::: info&#x20;
Need help or have questions? Get support and [connect with us and the SysReptor community](https://github.com/Syslifters/sysreptor/discussions/).
:::