Knowledge Base Getting Started Frequently Asked Questions

How to customise an invoice theme using CSS

This article explains how you can customise the layout, typography, and content of your invoice theme in FreeAgent with CSS.

You will need to have a basic understanding of HTML and CSS to follow the steps in this article. Please note that FreeAgent cannot provide any support for custom-theme CSS.

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.

Getting started

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

Alternatively, you can edit the CSS of the invoice theme within FreeAgent by following the steps below. Please note that this may affect any draft invoices you send as part of a recurring invoice series.

Customising an existing theme

To customise an existing invoice theme in FreeAgent, select 'Settings' from the drop-down menu in the top-right corner, then 'Theme Gallery'.

Screenshot_2021-10-18_at_14.23.54_copy_4.png

Next, select 'Create Custom Theme'.

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 use, then select 'Generate CSS'.

Logo_5.png

You can now make changes to the CSS directly within the ‘Main CSS’ tab in your browser. If you’re using the Invoice Devkit with your text editor, copy and paste the CSS into the ‘Main CSS’ tab once you’re happy with the code.

Once you’re finished editing the CSS, select 'Save Invoice Theme'.

CSS_1.png

Applying your custom theme to invoices

Setting a default theme

To make your custom theme the default theme for your invoices, navigate back to 'Theme Gallery' and select 'Use Theme' below 'Custom Theme'.

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

When the 'Change Invoice theme' toolbar appears, select 'Custom Theme'.

CSS_4.png

The invoice will be updated to use your custom theme.

Working with ‘Main CSS’ and ‘Print CSS’

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

CSS_5.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 when you print your 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.

CSS_6.png

Changing typography

The font-size values for invoice themes in FreeAgent are specified in point units (pt) as the invoices in FreeAgent are primarily delivered as PDFs.

In addition, absolute measurements like (centimetres) are used for the padding and margin for invoices in FreeAgent.

Supported fonts

The following fonts are supported for invoices in FreeAgent:

  • Arial
  • Book Antiqua
  • Century Gothic
  • Georgia
  • Gill Sans
  • Helvetica Neue
  • Times New Roman
  • Verdana

Changing layout

As the underlying HTML of invoice themes in FreeAgent can’t be edited, layout changes can only be made using CSS. Before making any changes, 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, for example:

If you don't begin the selectors with #invoice, unwanted changes may be applied to the FreeAgent interface. 

Helpful code snippets

The below code snippets can help you make some basic changes to your CSS. Please note that FreeAgent can’t provide support for any issues you encounter with custom theme CSS.

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, consider hosting your images using a free hosting service. Please note that FreeAgent isn't responsible for any issues that you encounter using third party services, for example if your hosting service is down and invoices are sent without the referenced images included correctly.

Change the size of your logo

The default 300px for your logo can be replaced by any pixel value. !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 to FreeAgent) 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. For more information, please see this article.

Replace your logo with a different image

If you choose to replace the image used for your logo, please ensure that the custom image is very large (i.e. at least 1000px wide) so that it won’t appear blurry when sized down and printed from your invoice PDF.

If you choose to use any custom images, they must be hosted by you and referenced using an absolute URL. If you don’t have your own web hosting space, consider hosting your images using a free hosting service. Please note that FreeAgent isn't responsible for any issues that you encounter using a third party service.

Add custom text

You can use the content CSS property in combination with ::before and ::after pseudo-elements to add extra text to your invoice. In the code snippet example above, the bank details which normally appear on an invoice will be hidden and instead BSB and ABN numbers, the banking standards in Australia, will be included.

Move an element

Any element on the invoice can be moved in theory, but may have knock-on effects on other elements, for example, causing them to overlap or clash with each other. Be careful to test and preview when making these types of changes.

Change font

Please see our list of supported fonts before changing the font within the ‘Main CSS’ tab. If you do change the font, you’ll likely need to define the new font in the ‘Print CSS’ tab too.

Remove page count numbers

All invoice themes in FreeAgent include page count numbers at the bottom of the generated PDF pages. These counts can be removed by deleting a few lines of code from your custom theme Print CSS, and replacing them with a different statement, as shown in the below code snippet.

Once you’ve thoroughly tested any changes you’ve made to the ‘Main CSS’ and/or ‘Print CSS’ and are ready to implement them, select ‘Save Invoice Theme’ at the bottom of the screen to complete the process.

Did you find this article useful?