Purchase and sales payment CSS

Access via: Account Settings › Design Customisation › Advanced CSS & HTML Customisation › Purchase Payment CSS or Sales Payment 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

Two templates style payment slips, both on screen and as PDFs:

Template	Applies to	Where to find a slip
Purchase Payment CSS	Remittance advice for payments you make to suppliers	Purchases → View payments
Sales Payment CSS	Payment receipts for payments from your clients	Sales → View payments

Each template’s Preview button opens a sample payment from your own account. Both slips use the same selectors, so you can paste the same CSS into both templates.

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)

Payment slips don’t use .invoice-items-header-cell or .invStamp. Inspect the slip (F12) to find selectors for its other parts.

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 {
    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 { 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.