Purchase invoice CSS

Introduction

The Purchase Invoice CSS is applied to all supplier invoices. You can view your purchase invoices by clicking on the main menu header “Purchases”.

You can use the CSS here to customise the text size, font, and style along with your logo, borders, shading, and general colour theme.

Example 1: Change the text size, font, and colour

All the printable documents, e.g. payment slips, invoices, and statements use a class called .invoice-text that can be overwritten. In the below example we’ve changed the font size, style, and colour.

.invoice-text {
    font-size: 12px !important;
    font-family: "Comic Sans MS" !important;
    color: #999999 !important;
}

Note: the above properties have been suffixed with !important in order to override the default styles.

Example 2: Modify the shaded cell colours

In this example we’ve changed the shaded cells to a different colour. Each left hand table cell in the top right incorporates the class .invoice-details-left-td so we’ve applied a background-color property to this class.

.invoice-details-left-td {
    background-color: #f4ffbd !important;
}

Example 3: Re-size the logo

It’s possible to re-size the logo by applying a width property to the .imgDocumentLogo class.

.imgDocumentLogo {
    width:250px !important;
}

CSS Limitations when converting to PDF

The CSS you apply here will feature within the web application when previewing a payment slip and whenever a document is converted to PDF. It is important to realise that the PDF conversion software will not always render the CSS exactly like you see it in your web browser. To maintain consistency between the two it’s best to stick to well established CSS properties. Curvy corners, drop shadows, and many CSS3 methods won’t translate when converted to PDF.