PDF template styles

This page provides advanced examples for customizing the appearance of PDF templates with CSS.
PDF template styles are configured in the Styles tab of a PDF template. For information about creating and configuring PDF templates, see PDF export.

Advanced customizationCSS customizations can affect the entire PDF output. Test the PDF after making changes to verify the result.

CSS customization

PDF templates use CSS classes to define the appearance of headers, footers, cover pages, and page content.
CSS classes should be used as selectors when customizing a PDF template. id attributes such as #wrapper should not be used as selectors because IDs can conflict with jump links and other functions in the PDF. Instead, use a class selector such as .wrapper.

Add a background color

A background color can be added to the header and footer by adding the following CSS to the Styles tab:

.pdfcreator-runningheaderfix,
.pdfcreator-runningfooterfix {
    background-color: #eee;
}

Remove the header or footer border

By default, the header and footer have a border. The borders can be removed by adding the following CSS:

/* Remove the header border */
.pdfcreator-runningheaderfix > table {
    border-bottom: none !important;
}

/* Remove the footer border */
.pdfcreator-runningfooterfix > table {
    border-top: none !important;
}

Page content

Format the page title

The font size and line height of page titles can be changed with the following CSS:

.firstHeading {
    font-size: 12pt;
    line-height: 1.5em;
}

Adjust font sizes

The font size and line height of text in the page content can be changed. HTML elements can be added to or removed from the selector as required.

.pdfcreator-page-content th,
.pdfcreator-page-content td,
.pdfcreator-page-content div,
.pdfcreator-page-content li,
.pdfcreator-page-content pre,
.pdfcreator-page-content p {
    font-size: 9.5pt;
    line-height: 1.8em;
}

The font size of headings can be adjusted by adding the corresponding heading element. For example:

.pdfcreator-page-content h2 {
    font-size: 11pt;
}

Customize bullet lists

The bullet points in unordered lists may appear too large relative to the list text. The default bullets can be replaced with a smaller bullet character:

.pdfcreator-page-content ul {
    list-style-type: none !important;
    list-style: none !important;
    padding-left: 1.2em;
}

.pdfcreator-page-content li {
    list-style-type: none !important;
    position: relative;
}

.pdfcreator-page-content li::before {
    content: "\2022";
    position: absolute;
    left: -1em;
    font-size: 1em;
}

.pdfcreator-page-content .toc ul li::before {
    content: "";
}

Reduce the font size of code blocks

The font size of syntax-highlighted code blocks can be reduced with the following CSS:

.mw-highlight pre {
    font-size: 8.5pt !important;
    line-height: 1.5em !important;
}

Avoid orphaned headings

The following rules can reduce the likelihood that a heading appears at the bottom of a page without the following content:

h2,
h3,
h4 {
    -fs-keep-with-next: always;
    margin-top: 1.2em;
}

p {
    -fs-page-break-min-height: 5em;
    line-height: 1.5;
}

Header customization

Adjust the logo size

The PDF template does not automatically resize the logo to specific dimensions. The logo size can be adjusted by overriding the default logo styles.
Add the following CSS to the Styles tab:

.pdfcreator-runningheaderfix > table .pdfcreator-runningheader-logo img {
    width: auto !important;
    height: 1cm !important;
    margin-top: 0.5cm;
}

After saving the changes, export a test PDF. Adjust the logo height as required.

Table customization

The appearance of tables in the PDF output can be customized. For example, the following CSS reduces the font size and increases the cell padding:

.wikitable th,
.wikitable td {
    font-size: 9pt;
    padding: 10px;
}

Test the PDF output after changing table styles, especially when tables contain images or complex layouts.

Batch customization

Several CSS customizations can be added to the end of the Styles tab as a batch. The following example combines several of the customizations described on this page:

/*** Customizations ***/

/* Position and resize the logo */
.pdfcreator-runningheaderfix > table .pdfcreator-runningheader-logo img {
    width: auto !important;
    height: 1cm !important;
    margin-top: 0.5cm;
}

/* Remove the header border */
.pdfcreator-runningheaderfix > table {
    border-bottom: none !important;
}

/* Reduce font sizes and increase line height */
.pdfcreator-page-content th,
.pdfcreator-page-content td,
.pdfcreator-page-content div,
.pdfcreator-page-content li,
.pdfcreator-page-content pre,
.pdfcreator-page-content p {
    font-size: 9.5pt;
    line-height: 1.8em;
}

/* Customize bullet points */
.pdfcreator-page-content ul {
    list-style-type: none !important;
    list-style: none !important;
    padding-left: 1.2em;
}

.pdfcreator-page-content ul li {
    list-style-type: none !important;
    position: relative;
}

.pdfcreator-page-content ul li::before {
    content: "\2022";
    position: absolute;
    left: -1em;
    font-size: 1em;
}

.pdfcreator-page-content .toc ul li::before {
    content: "";
}

/* Style level-2 headings */
.pdfcreator-page-content h2 {
    border-bottom: none;
    margin: 2em 0;
}

/* Customize the table of contents */
.toc {
    border: none;
    padding: 0;
    margin: 1em 0;
}

/* Reduce the font size of code and preformatted text */
.mw-highlight pre,
pre {
    font-size: 8.5pt !important;
    line-height: 1.5em !important;
}

/* Set the table background color for PDF output */
.wikitable {
    background-color: #fff;
}

.wikitable tr th {
    background-color: #f1f3f9;
}

/* Reduce orphaned headings */
h2,
h3,
h4 {
    -fs-keep-with-next: always;
    margin-top: 1.2em;
}

p {
    -fs-page-break-min-height: 5em;
    line-height: 1.5;
}