Introduction

Cascading Style Sheets (CSS) is the basic aesthetic language of the web. You can now gain full control over your invoice design with our new CSS editor. Here we will look at a range of techniques for applying specific styles, controlling positioning, dimensions, and colour themes.

Advanced health warning: CSS is not a subject that can be grasped in five minutes, and will require some degree of patience. If you are not confident or simply haven’t got the time, you can hire any reasonably competent web developer to help you build your style. This guide is by no means exhaustive and will serve only as an overview of the basic concepts.

Opening the CSS editor

The first place to start is getting access to the CSS editor. CSS styling is only available if your account is configured to use the latest invoice template. Don't worry, any account created after August 2013 will automatically be using the most up-to-date template.

Now go to any invoice preview screen and in the top left you should see a green button “Invoice style gallery”. If you don’t see the button you’re probably on the old template. You can update the template in the Sales menu, under “Invoice customisation”. If you’re on the old template you will see a big red box with an option to upgrade, and you’ll need to do this before you can proceed further.

When you click the above button you’ll then see a range of pre-configured invoice styles. You can click on any of these styles and your invoice preview will instantly update. To access the CSS editor you will need to click the orange button above the selected style saying “Customise this style”.

Let’s start with the basics

In terms of styling, CSS is a pretty big hammer. The CSS editor will allow you to control the look of any element within the invoice. At first the contents of the editor may look a little daunting, but there is a pattern here. Each set of styles are encapsulated within a class, below is an example:

.invoice-header-region {
    width: 630px;
    height: 350px;
    ...
    ...
}

The name “invoice-header-region” relates to the class name and will be referenced in the invoice markup. To see the markup and find the various classes you need to edit you will need to switch on the developer tools in your browser. For Chrome and Firefox browsers press F12 and a panel will pop open at the foot of the screen where you can peer into the page markup, or as my colleague calls it “The Matrix”.

As you run your cursor over the elements in the markup they will light up on the screen. Look specifically at the class name for each element (highlighted in yellow), and you should then be able to find this class in the editor window so that you know exactly what you’re modifying. Avoid modifying any classes outside the parent “nested-invoice container” as this will affect the user interface rather than the actual invoice.

Another trick you can use to find a class name in Google Chrome is to right click on your screen at the position of the element and select the option “Inspect element” in the context menu. This will open the developer tools panel and highlight the exact class you’re interested in, or near enough (you may need to look around the highlighted area).

OK, that’s about all we will cover on the basics. Experimentation is always the best way to learn, so have a play around with the editor. Don’t worry you won’t break anything, and you can always go back to one of the default styles. There are also some excellent online resources that will delve deeper into the world of CSS.

• CSS for beginners
• CSS Basics
• JS Fiddle - A good sandbox for CSS testing

1. Moving things around

When the CSS editor window is open, if you run your mouse over the invoice, the borders of each element will appear. Knowing what you’re editing is half the battle with CSS. You can also use the developer control panel in your browser to see what you’re doing (See "Let's start with the basics" section).

Some elements will have a property “position: absolute;”. This tells the element to position in a very strict position based on an x and y coordinate. For example open the “Standard” template and pop open the CSS editor. Locate the following style:

The styles we are interested in are highlighted in yellow. The styles “left” and “top” act as your x and y axis, change these values and apply the style to see the labels box move around. “Top” defines the number of pixels from the top of the container element, “left” is the number of pixels from the left edge, you can also use “right” and “bottom” for similar effect.

If an element is not set with “position:absolute;” then it will flow with the rest of the content in the container, left to right, top to bottom.

2. Adding a border

Borders are a useful way to see what you’re editing but they may also form part of your desired style. Here (again on the Standard template) I have added a 1 pixel red border around the recipient address. By manipulating these variables I can increase the thickness, change the colour, I can even make the border dashed or dotted by using these words in place of solid.

3. Changing the colour of an element

With some simple CSS styles you can change the text and background colours. Here I have given the address box a light red background colour and I’ve made the text blue.

There are a few different ways of expressing colour in CSS, using the name of the colour or entering the hex code. Both examples are displayed above. The hex code will give you a far bigger palette, there’s a great online colour picker you can use here to get the exact colour you need.

*Note: Don’t forget to use the American spelling for colour (color) in your CSS.

4. Changing the size of an element

The size of an element can be controlled using the width and height attributes.

Be careful when dimensioning and positioning elements. If the elements contain text like the above example you want to avoid that text flowing over other elements on the page.

5. Padding and margins

"Padding" is the spacing inside the element to ensure its contents are inset from the border. "Margin" is a buffer around the outside of the element to push any neighbouring elements away from the border.

In the example below we’ve used a 20px padding-left in order to push the text away from the right border:

6. Changing the size of your logo

The logo will by default try to assume it’s original size. In some cases this may not be desirable and you can use CSS to strictly control the size of your logo using the "height" and "width" attributes.

Try not to stretch your logo beyond its original size as this will result in some unwanted pixelation. In addition, work to retain the original aspect ratio. You will retain the original aspect ratio by setting only the “width” or only the “height”, not both (as in my bad example above). It’s also worth noting here that if you append the attribute “!important;” this tells the editor to override any other style definition and treat this one as the most important. In most cases you won’t need to use this but if your styles aren’t having any effect, try adding it.

7. Hiding things

You can completely hide some elements of the invoice. To achieve this use the property “display: none;”.

8. Changing fonts

You can modify the fonts used on your invoice by using the font-family and font-size attributes. Here we have applied the rather funky “Comic Sans” to demonstrate our quirky side.

If you want to change the basic text of the invoice then look for the class “.invoice-text.” Remember to stick to web-safe fonts, otherwise your clients may be looking at something different to what you see.

9. The dreaded overlap

When things start overlapping it can be hard to see how the problem can be fixed. Some elements contain predictable content, for example the sender address (your address) will always remain the same, the recipient address however may vary in terms of the number of lines and the length of each line. For variable contents consideration must be made to allow those contents to expand gracefully.

For any overlaps first decide whether it is the element invading the space or the element that is getting eclipsed that is at fault. For the former you may want to modify the size of the offending element, for the latter it may be a case of moving its position so it’s clear of the overlap.

10. HELP! I’ve broken everything

Don’t panic, if you’ve destroyed your style you can always revert back to one of the predefined styles in the gallery. Remember, (though it could be too late if you’re reading this) you can save incremental copies of your styles, just give each one a modified name in the editor. 

You may also conclude that professional help is needed to get the exact look you’re after. As mentioned previously CSS is a universal language and any decent web developer should be able to traverse this subject with ease, saving you a lot of stress in the long run as accounting can be enough of a headache without additional things to worry about.

iMail integration

If you use the iMail integration for posting out your invoices you will need to consider the position of the recipient address when designing your template. Only the "Standard" invoice template will work with iMail out of the box. It is possible to modify any of the other templates by re-positioning the address. When you click to send an invoice through iMail you will now see a shaded red box positioned according to the window on the envelope. If your recipient address does not sit inside this shaded area then iMail will not be able to post the item.

Change default text with CSS Transform classes

Technically this is trick number 11, but it has it's own guide so we thought we'd leave it at 10 here... But still it's worth a mention!

In some cases you may want to overwrite the default labels within the invoice template, things like “Invoice No”, “Due Date”, “Issue Date” etc. A particular use-case might be when you want to customise the template with your own language. For this we can use CSS transform classes. These are custom classes that allow you to swap out the text in labels with your own. If this is something you’re looking to do then please take a look at the following guide.