How to 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.

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 Gallery' from the ‘Emails, Invoices & Estimates’ section.

Screenshot_2021-10-18_at_14.23.54_copy_4.png

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

Logo_4.png

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'.

Logo_5.png

You can now make changes to the generated CSS. For information on how to customise your invoice theme using CSS, please see this article.

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

CSS_1.png

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'.

Screenshot_2022-04-25_at_12.43.17.png

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.

CSS_6.png

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 Gallery' and select 'Use Theme' below 'Custom Theme'. For more information on how to choose a default theme for your invoices, please see this article.

CSS_2.png

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'.

CSS_3.png

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

CSS_4.png

The invoice will be updated to use your custom theme.

Did you find this article useful?