The Invoice Devkit is a set of template files aimed at assisting users who wish to create their own invoice templates. It will allow you to test your own template locally before applying this to your own account.
You can download the latest Invoice Devkit v1.3 here:
Who is the Devkit for?
Developers or designers who want to create their own custom invoice designs for use within their FreeAgent account. You'll need to have good knowledge of HTML and CSS, including CSS positioning in order to create a custom invoice template.
Getting Started
Download the latest Invoice Devkit, which contains all of the files you'll need to create your own invoice designs:
- invoice_header.html << Standard invoice template with company logo and address in the header. Should not be changed
- invoice_no_header.html << Invoice template with header omitted for letterhead paper use. Should not be changed
- base.css << Default styles for screen display applied to all invoices by the application. Should not be changed or removed
- print.css << Default styles for print and pdf display. Should not be changed or removed
- simple.css << Default invoice template. Used for screen, print and pdf. Feel free to amend or scrap completely
- mainlogo.gif << example logo for use in header template
How are invoices created in FreeAgent?
The flexibility of FreeAgent means that invoices are produced in a 3 ways:
- On screen as part of the invoice preview screen
- In print via the browser
- As a pdf, which can be downloaded or emailed to clients
The invoice CSS has to accommodate all of these scenarios, which requires careful thought. In addition, the invoice template varies depending on state (a DRAFT invoice has additional links to "add invoice item" for example) and other factors such as the optional presence of a sales tax column in the invoice amount table.
Looking at the original simple.css should give you an idea of what this entails, although the supplied HTML templates only show a snapshot of a typical invoice in its SENT state.
Creating your own invoice templates
Creating your own invoice templates is a simple matter of creating a new CSS file to replace the existing invoice_simple.css. You should NOT change any of the other HTML or CSS files as these are necessary for the application to function correctly.
Once you have created your invoice template, send a zip of your all your files to roan@freeagentcentral.com.
Once we have received your files, we may have to make minor adjustments to your CSS to ensure it displays accurately in the various possible invoice states and configurations. Once approved, your template will be integrated into your FreeAgent account.