Client statement CSS

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Client Statement CSS (left-hand list)

Prefer to watch?

Prefer a video walkthrough? Watch our Customise QuickFile with CSS, HTML and scripts tutorial on the QuickFile Help Guides YouTube channel.

Introduction

Client Statement CSS changes how your client statements look, both on screen and as PDFs.

To see a statement, open a client and choose Statement from the view menu, or click the template’s Preview button. Preview opens a sample statement from your own account.

Selector reference

Selector	What it is
`.invoice-text`	All document text
`.invoice-header` (and `.invoice-header span`)	The document title
`.imgDocumentLogo`	Your logo
`.invoice-details-left-td`	Grey label cells in the details table (top right)
`.invoice-items-header-cell`	Column headings on the items table

The title is coloured on an inner span. On statements, the word STATEMENT is inside a <span> with its own colour. Target .invoice-header span as well as .invoice-header, as Recipe 1 does.

PDFs are not browsers

The PDF converter supports less CSS than your browser, so always check the downloaded PDF as well as the preview.

Works reliably	Avoid
`font-family`, `font-size`, `color`, `font-weight`	Web fonts (`@font-face`, Google Fonts)
`background-color`, `border`, `padding`	`border-radius`, `box-shadow`, gradients
`width` / `height` in px	Flexbox, grid, `vw`/`vh` units

Recipe 1: House font and title colour

.invoice-text {
    font-family: Arial, Helvetica, sans-serif !important;
    color: #222222 !important;
}

/* The document title. Statements set the colour on an inner span, so target both. */
.invoice-header,
.invoice-header span {
    color: #0f2a44 !important;
}

Recipe 2: Shaded cells in your brand tint

.invoice-details-left-td,
.invoice-items-header-cell {
    background-color: #e8eef5 !important;
    color: #0f2a44 !important;
}

Use a pale tint. Strong colours use a lot of ink when documents are printed.

Recipe 3: Resize the logo

.imgDocumentLogo {
    width: 150px !important;
    height: auto !important; /* keeps the proportions */
}

All together

.invoice-text { font-family: Arial, Helvetica, sans-serif !important; color: #222222 !important; }
.invoice-header, .invoice-header span { color: #0f2a44 !important; }
.invoice-details-left-td, .invoice-items-header-cell { background-color: #e8eef5 !important; color: #0f2a44 !important; }
.imgDocumentLogo { width: 150px !important; height: auto !important; }

Sales invoices and estimates are styled separately, in Account Settings → Design Customisation → Invoice Customisation. Purchase invoices, payments and client statements share the same selectors, so these recipes also work in Purchase invoice CSS, Purchase and sales payment CSS and Client statement CSS.