Introduction

The Client Statement CSS is applied to any client statement within QuickFile. You can view a client statement by going into the applicable client detail screen, clicking on the “View” button and selecting the “Statement” option. Below is an example of a typical client statement:

You can use CSS to customise the text size, font and style along with your logo, borders, shading, and general colour theme. You can also hide various elements, such as table columns and rows.

Please note: This feature requires a Power User Subscription

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