Creating a custom invoice theme with CSS

This guide explains how to create your own custom invoice templates within FreeAgent using the advanced power of CSS.

Who is this for?

This tutorial, and creating your own invoice templates in general, is for experienced web designers and developers who have a good understanding of HTML and CSS. If you don't know your specificity from your inheritance, or your decendent selectors from your first children then this probably isn't the tutorial for you.

Getting started

Hopefully, that hasn't scared you off too much, and you're still keen to give it a go, because with a few tips, you should see that creating your own custom invoice templates isn't terribly difficult.

In the Settings section of FreeAgent go to the Theme Gallery section. You will see a Thumbnail image marked My Theme with a button below this to Create Custom Theme.

Click this to be taken to the Template editor screen where you'll see a box contain a drop down menu which allows you to use one of our existing templates as the starting point for your own design. Choose a template and you'll now see 2 tabs for the Screen and Print CSS, and the textfields are pre-populated with the CSS from your chosen template. If you want to make a simple edit, like changing text colour, it's a simple case of updating the Screen CSS file and clicking Save Invoice Template at the bottom of the screen.

If you're wanting to try something more ambitious like completely change the layout of your invoice then understanding how/where both of these CSS files work is important in achieving the desired result.

Screen CSS

Designing a custom invoice template is achieved predominately through editing the Screen CSS. You'll see the default one is split into a number of "sections" separated by comment fields. These CSS sections control the Typography, Layout and Invoice Amount Table for the template.

Changing typography

If you have reasonable experience with CSS, changing the typography should not be a problem, and can be done through editing the existing CSS rules in the Typography part of the stylesheet which controls standard text, headings and table text.

You will notice that all existing font size are specified in point units (pt). At first this may seem odd, as conventional wisdom says points are a poor choice for text sizing on the web, due to their inflexible nature. However the primary delivery of invoices is through printing and pdf generation and in this case, points are a much better choice than ems or pixels.

#invoice  #invoice-info h2 {
       margin-bottom:0;
       text-transform:uppercase;
       font-size:14pt
                           }

Similarly where padding and margins are concerned it is often better to use absolute measurements like centimetres (cm), rather than traditional pixels.

The only fonts that we currently support for invoice themes are:

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

Changing invoice layout

In order to change the layout of your template you're going to need to understand the underlying HTML for the theme. This HTML is always consistent, and it's only ever the CSS that changes. Two good ways to understand the HTML template are:

• Using the excellent Firebug extension for Firefox and inspect the on-screen preview
• Download our Invoice Devkit

The theme has been marked up with enough "CSS hooks" in order to give maximum flexibility in positioning the various elements on the invoice.

Using background images

It's also possible to use background images as part of your invoice, so you could embed a custom graphic into the header for instance. To do this you will need to upload the graphics to your own server and then call them with absolute urls from within your custom CSS file.

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

This will include the graphics from your own server into your FreeAgent invoice theme.

Adding new CSS rules

If you are adding a new rule to the stylesheet it's very important to always preface it with #invoice.For example:

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

If you don't do this then new rules may interfere with the styling of the FreeAgent interface, and you don't want that. If you make a mistake you can also use the drop down menu at the top of the page to reset the template stylesheet to one of our defaults.

General Tips

• Editing the existing CSS will be easier than completely starting from scratch
• Be as specific as you can with your CSS rules. The rules for your invoice must override the default application styling or your invoice could look strange
• Although frowned upon !important can be very useful in these situations
• The PDF generator has very good CSS support, so it's feasible to use CSS properties like content-before or content-after that won't be supported by the on screen preview, if you're using a less capable browser like Internet Explorer 6.

Using your new template

Once you've completed your new CSS file, you can either set this as the default for all your future invoices or just occasionally use it on certain invoices.

To set this as the default invoice select Theme Gallery from the Settings area and select Use Theme underneath the My Theme thumbnail. This will set your new invoice template as the default for all draft and future invoices.

If you want to only change the invoice template for specific invoices, you can do this on the invoice preview screen, by clicking on the Change Template tab beneath the main heading.

When the drawer slides down you can now select the My Theme thumbnail from the template preview gallery.

Your new theme will now be applied to your invoice design.