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.