How to customise an invoice theme using CSS

This article explains how to customise the typography, layout and content of a custom invoice theme in FreeAgent with some basic CSS.

This article requires an understanding of HTML and CSS. Please note that due to the range of requests from users, we are unable to provide support for individual CSS-related queries. However, we have provided some tips and code snippets below to use in your ‘Main CSS’ to change the typography, layout and content of your invoice theme.

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. CSS is designed primarily to enable the separation of presentation and content, including the layout, colours, and fonts.

Please note that 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. 

Getting started

Download our Invoice Devkit. This will allow you to edit the CSS of the invoice 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 your invoice theme CSS within FreeAgent. Please note that this may affect any draft invoices you send as part of a recurring invoice series.

Editing a custom invoice theme

To edit 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 ‘Edit Theme’ below the ‘Custom Theme’ thumbnail.

Screenshot_2022-04-25_at_12.50.36.png

How to change the typography

Changing the font size

To change the font size of the text on an invoice template, look for any snippet of code that includes the ‘font-size’ attribute. For example:

#invoice-info {
font-size: 10pt;
color: #ffc0cb;
}

There will be several font sizes in the CSS template, so you will need to find and change the ‘font-size’ attribute for each type of text you want to change (e.g. headers, info, etc).

The ‘font-size’ values for invoice themes in FreeAgent are specified in point units (pt). For padding and margin, absolute measurements like centimetres (cm) are used.

Changing the font

To change the font of a piece of text, look out for any snippet of code within the CSS that includes the ‘font-family’ attribute. For example:

#invoice {
color: #699;
font-family: "Gill Sans", "Gill Sans MT", Helvetica,
Arial, Verdana, sans-serif;
text-transform: none;
}

Changing the ‘font-family’ attribute will change the font for the related text. In the example above, we provide a fallback option if Gill Sans is not supported by the current browser.

Please note that any fonts with more than one word in their name need to be surrounded by quotation marks. However, fonts with just one word don’t need them.

Supported fonts

You can choose between the following fonts for invoices in FreeAgent:

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

How to change the layout and content

As the underlying HTML of invoice themes in FreeAgent can’t be edited, layout changes are limited to what you can do with CSS. Use your browser’s web inspector to inspect the invoice HTML to identify elements that can be adapted with CSS.

Ensure any new CSS selectors you add begin with ‘#invoice’, for example:

#invoice #invoice-header {
background: #ccc;
border: 1px solid #000;
}

Please note that the on-screen preview of an invoice theme is shown by directly applying your custom invoice CSS inline, therefore not beginning your selectors with ‘#invoice’ might result in unwanted changes being applied to the FreeAgent app interface.

Removing a section from the invoice template

Navigate to the relevant snippet of code for the section you want to remove. For example, if you wanted to remove the payment details, you would find all CSS elements related to ‘#payment-details’ and then add ‘display: none;’ as shown below:

#payment-details h2 {
display: none;
margin-bottom: 1em;
}

#payment-details {
display: none;
border-top: 1px solid #d8dde0;
float: left;
width: 330px;
}

Please note that this could cause large areas of whitespace on the invoice.

Moving an element on the invoice template

Any element on the invoice can be moved, but please note that this may have knock-on effects such as elements overlapping or clashing on other elements. We recommend testing different scenarios when making these types of changes to ensure that doesn’t happen.

The example below moves the invoice total to a different position on the invoice.

#invoice-info #invoice-total {
display: block;
left: 1em;
position: absolute;
top: 1em;
}

Changing the colour of an item on the invoice

To change the colour of any item on an invoice, look for any code snippet that includes:

#invoice {
color: #000000;
}

The six digits can be any combination of numbers and letters, and sometimes can be just three numbers and/or letters.

You can use this colour picker to find the combination for the colour you want. It will provide you with a hex code which you can paste into your CSS code in place of #000000.

Adding custom text to the invoice template

The below example displays BSB and ABN numbers, the banking standards in Australia, instead of the bank details which normally appear on an invoice. You can use the ‘content’ CSS property in combination with ‘::before’ and ‘::after’ pseudo-elements to add extra text to the invoice, but make sure you thoroughly test any changes you do make.

