Wenn du über HTML- und CSS-Kenntnisse verfügst, kannst du selbstständig eine Anpassung des Layouts durchzuführen.
1. HTML-Templates herunterladen
Gehe im Hauptmenü zu Einstellungen und dann Briefpapier. Im Reiter Layouts stehen dir verschiedenen HTML-Templates zum Herunterladen zur Verfügung.
Wähle im Feld Typ die entsprechende Dokumentenart (Rechnung, Mahnung, Angebot, etc.) aus.
Klicke dann auf das entsprechende blaue Pfeil-Symbol, um das entsprechende Template herunterzuladen.
2. Aufbau des HTML-Dokuments
Der Aufbau der HTML-Dokumente orientiert sich weitestgehend an den Standards der W3C für Seiteninhalte.
Die Bereiche HEADER, FOOTER und ASIDE werden auf allen Seiten gedruckt - es sind sogenannte Running-Elemente. Sie erhalten eine feste Position und werden somit auf jeder Seite und an der exakt selben Position des Dokuments dargestellt. Im Code werden diese Bereiche als erstes innerhalb des bodys definiert. Anschließend werden alle Informationen, die von dem jeweiligen Dokument übernommen werden, eingefügt. Dabei orientiert sich der Aufbau des Codes an der Darstellung der Elemente im finalen Dokument.
Zu Beginn werden Absenderzeile (adressline) und Empfängeradresse (recipient) eingefügt. Daraufhin folgt die Infobox (descbox), die aus Rechnungsnummer, etc. besteht.
Unterhalb der Infobox (descbox) werden der Betreff ({{data.object.header}}) und der Kopftext (headtext) eingefügt. Zwischen Infobox und Betreff gibt es zudem ein Element (invisible), das den Abstand zwischen den Komponenten reguliert.
Der Hauptbestandteil der meisten Dokumente ist die Positionstabelle (postable). Diese listet die einzelnen Artikel bzw. Dienstleistungen auf, die in Rechnung gestellt werden. Die Tabelle ist eingeteilt in thead, tbody und tfoot. Im thead sind die Bezeichnungen der einzelnen Spalten definiert. Außerdem wird die Breite der Spalten festgelegt. Die Anzahl der Spalten im thead bestimmt die Spaltenanzahl für die gesamte Tabelle. Im tbody wird für jede Position eine neue Zeile mit den entsprechenden Spalten angelegt. Die Inhalte ergeben sich aus den Eingaben, die bei der Erstellung eines Dokumentes innerhalb der Positionen gemacht werden. Im tfoot werden die Gesamtbeträge, Umsatzsteuerregelungen und Rabatte aufgeführt. Auch hier wird die Spaltenanzahl und -anordnung des thead berücksichtigt.
Abschließend folgt unterhalb der Positionstabelle der Fußtext (footText). Dieser fügt sich zusammen aus dem Text, der bei der Dokumenterstellung direkt getätigt wird, und einigen Systemeinstellungen. Auch der Text zu Skonto und der Zahlungsart, der innerhalb der Rechnungserstellung abgefragt wird, befindet sich innerhalb des footText.
In den Dokumenten Rechnung und Gutschrift befindet sich zwischen der postable und dem footText zudem eine weitere Tabelle für Schlussrechnungen (partialheader). Der Aufbau gleicht der standardmäßigen Positionstabelle (postable). Allerdings werden hier die zugehörigen Teilrechnungen, deren Nettobetrag, Umsatzsteuer und Bruttobetrag und außerdem der verbleibende Restbetrag aufgelistet.
3. Schriftarten einbinden
Es gibt zwei Möglichkeiten, Schriften in den Dokumenten zu verwenden:
Option 1: Webfont
Portale, wie beispielsweise Google-Fonts, stellen URLs und Code für Webfonts zur Verfügung.
Diese können direkt in den <head> Bereich des Layouts eingebunden werden:
Option 2: Einbetten von TTF- oder OTF-Dateien
Die klassischen Schriftdateien können als Base64-String in das Layout eingebunden werden. Mithilfe eines Online-Tools kann die Schriftdatei zu einem solchen String konvertiert werden.
Folgendes Online-Tool kann Schriftarten in solch einen Base64-String umwandeln:
Online @font-face generator — Transfonter
Die gelieferte font-face aus dem stylesheet kann direkt in den CSS-Bereich des Layouts eingefügt werden:
Nachdem die Schriftart eingebunden wurde, muss sie anschließend im CSS des Layouts in der Regel body.main eingefügt werden:
4. Bilder einbinden
Bilder können ebenfalls als Base64-String eingebunden werden.
Folgendes Online-Tool kann Bilder in solch einen Base64-String umwandeln:
Image to Base64
Dieser Base64-String wird in dem Layout in die „src“ für das img-Element eingefügt. Dem Bild sollte anschließend mittels CSS eine Breite und/oder eine Höhe gegeben werden.
4.1 Bild als Link einbinden
Bilder können zudem als Link eingefügt werden. Hierzu sollte das Bild ebenfalls in einen Base64-String umgewandelt werden. Anschließend kann die URL des Bildes, die das Encoding-Tool liefert, in das CSS des Links eingefügt werden. Dem Link sollte schließlich noch die genaue Breite und Höhe gegeben werden, sodass das Bild im Hintergrund richtig dargestellt wird.
Der Link wird im HTML-Code an der gewünschten Stelle eingebunden:
5. QR-Code einbinden
Ähnlich wie Bilder können auch QR-Codes in das Layout eingebunden werden.
Für das Einfügen des QR-Codes wird der Bildlink benötigt. Dieser kann per Rechtsklick kopiert werden. Innerhalb des Codes wird ein daraufhin ein <a>-Link erstellt. Dessen „href“ erhält den kopierten Bildlink. Damit der QR-Code richtig dargestellt wird, sind einige CSS-Regeln notwendig. In den sevdesk-Layouts kann hierfür einfach die Klasse „qrcode url-qrcode“ übernommen werden.
6. Übersicht Parameter und ihre Bedeutung
Hier werden grundsätzliche Informationen zu den Parametern innerhalb der HTML-Layouts erläutert. Eine ausführliche Parameterliste findest du am Ende des Artikels.
Generell gilt: Parameter dürfen nicht bearbeitet werde, da sonst die Funktion verloren geht und die Informationen nicht korrekt eingefügt werden können! Das Verschieben der Parameter stellt kein Problem dar. Allerdings sollte hierbei beachtet werden, dass die Formatierung korrekt erhalten bleibt.
Übersetzung
Inhalte, die von sevdesk automatisch übersetzt werden können, werden durch die geschweiften Klammern {{#i18n}}Text{{/i18n}} umschlossen. Hierbei handelt es sich beispielweise um die Bezeichnungen innerhalb der descbox oder des theads der postable.
Datum
Jedes Datum wird durch {{#date}}…{{/date}} umschlossen, sodass es die richtige Formatierung erhält.
Bedingungen
Damit die Dokumente sich dynamisch anpassen können, verwenden wir Bedingungen. Hier gibt es zwei Varianten:
Die If-Verschachtelung:
{{#VARIABLENNAME}}
… Hier wird der Inhalt ausgegeben, falls die Variable gesetzt wurde.
{{/VARIABLENNAME}}
Die If-Not-Verschachtelung:
{{^VARIABLENNAME}}
… Hier wird der Inhalt nur dann ausgegeben, falls die Variable nicht gesetzt wurde.
{{/VARIABLENNAME}}
Variablen
Alle Variablen, die aus Angaben innerhalb sevdesk übernommen werden, sind mit geschweiften Klammern umschlossen.
{{VARIABLENNAME}}
Hier findest du eine genaue Auflistung der Variablen, die im Code enthalten sind, und deren Bedeutung: