Most template settings can be easily changed by checking some boxes or by typing text in some fields. That's how you can specify the page format, the logo, the columns of the invoice and their names or the totals.

Headers and footers on the other hand are more complex and they may contain HTML code and placeholders for specific invoice fields. Add the following text to the Invoice/Footer field to display the invoice notes:

${invoice.notes}

Just like invoice.notes, there are many other placeholders for the fields of an invoice, your business and your client's business. The complete list of placeholders can be found here. If you want to know more about placeholders, we have a separate section that explains them.

If you want to format the text, you need to use HTML code. Add the following text to the Invoice/Footer field to display the invoice notes and a thank you note:

<p>${invoice.notes}</p>
<br/>
<p><center>Thank you for your business!</center></p>

The text between <p> and </p> represents a paragraph, <br/> represents a line-break while the text between <center> and </center> will be displayed centered. Another tag that you may want to use to format text as bold is <b> </b>. See this guide if you want to learn HTML at basic level.

The template editor has a CSS field in the Style section where users can enter custom CSS code to adjust the look and format of the final document. This feature is meant to be used only by people who know CSS.

Here are a few snippets that you can use to customize the invoice template.

Snippet 1: Display totals only on the last page

.table tfoot {
  display: table-row-group;
} 

If the invoice has multiple pages, totals are displayed on each page. This code changes the table to display the totals only on the last page.

Snippet 2: Force the invoice table to a certain height

.table {
  height: 12cm;
}

The invoice table height is variable and depends on what's in the table. This code forces it to have a specific height.

Snippet 3: Paint a line above the table footer (totals)

.table tfoot tr:first-child td {
  border-top: 1px solid black;
}

Use this code if you want to separate the totals from the rest of the table by drawing a line.

An invoice template created by the template editor stores two things that allow it to be edited:

The meta-template allows you to make complex changes to your templates that can't be done by simply configuring some settings. If an invoice template is not generated the way you want it to be, you should change the meta-template instead of editing the template outside the application. The meta-template is available in the Meta-template field of the template editor.

Here are a few things that you can change in the meta-template:

The meta-template uses angle bracket tag syntax (e.g. <#directive> ... </#directive>) and square bracket interpolation syntax (e.g. [=variable]) while the actual template uses square bracket tag syntax (e.g. [#directive] ... [/#directive]) and dollar interpolation syntax (e.g. ${variable}).