# Style the exported document

[Video: Styling the exported document, in 25 seconds, no sound](/images/videos/signplus/styling-light.edb4e1ee.mp4)

What the video shows:

1. In SignPlus global configuration, open Export styling and choose the typeface and the page.
2. Turn on a first page. The preview shows the cover with the logo, the title, the author and the month.
3. Build the footer from parts, such as the page version and the page number.
4. Select Save export styling. A flag says the settings are saved.
5. Every exported and signed document carries the same first page, header and footer.

Every document SignPlus produces, whether it goes out for signature or is downloaded as a
PDF, is laid out by one renderer inside Atlassian's runtime. **Export styling**, on the
global settings screen, decides how it looks.

The tab has five sections: **Type and page**, **First page**, **Header**, **Footer** and
**Advanced**. Nothing applies until you select **Save export styling** at the foot of the tab,
which says **Unsaved changes** until you do.

The preview in each section is drawn at the document's real proportions: sizes, weights and
placement match the PDF at the chosen page width. The typeface is the nearest one your browser
has, so letter shapes differ. To see the real type, use the PDF download in the signing panel on
any page.

<Aside type="note" title="It changes documents signed from now on">
Documents already signed are unchanged, and their signatures stay valid. Styling is not
part of what the page hash covers, so restyling never makes a signed page read as
modified.
</Aside>

## Type and page

| Setting | Options |
|---|---|
| **Font** | **Roboto**, Open Sans or Noto Serif, or upload your own: a `.ttf` or `.otf` file up to 350KB. An uploaded font is one face, so bold and italic are drawn from it rather than from separate files |
| **Body size, in points** | Between 6 and 18. **10.5** by default, which is Confluence's own body size. Headings, tables, icons and panels scale with it, so changing it changes the whole document |
| **Page size** | **A4**, or Letter |
| **Margins** | Narrow, **normal** or wide |

## Header and footer

A header and a footer are each built from parts laid side by side, which share the width
equally. A part is either **text** or an **image**:

- **Text** takes any wording and any of the placeholders below, with its own size,
  alignment, bold, italic and capitals.
- **An image** is a PNG or a JPEG up to 150KB, with its height set in points. A logo is
  the usual use.

Turn a band on with **Show a header on every page** or **Show a footer on every page**. Drag a
part by its handle to reorder it. **Draw a line between the header and the page**, and the same
for the footer, adds a hairline rule. **Show on the first page** decides whether the band is also
drawn on the [first page](#first-page), and it is greyed out until there is one.

By default the header is off and the footer shows `{pageNumber} / {pageCount}`, centred.

## First page

**Add a first page to every document** puts a page of its own before the document, with a
top, a middle and a bottom:

- **Top** and **bottom** are built from parts that share the width, like the header, so one
  can sit left and another right.
- **Middle** is one line at a time, down the centre of the page, each with its own size and
  alignment. Leave the size empty to use the body size.

The default first page shows the document name, the page's author and the date, centred.
While a first page is on, the page title is not printed again at the top of the first
Confluence page, because the first page already carries it.

## Placeholders

Type any of these into a text part. Each is replaced with its real value when the
document is made, and everything else you type stays as it is. **Placeholders**, beside each
section's **Add a part**, opens this list on the screen.

| Type this | And it becomes | For example |
|---|---|---|
| `{pageNumber}` | The number of the page it is drawn on | 3 |
| `{pageCount}` | How many pages the document has | 12 |
| `{documentName}` | The name the signing was given | Service agreement |
| `{pageTitle}` | The Confluence page's title | Supplier terms |
| `{spaceName}` | The space the page lives in | Legal |
| `{pageVersion}` | The version this document was made from | 7 |
| `{date}` | The date the document was exported, written the way the site writes dates | 19/09/2026 |
| `{date.year}` | The year alone | 2026 |
| `{date.month}` | The month by name, in the site's own language | September |
| `{date.day}` | The day of the month alone | 19 |
| `{time}` | The time the document was exported | 09:24 |
| `{author}` | Who created the Confluence page | Mari Tamm |
| `{author.name}` | The same as `{author}` | Mari Tamm |
| `{author.email}` | The author's email address | mari.tamm@example.com |

`{pageVersion}` is worth putting in a footer. It prints on every page the version the
signature belongs to, which is the same number the page hash is computed from.

## Your own CSS

Under **Advanced**, a stylesheet applied after the built-in one, so a rule here overrides
the matching built-in rule and leaves everything else alone. Leave it empty unless the
settings above cannot express what you need.

<Aside type="caution" title="What CSS can and cannot do here">
The document is drawn by a PDF engine, not a browser. Colour, size, weight, alignment,
spacing, borders and backgrounds work. Floats, positioning, media queries and anything
that depends on a viewport do not.
</Aside>

## What a space may change

Nothing, until a site administrator allows it. Two levels of switch decide it:

1. **Let space administrators style exported documents**, under **App settings**, is
   the master switch, and it is off by default. With it off, every space uses the site's
   styling.
2. With it on, each control on the export styling screen carries its own switch, such as
   **Let each space set its own first page** or **Let each space write its own CSS**. A
   site can keep one typeface everywhere and still let each space put its own logo in the
   footer.

On a space's screen, a control the site has kept reads **Set by your site administrator**.

## Related

- [Configure SignPlus](../configure/)
- [Sign a page](../sign-a-page/)

---

A problem or a question? Write to [support@oktul.com](mailto:support@oktul.com) or open a request in the [Help Center](https://oktul.atlassian.net/servicedesk/customer/portals). Both reach the same service desk, so either way the request gets a reference and an SLA measuring the response.
