Skip to content

Invoice template customization: HTML and CSS editor based on the DEFAULT and BLUE templates

• Number of views: 9775 • 4 min read

Go to section

  1. How to open the invoice template editor?
  2. Where can you download the template files from GitHub?
  3. How to paste the HTML and CSS template code?
  4. How to change the DEFAULT template to look like the BLUE template?
  5. What should you know about how templates work?

A custom invoice printing template allows you to change the design and appearance of documents generated by the system. This option is useful for those who want to adapt invoices to their company’s visual identity. After pasting the HTML and CSS code, the template will be ready to use both for new and existing documents.

ATTENTION! Template management is available only to users with administrator permissions. Templates can be created and edited by people with the account owner or administrator system role, as this requires access to the account settings.

How to open the invoice template editor?

To create a custom invoice template based on the system templates:

  1. Go to Settings > Account settings > Invoice templates. Account settings menu with the Invoice templates option
  2. Scroll to the bottom of the page, to the Custom invoice template section, and click the Add new template button. Add new template button in the Custom invoice template section
NOTE! The option to create custom templates is available in the Professional and Enterprise plans.

Where can you download the template files from GitHub?

The system uses templates in Handlebars (HBS) format. Several system templates are available, including DEFAULT (basic design) and BLUE (a variant with a touch of blue). Download the relevant files and copy their contents:

  1. download the HTML file for the DEFAULT template: default.hbs.html — copy all of its contents;
  2. download the CSS file for the DEFAULT template: default.css — copy all of its contents;
  3. if you want to use the BLUE variant instead of DEFAULT, download the CSS file: blue.css — use it instead of the DEFAULT CSS file in step 2.

You can also find all example templates in the GitHub repository.

How to paste the HTML and CSS template code?

  1. In the template editor, paste the copied HTML code into the upper field (HTML field). You can also use the Insert example template option. HTML field in the invoice template editor with the template code pasted
  2. Paste the copied CSS code into the lower field (CSS field). CSS field in the invoice template editor with the style code pasted
  3. Make your modifications to the code.
  4. Click Save to confirm the changes.
NOTE! The template preview will only be available after saving the changes. The system will generate a sample document that you can review before using the template on your actual invoices.
Preview of the custom invoice template after saving the changes
IMPORTANT! Do not switch the positions of the fields: do not paste the CSS into the upper field or the HTML into the lower field. The system will not display any error, but the invoice will look incorrect. The error will be visual only and difficult to detect.

The image shown below shows the editor with the HTML (upper) and CSS (lower) fields highlighted:

How to change the DEFAULT template to look like the BLUE template?

The BLUE template differs from the DEFAULT template in its color scheme and requires an additional change to the HTML code: moving a specific element to another location. Below is the element that needs to be moved.

HTML responsible for displaying the document name and number before the change.

Template HTML code with the document name and number before the change to BLUE

HTML after the change.

Template HTML code with the document name and number moved for the BLUE template

Download the blue.css file and copy its contents.

  1. In the template editor, paste the blue.css code into the lower field (CSS field) — it will replace the default CSS.
  2. In the upper field (HTML field), move the highlighted element to the location indicated in the image above.
  3. Click Save.

What should you know about how templates work?

A template created this way is a new, independent template, even if it is based on one of the system templates.

Previously issued documents retain the template they were created with. Changing the default template in the account or department settings affects only new documents. The template of an archived document will change only if it is manually selected while editing that document.

ATTENTION! A template can be assigned in the general account settings and to a dedicated department. However, a template cannot be assigned to a specific customer or document type. When generating a document, the system first checks the template assigned to the department, and if there is none, it uses the account's default template.
ATTENTION! If you use external fonts (e.g. Google Fonts) or images hosted outside the system in your template, they may increase the time required to generate the PDF. The time limit for generating a document is 30 seconds — if an external resource is unavailable or slow, PDF generation may fail.
Previous Changing the position of the logo on the invoice Next Changing the invoice template

Was this entry helpful?

Share

Main response Maria 2016-08-12 10:31

@Zoltán Pataki, thank you for your remark. We updated the link, now you can download the actual version.

Comments (4)

Anonymous 2015-12-17 08:13

Thank

Anonymous 2016-08-11 18:48

This is not the default template.

Maria Seta !!
Maria 2016-08-12 10:31 Main response

@Zoltán Pataki, thank you for your remark. We updated the link, now you can download the actual version.

Anonymous 2017-09-25 20:33

The repository does not have all the files needed. Template is incomplete. Ex. positions_correction.hbs.html