Custom CSS

Each template can carry its own stylesheet. Use it to set page margins in millimetres, print "Page 1 of 4" in a corner, style tables the way your company does, stack page-layout columns, or bring over a stylesheet you used with Confluence's own PDF export.

PDFs are drawn without a browser, so a stylesheet applies the properties a PDF can show and the editor flags everything else, line by line, as you type.

Where to find it

Go to Confluence Settings → PDF Exporter → Templates
Edit a template and open Custom CSS
Write your stylesheet, or start from Insert example, a selector or a recipe in the Reference below the editor
Save the template

To see the result, open Export to PDF on a page and pick the template: the export dialog's preview applies the stylesheet. The small preview in the template editor does not.

What it applies to

Part of the stylesheet	Applies to
Rules such as `h2 { … }` or `th { … }`	Every exported page, in a merged PDF too. Not the cover page or the generated table of contents, which the app draws itself
`@page` size and orientation	The whole document
`@page` margins	Content pages and the table of contents. The cover keeps its own layout
`@page` corner text (`@bottom-right` …)	Content pages. Skips the cover and table of contents, like the template's footer, and counts pages from the first content page

Properties

Property	Notes
`color`, `background-color`	Hex, `rgb()` or colour names. `background` works when its value is a plain colour
`font-size`	`pt` or `px`, or keywords such as `small`
`font-weight`, `font-style`	`bold` / `normal`, `italic`
`text-align`, `text-decoration`, `text-indent`, `line-height`	`line-height` takes a number such as `1.5`, a percentage or a length
`margin`, `margin-top` … `margin-left`	`pt`, `px`, `mm`, `cm` or `in`
`border`, `border-top` … `border-left`	e.g. `1px solid #dfe1e6`
`width`, `height`	Images only, as a length
`display: none`	Leaves the element out of the PDF
`display: block`	On page layouts or their columns: stacks the columns one below the other, full width
`page-break-before`, `page-break-after`	`always` starts a new page (`break-before: page` works too)

Not available: padding, font-family (PDFs use the app's bundled fonts), shadows, position, flexbox and grid, page-break-inside, @media, @import and @font-face. The editor lists each of these as a warning with the line it's on.

Colour, size, weight, style, alignment and line height set on a block such as a panel or a quote carry to the text inside it, as in a browser.

Page setup with @page

@page {
  size: A4 portrait;              /* A4, letter or legal; portrait or landscape */
  margin: 25mm 20mm 20mm 20mm;    /* top right bottom left, or margin-top … */

  @bottom-left {
    content: "ACME Corp · Internal";
    font-size: 8pt;
    color: #6b778c;
  }
  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font-size: 8pt;
  }
}

The six corner boxes are @top-left, @top-center, @top-right, @bottom-left, @bottom-center and @bottom-right. content takes quoted text, counter(page) and counter(pages); the boxes take font-size, color, font-weight and font-style. Text in a top box replaces the template's header, and text in a bottom box replaces its footer.

Selectors

Selectors work as in CSS: tags, classes, attributes, descendants and lists, ranked by specificity, with !important. They match the page as the export cleans it, which is not what your browser's developer tools show on the Confluence page. Use these:

Text

Element	Selector
Page title	`.pagetitle`
Headings	`h1`, `h2`, `h3` …
Paragraphs	`p`
Links	`a`
Bold text	`strong`
Inline code	`code`
Bullet and numbered lists	`ul`, `ol`
List items	`li`
Quotes	`blockquote`
Dates	`time`

Tables

Element	Selector
Tables	`table.confluenceTable`
Header cells	`th`
Body cells	`td`

Panels and macros

Element	Selector
Info panel	`.pdf-panel-info`
Note panel	`.pdf-panel-note`
Warning panel	`.pdf-panel-warning`
Tip panel	`.pdf-panel-tip`
Panel macro, and success / error panels	`.pdf-panel-default`
Panel title	`.pdf-panel-title`
Code blocks	`pre`
Expand title	`.pdf-expand-title`
Expand content	`.expand-content`
Status labels	`.pdf-status`
Status labels by colour	`.pdf-status-green`, `-red`, `-yellow`, `-blue`, `-purple`, `-grey`
Task lists	`.inline-task-list`
Decisions	`.pdf-decision-item`
Table of contents macro	`.pdf-toc-macro`

Layout and images

Element	Selector
Page layouts	`.columnLayout` (also `[data-layout-section]`)
Layout columns	`.cell` (also `[data-layout-column]`)
Images	`img`

Success and error panels from the new editor reach the export as plain panels, so they share .pdf-panel-default.

Which rule wins

A more specific selector wins, then the later rule, as in a browser.
Colours set on the page in Confluence (coloured text, cell highlights, status colours) win over the stylesheet, unless your rule is marked !important.
The template's own settings (fonts, heading sizes, table style) are the starting point; the stylesheet changes them.

Errors and warnings

The editor checks the stylesheet as you type and lists problems by line:

Errors are broken CSS: an unclosed {, a stray }, a missing value, a misspelt property, an invalid value or selector. That line is skipped in the PDF.
Warnings are valid CSS a PDF can't show, such as box-shadow or padding, often with a suggestion. They have no effect in the PDF.

A stylesheet can be saved with errors or warnings; only the lines that work are used. A stylesheet can be up to 50,000 characters.

Recipes

The Recipes tab in the editor adds these with one click.

Compact tables

th, td {
  font-size: 8pt;
  border: 1px solid #dfe1e6;
}
th {
  background-color: #f4f5f7;
}

A new page for each chapter

h1 {
  page-break-before: always;
}

Stack layout columns

.columnLayout {
  display: block;
}

Landscape pages

@page {
  size: A4 landscape;
}

Hide something

.pdf-toc-macro {
  display: none;
}

Bringing a stylesheet from Confluence's PDF export

Stylesheets written for Confluence's built-in PDF export mostly work as they are: @page margins and page counters, table and heading styles, and [data-layout-section] / [data-layout-column] rules all apply. Rules that work around the browser's print layout (shadows, overflow, box-sizing, table-layout, page-break-inside) show as warnings and can be removed.