How to change the size of your logo on an invoice

This article explains how to increase or decrease the size of the logo that appears on your invoices in FreeAgent.

The easiest method to increase or decrease the size of your logo is by using our theme customisation designer. Alternatively, you can set the logo to a specific size by adding a line of CSS to a custom invoice theme.

Using the theme customiser to change your logo size

To create a custom theme in FreeAgent, select 'Settings' from the drop-down menu in the top-right corner, then select 'Theme Settings’ from the ‘Emails, Invoices & Estimates’ section.

13.png

Select ‘Create custom theme’. If you’ve already created a custom theme, select ‘Edit’.

14.png

You can adjust the size by choosing from the different size options.

15.png

Using a custom CSS theme to change your logo size

Alternatively, to change the logo size using CSS, you’ll first need to upload a large (e.g. 1000px wide) PNG, GIF or JPEG image file. Please note that the file must be 1MB or less in size.

16.png

Next, you’ll need to customise the invoice theme using CSS and enter the following snippet of code at the bottom of the pre-generated code.

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

The snippet dictates a width of 300 pixels (width:300px), which means that when the logo is viewed on screen, the maximum width of the logo is 300 pixels. Edit the '300' figure to increase or decrease your logo width. The logo height will increase or decrease automatically, maintaining the logo’s proportions.

17.png

Select ‘Save Invoice Theme’ to complete the process.

To apply this custom theme to your invoices, navigate back to your Theme Settings and select ‘Make Default’.

18.png

If you require more in-depth assistance with CSS, you may want to speak to a web developer.

Did you find this article useful?