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.
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.
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.
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.
background-color: #f4ffbd !important;
It’s possible to re-size the logo by applying a width property to the
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.