Invoice templates: Creating a custom invoice theme with CSS

With some knowledge of CSS, you can tailor the layout, typography, and even the content of your invoice theme to better suit you.

Before we dive in…

This article is for web developers who understand HTML and CSS. Unfortunately, we can’t provide support for custom theme CSS you write. 

Invoice themes in FreeAgent can only be customised using CSS. The underlying HTML isn’t something that can 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.

Getting started

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

An alternative option is to edit your invoice theme CSS directly inside FreeAgent, but be aware that this may affect any draft invoices you send as part of our Recurring Invoices feature.

Creating a custom theme

Navigate to the Settings section of your account, then the Theme Gallery section. You’ll see a thumbnail image named Custom Theme. Select the Edit Theme button below it.

On the Edit your custom invoice theme CSS page, you’ll see a dropdown 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 the Generate CSS button.

You can now make changes to the generated CSS and they'll be saved as part of your custom theme when you select the Save Invoice Theme button.

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 the Use Theme button underneath the Custom Theme thumbnail image. Your theme will now be the default for all current draft invoices and any future invoices. None of the invoices 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 the Custom Theme thumbnail.

Working with Screen CSS and Print CSS

You’ll notice the two Screen 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 your printed A4 invoice closely matches the on-screen version you see.

If making changes to Print CSS, always ensure you preview the printed version of your invoice by selecting the Save as PDF button on the individual invoice screen, as that’s the PDF your clients will see.

Changing typography

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.

Supported fonts

All fonts used to generate invoice PDFs have to be installed on our servers, so there’s a limited selection you can use:

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

Changing layout

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.

Code snippets

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.

Change font

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.