< Zurück zur sevDesk Webseite

Individuelle Layouts

Zusätzlich bieten wir die Möglichkeit individuelle Layouts für Rechnungen, Angebote etc. zu hinterlegen. Die Grundlage hierfür bilden individuelle HTML-Vorlagen.

Folgende Anpassungen sind denkbar:

  • Ränder anpassen
  • Eigene Schriftart hinterlegen (TTF, OTF, Webfonts)
  • Felder entfernen
  • Anordnung oder Positionierung der Elemente ändern
  • Farben anpassen
  • Regeln pro Seite hinterlegen

Pro Dokumenten-Typ (Rechnung, Mahnung, Angebot etc.) gibt es eine eigene Vorlagen. Es können aber beliebig viele Vorlagen hochgeladen werden. Hier kannst du die Beispieldateien herunterladen und selbstständig anpassen. Solltest du Fragen zu den Vorlagen haben, unterstützen wir dich gerne bei der Anpassung. Melde dich einfach bei uns im Support.

HTML / CSS

Die Darstellung von HTML und CSS orientiert sich weitestgehend an den Standards der W3C für Seiteninhalte. Grundsätzlich funktioniert die Darstellung genau so wie im Web, nur mit Seiten, Seitenumbrüchen, und Millimeter anstatt Pixel.

Für die Parameter und Variablen werden geschweifte Klammern in den Vorlagen verwendet. Diese werden später durch die Inhalte ersetzt.
head-text
Hier Beispielsweise der Platzhalter für den Kopftext einer Rechnung.

Aufbau der Dateien

Die Dateien müssen alle notwendigen Ressourcen beinhalten (CSS, HTML, Bilder etc.). Bilder oder Schriften können hierbei als Base64 String eingebettet werden.
Grundsätzlich beinhalten unsere Vorlagen Platzhalter für die Daten (Bsp. aus einer Rechnung) und Platzhalter für die Übersetzungstexte.
Beispielcode-Rechnungsvorlage copy

Kopf- und Fußbereich

Die Bereiche HEADER, FOOTER und ASIDE werden auf allen Seiten gedruckt. Das sind sogenannte Running-Elements, da diese auf jeder Seite erneut gedruckt werden. Es ist wichtig, dass diese HTML-Elemente als erstes im Dokument vorhanden sind. Alle anderen Bereiche können danach folgen.

Bedingungen / Parameter (IF)

Damit die Vorlagen sich dynamisch auf Parameter anpassen können, verwenden wir in den Vorlagen Bedingungen. Dadurch erscheinen Elemente je nach Parametereinstellung oder vorhandensein einer Variable nicht. In folgendem Beispiel werden die Falzlinien nicht gedruckt, wenn der Parameter in der Dokumentenvorschau nicht gesetzt ist.
Layout-Parmeter

Einbetten von Bildern und Logos

Wenn man sein eigenes Logo oder sonstige Bilder in den Vorlagen verwenden möchte, müssen diese Ressourcen über Base64 Strings eingebettet werden.
Beispielcode-Bild
Folgendes Online-Tool kann Bilder in ein Base64-String umwandeln.
https://www.base64-image.de/

Schriftarten

Es gibt zwei Möglichkeiten unterschiedliche Schriftarten in den Vorlagen zu verwenden.

Option 1: Webfont

Einige Online-Portale, wie zum Beispiel Google-Fonts, stellen URL’s und Code-Schnipsel für Webfonts zur Verfügung. Diese können einfach direkt in den Vorlagen verwendet werden.
Webfont

Option 2: Einbetten von TTF- oder OTF-Dateien

Oft hat man nur die klassischen Schrift-Dateien wie beispielsweise TTF zur Verfügung. Diese kann man als Base64-String in die Dokumente einbetten. 

Wenn man mehrere Schriftstärken verwenden möchte, kann man das wie in folgendem Beispiel lösen:

Einbinden der Vorlagen in den Account

Du findest den Bereich in den Einstellungen unter dem Menüpunkt „Briefpapier“. Der Bereich glieder sich in „Briefpapiere“ und „Layouts“. Die HTML-Vorlagen können in dem Menüpunkt „Layouts“ hochgeladen werden.

Briefpapier

 

 

5 Kommentare

  • 4
    Avatar
    gv.shop

    Ist es nicht möglich, eigene Felder hinzuzufügen?

  • 4
    Avatar
    Benjamin Funk

    Wo kann ich die HTML Vorlagen zum Bearbeiten downloaden?

  • 1
    Avatar
    Jan Emmerich

    Wie kann ihc Felder Umbenennen oder hinzufügen ?

  • 5
    Avatar
    Magdalena Rybak

    Wo finde ich denn eine Referenz aller möglichen Variablen und Parameter?

  • 1
    Avatar
    Karola von Sturm

    Wo finde ich denn eine Referenz aller möglichen Variablen und Parameter?

Bitte melden Sie sich an, um einen Kommentar zu hinterlassen.