Purchase invoice CSS

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

Purchase Invoice CSS changes how your purchase invoices and purchase orders look, both on screen and as PDFs.

To see it, open any purchase invoice from the Purchases menu, or click the template’s Preview button. Preview opens a sample purchase 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
`.invoice-footer-left-td`, `.invoice-footer-right-td`	Totals table cells
`.invStamp`	Status stamp (OVERDUE, PAID…)

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 */
}

Recipe 4: A smaller status stamp

.invStamp {
    border-width: 2px !important;
    font-size: 20px !important;
}

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; }
.invStamp { border-width: 2px !important; font-size: 20px !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.