Create a custom invoice theme using CSS

This article explains how to create a custom invoice theme using CSS and work within the ‘Main CSS’ and ‘Print CSS’ tabs. It also explains how to apply it to your invoices.

If you would like to customise basic elements of your invoice theme, you can create a custom invoice theme using our customisation designer. However, if you need to customise additional elements, you’ll need to follow the steps below to create a custom invoice theme using CSS.

Getting started

Download our Invoice Devkit. This will allow you to create the CSS of the invoice theme in your text editor and preview those changes locally, outside of your FreeAgent account. Once you’re happy, you can then paste your custom CSS into FreeAgent to create the theme.

Alternatively, you can create 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 invoice theme

To create a custom invoice theme in FreeAgent, select 'Settings' from the drop-down menu in the top-right corner, then select 'Theme Settings' from the ‘Emails, Invoices & Estimates’ section.

Select ‘Create’ below the ‘Custom CSS Theme’ thumbnail.

On the 'Create 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 start with, then select 'Generate CSS'.

You can now make changes to the generated CSS. Find out more about how to customise your invoice theme using CSS.

Once you’re happy with your changes, select 'Save Invoice Theme' to complete the editing process.

Working with ‘Main CSS’ and ‘Print CSS’

There are two tabs on the 'Create your custom invoice theme CSS' page: 'Main CSS' and 'Print CSS'.

All rules in the ‘Main CSS' cascade down to 'Print CSS'. The 'Print CSS' then defines a few extra rules used by our PDF renderer to ensure that your printed invoice 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 version your customers will see.

Applying your custom theme to invoices

Setting your theme as the default theme

Once you’ve saved the CSS for your custom invoice theme, you’ll need to apply it to your invoices.

To make your custom theme the default theme for your estimates and invoices, navigate back to Theme Settings and select 'Make Default' below 'Custom CSS Theme'. Find out how to choose a default theme for your invoices.

Your custom theme will now be the default for all current draft invoices and any future invoices that you create. None of the invoices that you’ve already sent will be affected.

Selecting your custom theme for individual invoices

Alternatively, you can apply your custom theme to specific invoices only. To do this, navigate to the relevant draft invoice, select the ‘More’ drop-down menu in the top-right corner and select 'Change theme'.

Select 'Custom CSS' from the 'Change Invoice theme' toolbar.

The invoice will be updated to use your custom theme.