This article explains how you can customise the layout, typography, and content of your invoice theme in FreeAgent if you have some basic knowledge of CSS.
Before we dive in…
This article is for web developers who understand HTML and CSS. Unfortunately, we can’t provide support for the custom-theme CSS you write.
Invoice themes in FreeAgent can only be customised using CSS. The underlying HTML cannot be edited.
Our PDF renderer doesn’t support CSS3 properties but does support CSS 2.1, so you can still make significant changes to the appearance of your invoice. See the code snippets section for more details.
Download our Invoice Devkit. This will allow you to edit the theme CSS in your text editor and preview those changes locally, outside of your FreeAgent account. Once you’re happy with the changes, paste your custom CSS into FreeAgent to begin using your custom theme.
An alternative option is to edit your invoice theme CSS within FreeAgent. Please note that this may affect any draft invoices you send as part of a recurring invoice series.
Creating a custom theme
Select 'Settings' from the drop-down menu in the top-right corner, then 'Theme Gallery'.
You’ll see a thumbnail image labelled 'Custom Theme'. Select 'Edit Theme' below it.
On the 'Edit your custom invoice theme CSS' page, you’ll see a drop-down menu allowing you to use one of our existing themes as the starting point for your custom theme. Choose the theme you want to base yours on, then select 'Generate CSS'.
You can now make changes to the generated CSS. To save changes as part of your custom theme select 'Save Invoice Theme'.
Applying your theme to invoices
Though you’ve generated the CSS for your custom invoice theme, it isn’t being applied to your invoices yet. To make your theme the default theme, navigate back to 'Theme Gallery' and select 'Use Theme' below 'Custom Theme'.
Your theme will now be the default for all current draft invoices and any future invoices. None of the invoices that you’ve already sent will be affected.
If you want only want to change the invoice theme for specific invoices, you can do this on the invoice preview screen, by selecting the 'Change theme' option from the 'More' menu.
When the 'Change Invoice theme' toolbar appears, select 'Custom Theme'.
Working with Main CSS and Print CSS
You’ll notice the two 'Main CSS' and 'Print CSS' tabs on the 'Edit your custom invoice theme CSS' page.
All rules in the 'Screen CSS' cascade down to 'Print CSS'. The 'Print CSS' then defines a few extra rules used by our PDF renderer to ensure that when you print your A4 invoice it closely matches the on-screen version.
If you're making changes to 'Print CSS', always preview the printed version of your invoice by selecting 'Save as PDF' on the individual invoice screen, as that’s the PDF your clients will see.
You’ll notice that font-size values for invoice themes are specified in point units (pt). At first this may seem odd, as conventional wisdom says the pt unit is a poor choice for text sizing on the web, due to their inflexible nature. However, the primary delivery of invoices in FreeAgent is through PDF. In this case, pt is a much better choice than em, rem, px.
Similarly, where padding and margin is concerned, it is often better to use absolute measurements like centimetres cm for the purposes of invoices in FreeAgent.
All fonts used to generate invoice PDFs have to be installed on our servers, so there’s a limited selection you can use:
Times New Roman
Because the underlying HTML of invoice themes can’t be edited, layout changes are limited to what you can do with CSS. You’ll want to use your browser’s web inspector to inspect the invoice HTML so you know what elements can be targeted.
Ensure any new CSS selectors you add begin with #invoice:
The on-screen preview of your invoice is shown by directly applying your custom invoice CSS inline, so not beginning your selectors with #invoice might result in unwanted changes being applied to the FreeAgent app interface.
Using these code snippets in your Screen CSS should give you a head start for changes you want to make. Unfortunately, we can’t provide support for custom theme CSS you write which doesn’t behave as you expect it to.
Add a background image
Any custom images must be hosted by you, and referenced using an absolute URL.
If you don’t have your own web hosting space, you could try hosting your imagery using a free service like Photobucket, Postimage, Photobox, or ImgSafe. However, we can’t be held responsible for these services being down and any of your invoices being sent without the referenced images being present.
Change the size of your logo
Where 300px can be replaced by whatever pixel value you want. !important is used to ensure the logo is also resized on the generated PDF. The high-resolution version of your logo (if you’ve uploaded one) is used on your invoice PDFs to ensure it doesn’t appear blurry when printed, but the regular resolution version is used for the on-screen invoice preview inside FreeAgent.
Replace your logo with a different image
Ensure that the custom image you use is very large (e.g. at least 1000px wide) so it won’t appear blurry when sized down and printed from your invoice PDF.
As is the case with adding background images to your invoice, any custom images must be hosted by you and referenced using an absolute URL. If you don’t have your own web hosting space, you could try hosting your imagery using a free service like Photobucket, Postimage, Photobox, or ImgSafe. However, we can’t be held responsible for these services being down and any of your invoices being sent without the referenced images being present.
Add custom text content
This example hides the bank details which normally appear on an invoice and instead shows BSB and ABN numbers, the banking standards in Australia. You can use the content CSS property in combination with ::before and ::after pseudo-elements to add any kind of extra text to your invoice, but make sure you thoroughly test any changes you do make.
Move an element
This example moves the invoice total to a completely different position on an invoice. Any element can be moved in theory, but most will have knock-on effects such as elements overlapping or clashing with each other. Be very careful to test different scenarios when making these kinds of changes.
See our list of supported fonts. Note that you’ll very likely have to define the alternative font in the Print CSS too.
Remove page count numbers
All invoice themes include page count numbers at the bottom of the generated PDF pages, so your clients know that they have all pages of an invoice. These counts can be removed by carefully deleting a few lines of from your custom theme Print CSS, and replacing them with a different statement, as shown in the above code snippet.
FreeAgent is registered with the Financial Conduct Authority under the Payment Services Regulations 2017 (register no. 799763) for the provision of account information services.
Registered in sunny Scotland No. SC316774 - One Edinburgh Quay, 133 Fountainbridge, Edinburgh, Scotland, UK EH3 9QG