Design individual document templates with the HTML / CSS editor

Tutorial: Create your own document templates for uniform order documents. Work with variables / placeholders, deposit a stationery, display phone number and website in the info block, position logo and change the font.

Content 

  1. Copy and edit document template
  2. Insert placeholder for phone number and website
  3. Add stationery
  4. Adjust line spacing
  5. Position logo
  6. Adjust font
  7. Which HTML tags and CSS properties are supported
Screenshot of the invoice with individual adjustments in HTML/CSS editor. Info block with phone number and website of the person in charge, line spacing adjusted, logo indented, font changed.

How can we display the phone number of the responsible person and the company website in the info block at the top of a quote? How can we add a stationery, change the font and move the logo?

The tutorial shows a very small outline of what is possible. More experienced users can use the template script language Velocity (Userguide in English).

 

 

 

1. Copy and edit document template

It is recommended to copy a document template so that you can always go back to the original template if something does not fit.

In the HTML editor, move to the appropriate line where you want to display the phone number of the person in charge and the web page.

Now copy all lines marked in the screenshot:

   $i18n.tax_code
   $uid

and insert it twice afterwards, once for the phone number and once for the web page.

Screenshot of the document template configuration with the HTML tab open where the code is customized

2. Insert placeholder for phone number and website

First the class is changed as follows: replace tax_code once with phone and once with website. The preceding abbreviation "$i18n." is technically needed to ensure multi-language support.

Then the variable of the sales tax ID "$vatUid" is overwritten by selecting it and choosing respobsible person phone work or website from the placeholder menu. This will insert the placeholders "$rpFullName" or "$rpUrl".

Screenshot of the placeholder dropdown menu, where variables can be selected, which are then displayed in the code

3. Add stationery

An A4 PDF with two yellow elements shall be placed in the background and increase the branda recognition of the sent invoices. In the stationery tab, select the file and upload it. That's it.

The PDF file must have a maximum size of 400 KB.

Screenshot of the document templates configuration with the opened stationery tab, where a graphical template can be stored as PDF.

4. Adjust line spacing

Since the line position for the labels is not aligned with the info next to it, this can be adjusted in the CSS tab of the document template.

To do this, add the highlighted code to these two lines in the Document Info Table:

div.docinfo table td {
   white-space: nowrap;
   vertical-align: center;
}
div.docinfo table td:first-child {
   font-size: 7pt;
   text-align: right;
   padding-right: 5pt;
   padding-top: 1pt;

 

Screenshot of the Info Block of the Document Template

5. Position logo

Now the logo should be placed a bit more centrally. This is achieved by increasing the number of centimeters from the left margin or from the right margin. To do this, navigate to the following area in the CSS tab of the document template and try out the command left: 2cm; to see how many centimeters of the left margin are needed:

/*******************************************************
* HEADER / FOOTER
********************************************************/

header img.logo {
position: absolute;
top: 1.5cm;
left: 7.5cm;
}

 

Screenshot of the document template configuration with the CSS tab open, where the code to indent the logo is adjusted.

6. Adjust font

The CSS tab can also be used to select a different font for the document or parts of it. By selecting the font in the code and then choosing a different font in the Fonts dropdown menu, the font name will be replaced.
The size of the font can be influenced by increasing/decreasing font: 13pt. Just try it out, nothing can go wrong.

Now save the template, select it and refresh it. This is how the result of the adjustments looks like:

Screenshot of the document template configuration with the CSS tab open, where a different font can be selected from the font dropdown menu.

7. Which HTML tags and CSS properties are supported

The HTML / CSS of the document templates is restricted. The complete list of which HTML tags and which CSS properties are supported can be found here as a PDF download:

HTML tags

CSS properties

Screenshot of the list of supported HTML tags

You want even more individuality?

We create a document template for you with HMTL/ CSS according to your manuscript. From CHF 220.- for a one-page document. Send us a non-binding request.

View examples
 

Make a request now

Batch of different personalized document templates