Individuelle Dokumentvorlagen mit dem HTML / CSS Editor gestalten

Tutorial: Eigene Dokumentvorlagen für einheitliche Auftragsdokumente erstellen. Mit Variablen / Platzhaltern arbeiten, ein Briefpapier hinterlegen, Telefonnummer und Website im Infoblock darstellen, Logo positionieren und die Schriftart ändern.

Inhalt 

  1. Dokumentvorlage kopieren und bearbeiten
  2. Platzhalter für Telefonnummer und Website einfügen
  3. Briefpapier hinterlegen
  4. Zeilenabstand abstimmen
  5. Logo positionieren
  6. Schriftart anpassen
  7. Welche HTML/CSS Befehle werden unterstützt
Screenshot der Rechnung mit individuellen Anpassungen im HTML/CSS Editor. Info-Block mit Telefonnummer und Website des Sachbearbeiters, Zeilenabstand angepasst, Logo eingerückt, Schriftart geändert.

Wie können wir in einer Offerte oben im Infloblock die Telefonnummer des zuständigen Sachbearbeiters und die Firmenwebseite anzeigen? Ausserdem ein Briefpapier hinterlegen, Schriftart anpassen und das Logo verschieben?

Das Tutorial zeigt einen ganz kleinen Anriss, was alles möglich ist. Versiertere User:innen können die Template Script Sprache Velocity (Userguide auf Englisch) verwenden.

1. Dokumentvorlage kopieren und bearbeiten

Es ist empfehlenswert eine Dokumentvorlage zu kopieren, damit immer wieder auf die ursprüngliche Vorlage zurückgegriffen werden kann, falls etwas nicht passt.

Im HTML Editor zur entsprechenden Zeile fahren, wo die Telefonnummer des Sachbearbeiters und die Webseite angezeigt werden sollen.

Nun alle im Screenshot markierten Zeilen kopieren:

   $i18n.tax_code
   $uid

und zweimal im Anschluss einsetzen, einmal für die Telefonnummer und einmal für die Webseite.

Screenshot der Dokumentvorlagen Konfiguration mit dem geöffneten HTML Reiter, wo der Code angepasst wird

2. Platzhalter für Telefonnummer und Website einfügen

Zuerst wird die Klasse wie folgt geändert: tax_code einmal ersetzen durch phone und einmal durch website. Das vorangehende Kürzel "$i18n." wird technisch benötigt um die Mehrsprachigkeit zu gewährleisten.

Anschliessend wird die Variable der Umsatzsteuer ID "$vatUid" überschrieben indem sie markiert wird und über das Platzhalter-Menü Sachbearbeiter Telefon Arbeit bzw. Website ausgewählt wird. Dadurch werden die Platzhalter "$rpFullName" bzw. "$rpUrl" eingesetzt.

Screenshot des Platzhalter Dropdown Menüs, wo Variablen gewählt werden können, welche dann im Code dargestellt werden

3. Briefpapier hinterlegen

Ein A4-PDF mit zwei gelben Elementen soll in den Hintergrund gelegt werden und den Wiedererkennungswert der versendeten Rechnungen zu steigern. Im Reiter Briefpapier die Datei auswählen und hochladen. Das wars schon.

Die PDF Datei darf eine maximale Grösse von 400 KB aufweisen.

Screenshot der Dokumentvorlagen Konfiguration mit dem geöffneten Briefpapier Reiter, wo eine grafische Vorlage als PDF hinterlegt werden kann.

4. Zeilenabstand abstimmen

Da der Zeilenstand bei den Bezeichnungen nicht mit den Infos daneben abgestimmt ist, kann dies im CSS Reiter der Dokumentvorlage angepasst werden.

Dazu diese beiden Zeilen im Document Info Table mit dem markierten Code ergänzen:

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 des Info Blocks der Dokumentvorlage

5. Logo positionieren

Nun soll das Logo noch etwas mittiger platziert werden. Dies wird erreicht indem vom linken Rand die Zentimeterzahl erhöht wird oder vom rechten Rand. Dazu in  der Dokumentvorlage im CSS Reiter zum folgenden Bereich navigieren und beim Befehl left: 2cm; ausprobieren wie viel Zentimeter vom linken Rand benötigt werden:

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

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

 

Screenshot der Dokumentvorlagen Konfiguration mit dem geöffneten CSS Reiter, wo der Code zur Einrückung des Logos angepasst wird.

6. Schriftart anpassen

Im CSS Reiter kann auch eine andere Schriftart für das Dokument oder Teile davon ausgewählt werden. Durch Markieren der Schrift im Code und anschliessendes Auswählen einer andere Schriftart im Dropdown Menu Schriften wird der Name ersetzt.
Die Grösse der Schrift kann durch Erhöhen/ Verringern von font: 13pt beeinflusst werden. Einfach ausprobieren, es kann nichts schief gehen.

Nun die Vorlage speichern, auswählen und refreshen. So sieht das Ergebnis der Anpassungen aus:

Screenshot der Dokumentvorlagen Konfiguration mit dem geöffneten CSS Reiter, wo aus dem Schriftarten Dropdown Menu eine andere Schrift ausgewählt werden kann.

7. Welche HTML tags und CSS properties unterstützt werden

Das HTML / CSS der Dokumentvorlagen ist eingeschränkt. Die vollständige Liste, welche HTML tags und welche CSS properties unterstützt werden, finden sich hier als PDF Download:

HTML tags

CSS properties

Screenshot der Auflistung der unterstützten HTML tags

Noch mehr Individualität gewünscht?

Wir erstellen für Sie mit HMTL/ CSS eine Dokumentvorlage nach Ihrem Manuskript. Ab CHF 220.– für ein einseitiges Dokument. Senden Sie uns unverbindlich eine Anfrage.

Beispiele ansehen
 

Jetzt anfragen

Stapel von verschiedenen personalisierten Dokumentvorlagen