Purchase and sales payment CSS

Introduction

The purchase and sales payment CSS is applied to supplier and client payments respectively. You can view your purchase payments in the “Purchases” menu, under “View payments”. The same corresponding option exists for sales payments under the “Sales” menu.

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 overridden. 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: #FFD4FB !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.