Knowledge Base Getting Started Frequently Asked Questions

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.

To increase the size of a logo, you will need to follow the steps below to add a line of basic CSS code to a custom invoice theme.

1. Upload a large logo

First, you will need to upload a large (e.g. 1000px wide) PNG, GIF or JPG image file. Please note that the file must be 1MB or less in size.

To do this, select ‘Settings' from the drop-down menu in the top-right corner and then select 'Company Logo’.

Logo_1.png

Next, choose 'Select a file' and select the file you’d like to upload from your computer. Finally, select ‘Upload’ to complete the process.

Logo_2.png

2. Create a custom invoice theme using CSS

Next, you will need to create a custom invoice theme using CSS.

To do this, select ‘Settings' from the drop-down menu in the top-right corner of the screen and then select 'Theme Gallery’.

Logo_3.png

Select ‘Create Custom Theme’.

Logo_4.png

You can either create a custom invoice theme from scratch or choose to pre-populate the CSS from one of our pre-designed invoice themes.

To pre-populate the CSS, select the theme you’d like to use from the drop-down menu and select ‘Generate CSS’.

Logo_5.png

3. Set the logo size

Once you have generated the CSS from your chosen theme, 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.

Logo_6.png

Select ‘Save Invoice Theme’ to complete the process.

4. Apply the custom theme to invoices

To apply this custom theme to your invoices, navigate back to the 'Theme Gallery' in ‘Settings’ and select 'Use Theme' under your ‘Custom’ theme.

Logo_7.png

Your custom theme will be applied to all current draft invoices and any future invoices. For more information on customising an invoice theme using CSS, please see this article.

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

Did you find this article useful?