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

Wie können wir in einer Offerte oben im Absender 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 können die Template Script Sprache Velocity (Userguide auf Englisch) verwenden.

1. Dokumentvorlage kopieren und bearbeiten

Es ist empfehlenswert die 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. 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 wärs 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.

3. 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

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 rechten 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 Menü 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: