Customise CSS for Invoices, Credit Notes and Orders

Brands and Templates are used to control the look and feel of the invoices, credit notes and purchase/sales orders that you create. There are 4 pre-configured template themes to choose from, but advanced users may wish to further customise the look and feel of your documents. This can be done by activating the Custom Theme and inserting your custom CSS into the fields provided.

INSTRUCTIONS

Create or edit a Document Template as per the instructions in Invoice Brands and Templates.

Select the Custom CSS option in the Invoice Layout section.

Download the Custom Theme Reference Pack which includes the following files to assist you when testing your new design

• abctradinglogo.png (an example logo)
• invoice.html (html used by the online documents view)
• template.css (some default css but editing not supported)
• README.txt document with full instructions
• print and online screen CSS files for the four preconfigured template layouts to use as a reference

Create your own CSS from scratch or use the CSS from the four template themes provided. Change the stylesheet paths in `invoice.html` to reference your new stylesheets.

Make changes you want to your new theme files. Once you are satisfied with your theme, you need to copy and paste your styles into the two provided text fields in your brand template.

Note that Custom Theme Reference Pack only supports the preview of on-screen styles. Print styles will need to be tested through the system directly as we cannot provide a way to generate PDFs for you in this download. You can do this by clicking on the Preview button after you have pasted in your Custom CSS.

There is also no way to modify the underlying HTML of an invoice and we recommend only adjusting the styles in the theme CSS files, and not the template.css file.