< 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, in dem auf das PLUS Zeichen geklickt wird. Hier kann dann direkt der neue Stellplatz gebucht werden, der benötigt wird um die Datei hochzuladen

mceclip0.png

mceclip1.png

 

 

11 Kommentare

  • 2
    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 ?

  • 6
    Avatar
    Magdalena Rybak

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

  • 3
    Avatar
    Karola von Sturm

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

  • 0
    Avatar
    post

    Da ist ein Bug in der Software: Wenn ich den Footer auf Schwarz setze, wird er grau ausgegeben:

    footer table {
    width:100%;
    color:#000000;
    }

  • 0
    Avatar
    Stephanie Brüning

    Bei den im Beitrag verlinkten Vorlagen handelt es sich um Word und Excel-Vorlagen, nicht um die HTML Vorlagen, die hier erklärt werden. Wo kann man die HTML Vorlage finden, von der im Beitrag gesprochen wird? Vielen Dank.

  • 3
    Avatar
    Karola von Sturm

    Hallo Stephanie, ich habe den Eindruck, dass der SevDesk Support überfordert ist. Vielleicht hilf dir das: Bei den Briefpapier-layouts findest du einen kleinen Download-Button in der rechten unteren Ecke. Wenn du diesen Download in einem HTML-Editor öffnest, hat du die HTML-Vorlage.
    Gruß Karola

  • 0
    Avatar
    David Lipkowski

    Wie kann ich via api angeben welches Template ich möchte ?

  • 1
    Avatar
    Giuseppe La Cava

    Es ist bewusst, dass ihr Layout Gestaltungs Service evtl. leidet, wenn sie dem Kundenwunsch nachkommen, alle möglichen Variablen und i18n Einträge offen zu legen. Aber in meinen Augen sollte sowas zum Service gehören, wenn schon mit komplett eigens gestaltbaren Templates geworben wird... Es würde ja schon reichen, für den Anfang das "data" Objekt als JSON File zur Verfügung zu stellen. Müsste ja nicht mal eine Dokuemntation her...

  • 0
    Avatar
    Vincent Kooijman

    Diese Dokumentation braucht unbedingt noch eine Liste aller möglichen Variablen!

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