Bitte einen Suchbegriff eingeben.
Fehler ~ Es konnten keine Ergebnisse geladen werden.
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
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.
Ü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
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.
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.
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.
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;
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;
}
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:
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:
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.
