Please enter a search term.
Error ~ No results could be loaded.
Tutorial: Create your own layouts 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
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).
The existing layouts are accessed via Settings Order categories Layouts. Here you can create new ones, edit existing ones or duplicate them by copying them in order to change them individually.
In the screenshot, all areas are expanded so that all options are visible.
Header
Show/hide logo in the header area of documents
Logo height in cm (positioning via CSS tab: header img.logo)
Show sender address in address window
Show responsible person in info block
Show customer no. or supplier no. in the info block
Show heading (document title such as invoice, quotation)
Position table
Show column item no.
Show column with article no. (if available)
Show column with tax rate per item
Show unit column (e.g. pcs. or hrs.)
Round unit prices (only for display, calculated with up to 8 decimal places)
Display payments below the total total
Show tax with 0.00 in totals
Footer
A footer text can be stored here. It is best to insert plain text from a text editor, not pre-formatted from Word. Or write here from scratch
Show page numbers
QR section
Leave the amount on the QR payment slip blank or not
Generate QR code without reference number
QR section without the dashed dividing line
Standard template
Should the document template be used as standard for all documents? The template stored in the order category overwrites this standard. See Configure order management
Set layout inactive
It is recommended to copy a layout 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.
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. In addition, the “class=”$uidCls” must be removed from the tag.
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".
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.
Since the line position for the labels is not aligned with the info next to it, this can be adjusted in the HTML/CSS tab of the layout.
To do this, add the highlighted code to these two lines in the layouts Info Table CSS snippet:
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;
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 Header snippet in the HTML/CSS tab of the layout and try out the command left: 2cm; to see how many centimeters of the left margin are needed:
header img.logo {
position: absolute;
top: 1.5cm;
left: 7.5cm;
}
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:
The HTML / CSS of the layouts is restricted. The complete list of which HTML tags and which CSS properties are supported can be found here as a PDF download:
We create a layout for you with HMTL/ CSS according to your manuscript. From CHF 220.- for a one-page document. Send us a non-binding request.
