4.2. Using the template editor
Prev  Chapter 4. Templates guide: How to create and edit templates for Fanurio  Next

4.2. Using the template editor

The template editor is recommended for both beginners and advanced users who want to create an HTML invoice template. Our support team prefers to use the editor rather than to code templates by hand.

The template editor can be used to create new templates or to edit existing ones.

  • Go to File » Template Editor to open the template editor.

  • If you've already created a template, go to the Invoices view and click the View button to view an invoice. You can then click the Edit link next to the Templates drop-down list to edit the currently used template.

    The nice thing about opening the template editor from the View Invoice window is that you can adjust the template and see how that specific invoice will look like.

The editor works with HTML templates but you don't have to know HTML to use it, although this might help if you want to adjust even the smallest details. The templates created by the template editor should not be edited outside Fanurio unless you don't want to open them again in the template editor.

Note: The template editor can only open templates it created. It cannot import old HTML templates or templates created manually. If you have an old template, it should be relatively easy to recreate it with this editor.

4.2.1. Basic settings

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.

Example 1: Changing a simple setting (the logo)

  1. Go to the Page section,

  2. Check the Logo box,

  3. Click the link next to the Logo box to specify the logo image,

  4. Click the Update button to see how it looks like and

  5. Optionally, adjust the Height and click Update again to see how the look changes.

Example 2: Using placeholders (showing the invoice notes at the bottom of the invoice)

  1. Go to the Invoice page,

  2. Scroll down to the Footer text area,

  3. Type or paste the following text:

    ${invoice.notes}

  4. Click the Update button to see the notes at the bottom of the invoice.

You need to use ${invoice.notes} in order to access the notes of the invoice. 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.

Example 3: Using HTML to do simple formatting (showing a thank you note at the bottom of the invoice)

  1. Go to the Invoice page,

  2. Scroll down to the Footer text area,

  3. Type or paste the following text:

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

  4. Click the Update button to see the notes at the bottom of the invoice.

This footer contains HTML code to format the text. 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.

4.2.2. Adjust the look and format using CSS (for advanced users only!)

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.

Prev  Up  Next
Chapter 4. Templates guide: How to create and edit templates for Fanurio  Home  4.3. The anatomy of a simple template