Invoice Devkit

The Invoice Devkit is a set of template files aimed at assisting users who wish to create their own invoice themes. It will allow you to test your own theme 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 other CSS files as these are necessary for the application to function correctly.

Once you have created your invoice theme read our article on creating invoices themes for details on how to integrate this into your FreeAgent account.