#sort-code strong {
display: none;
visibility: hidden;
}
#sort-code::before {
content: "BSB: ";
font-weight: bold;
}
#company-address .tel::after {
content: "ABN: XX XXX XXX XXX";
display: block;
}

Hiding or changing the trading name on an invoice template

‘.fn.org’ is the snippet that displays your business name on an invoice. If you don’t want to include the business name, use ‘display:none’ to hide it.

If you would like to change the trading name, the ‘#company-address::before’ attribute adds a value before the company address on the invoice. The snippet ‘content: “trading-name”’ will state the value as trading-name. Replace “trading-name” with the name you wish to display here. ‘font-weight: bold’ will also make the text bold.

Please note that if you’re adapting the ‘Bauhaus’ theme, the above change will only work if it is the only addition to the main CSS.

.fn.org{
display:none;
}

#company-address::before{
content: "trading-name";
font-weight: bold;
}

Removing page count numbers

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

/*
In your custom theme Print CSS, delete the rules
concerning 'counter-increment', '@bottom-center',
and '@page:first'...
*/

/*
These '@page' rules add 'x/x' counters to all pages
*/

@page {
counter-increment: page;
margin-left: 0;
margin-right: 0;
padding: 0;

@bottom-center {
color: #666;
content: counter(page) "/" counter(pages);
font: normal 9pt Arial, Helvetica, sans-serif;
}

}

/*
Remove default 'margin' from the top of the first invoice
page, as most themes include an image or border
*/

@page:first {
margin-top: 0;
}

/*
...and replace them with this:
*/

@page {
margin: 0;
padding: 0;
}

/*
But be careful to observe any existing 'margin' or 'padding'
values in your Print CSS, rather than deleting them all
*/

Additional useful code snippets

Using the below code snippets in your ‘Main CSS’ 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.

Adding a background image to the invoice template

Any custom images used for the invoice must be hosted by you and referenced using an absolute URL.

If you don’t have your own web hosting space, you can try hosting your images using a free 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.

Please also ensure that the custom image you use is at least 1000px wide so it won’t appear blurry when resized and printed as an invoice PDF.

In the example below, any attribute with a URL should be replaced with the URL of the image you would like to display.

#invoice {
background: url("http://www.mysite.com/freeagent/my-background.png")
left top no-repeat;
}

Making changes to the logo on an invoice template

You can change the size of the logo, replace the logo and add a second logo. Please see below for more details.

Changing the size of your logo

The default size for a logo on an invoice is 300px, but this can be replaced by any pixel value you want. The number before the ‘px’ is the number of pixels. The higher the number, the larger the logo, and the same for the reverse. For more information, please see this article.

!important’ is used to ensure the logo is also resized on the generated PDF.

Please note that 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.

#invoice-header .logo {
height: auto !important;
width: 300px !important;
}

Replacing the logo with a different image

If you would like to replace your logo with a different image, use the snippet below. ‘#invoice-header .logo’ targets the logo and stops it from displaying. Add the URL for the alternative image you would like to use in ‘#invoice-header::after’, and it will then display the image at the end of the invoice header. You can change the attributes as needed to position the logo and change its size.

#invoice-header .logo {
display: none !important;
}

#invoice-header::after {
background: url("http://www.mysite.com/freeagent/my-header.png")
no-repeat 0 0;
background-size: 200px 100px;
content: "";
display: block;
height: 100px;
width: 200px;
}

Adding a second logo below the invoice table

If you’d like to add a second logo, insert the code snippet below into the invoice template code, below the invoice table. The values of the properties (e.g. height, width etc.) can be customised as required.

#comments {
clear: both;
padding-top: 1cm;
}

#invoice #payment-details {
background: url("http://www.mysite.com/freeagent/my-second-logo.png")
no-repeat 0 0;
background-size: 120px 98px;
height: 107px;
width: 186px;
padding-top: 110px;
}

Did you find this article useful?