Create your own custom invoice templates
You can download the latest Invoice Devkit v1.3 here:
Changes in v1.3 release:
- Duplicate Payment Due added to Invoice Info box
- Comments moved into separate area at foot of invoice
<thead>, <tfoot>and<tbody>added to invoice amount table
Changes in v1.2 release:
- Additional invoice template css files added
- More code hooks added for increased flexibility in layouts
- Default simple.css altered to fix pdf display bugs
You should only use the most recent devkit, as older versions may be incompatible with the current FreeAgent build.
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.
The Public Invoice Gallery
If you'd like your template to be available to other FreeAgent users, then let us know. If it's accepted into the invoice gallery, then we'll credit your account with 2 months free subscription to FreeAgent, and give full credit to the individual designers within the application.
Sections
- The Invoice Devit
- Who is the Devkit for?
- Getting Started
- How are invoices created in FreeAgent?
- Creating your own invoice templates
- The Public Invoice Gallery
Questions
All questions regarding creating your own invoice templates should directed to roan@freeagentcentral.com or posted on Satisfaction.