Layouts individuell anpassen — auch mit dem HTML / CSS Editor

Tutorial: Eigene Layouts 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. Layouts Konfiguration
  2. Layout kopieren und bearbeiten
  3. Platzhalter für Telefonnummer und Website einfügen
  4. Briefpapier hinterlegen
  5. Zeilenabstand abstimmen
  6. Logo positionieren
  7. Schriftart anpassen
  8. 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. Layout Konfiguration

Über Einstellungen Auftragskategorien  Layouts werden die vorhandenen Layouts aufgerufen. Hier können neue erstellt oder bereits bestehende bearbeitet oder über kopieren dupliziert werden um sie individuell zu verändern.

Kopf /Header:
Logo im Kopfbereich von Dokumenten ein-/ausblenden
Logo-Höhe in cm (Positionierung über Reiter CSS: header img.logo)
Absenderadresse im Adressfenster anzeigen
Sachbearbeiter im Infoblock anzeigen
Kunden-Nr. oder Lieferanten-Nr. im Infoblock anzeigen
Überschrift anzeigen (Dokumenttitel wie Rechnung, Offerte)

Positionstabelle:
Spalte Positions-Nr. anzeigen
Spalte mit Artikel-Nr. (sofern vorhanden) anzeigen
Spalte mit Steuersatz pro Artikel anzeigen
Spalte Einheit (z.B. Stk. oder Std.) anzeigen
Stückpreise runden (nur für Darstellung, berechnet wird mit bis zu 8 Dezimalstellen
Zahlungen unterhalb des Gesamttotals darstellen
Steuer mit 0.00 in Totalen anzeigen

Fuss / Footer:
Hier kann eine Fusstext hinterlegt werden. Am besten reinen Text aus einem Texteditor einfügen, nicht vor formatiert aus Word. Oder hier neu schreiben.
Seitenzahlen anzeigen

QR Abschnitt:
Betrag auf dem QR Einzahlungsschein frei lassen oder nicht
QR Code ohne Referenznummer generieren
QR Abschnitt ohne die gestrichelte Trennlinie

Standard-Vorlage
Soll das Layout für alle Dokumente als Standard verwendet werden? Die in der Auftragskategorie hinterlegte Vorlage überschreibt diesen Standard. Siehe Auftragsbearbeitung konfigurieren

Inaktiv setzen der Vorlage

Screenshot der Konfiguration der Layouts

2. Layout kopieren und bearbeiten

Es ist empfehlenswert ein Layout 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 Layout Konfiguration mit dem geöffneten HTML/CSS Reiter, wo der Code angepasst wird

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. Ausserdem muss im Tag noch die "class="$uidCls" entfernt werden.

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. Briefpapier hinterlegen

Ein A4-PDF mit zwei gelben Elementen soll in den Hintergrund gelegt werden um 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 Layout Konfiguration mit dem geöffneten Briefpapier Reiter, wo eine grafische Vorlage als PDF hinterlegt werden kann.

5. Zeilenabstand abstimmen

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

Dazu diese beiden Zeilen im CSS Snippet der Info Tabelle 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 eines Rechnungsdokuments

6. 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 im Layout im Reiter HTML/CSS Reiter zum Snippet Header gehen und beim Befehl left: 2cm; ausprobieren wie viel Zentimeter vom linken Rand benötigt werden:

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

 

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

7. 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 Layout Konfiguration mit dem geöffneten HTML/CSS Reiter, wo aus dem Schriftarten Dropdown Menu eine andere Schrift ausgewählt werden kann.

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

Das HTML / CSS der Layouts ist eingeschränkt. Die vollständigen Listen, 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 ein Layout 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 Layouts