Eigenes Layout hinterlegen

Hier wird erläutert welche Parameter zur Verfügung stehen, um das Layout anzupassen und wie man dieses in sevDesk hochlädt.

Unter Einstellungen → Briefpapier → Layouts bieten wir die Möglichkeit individuelle Layouts für Rechnungen, Angebote, etc. zu hinterlegen. Die Grundlagen hierfür bilden individuelle HTML-Vorlagen, welche man über Klick auf den Pfeil der jeweiligen Vorlage, herunterladen kann

 

7E79ED37-880E-42E5-8064-F8F39D080B0F_4_5005_c

 

Anschließend kann man diese in einem entsprechenden HTML-Editor öffnen und bearbeiten.

Pro Dokumenten-Typ (Rechnung, Mahnung, Angebot etc.) gibt es eine eigene Vorlage. Hier können Beispieldaten heruntergeladen werden, und selbständig angepasst. 

Zum Hochladen eines Layouts ist ein zustzlicher Stellplatz notwendig. In den Tarife Buchhaltung und Warenwirtschaft, sind bereits jeweils ein zusätzlicher Stellplatz kostenfrei enthalten. Jeder weitere Stellplatz muss kostenpflichtig gebucht werden und wird mit 4,90€ zzgl. MwSt./Monat berechnet.

Ein neuer Stellplatz kann über das Plus Zeichen gebucht bzw. nach Freischaltung das neue Layout hier hochgeladen werden:

664417A0-33ED-40F1-9EB0-215C28F91D3A_4_5005_c

 

Genrell kann die Anpassung des Layouts auch durch unser Fachteam erfolgen. Hier ist es notwendig eine unverbindliche Anfrage an das Layoutteam über folgenden Link zu versenden.

Folgende Anpassungen im Bereich Layouts 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



DC001F00-5B2E-46AC-A38D-74F86AB522A3

 

 

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.
6649CECF-03EC-40C5-BF32-EB4135B40954_4_5005_c
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.
89698233-9AAB-48F1-8376-C6DC1A579042_4_5005_c

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.
A695B26C-C15E-4B98-9AE5-D0EEC99158CB_4_5005_c

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.
C5489CEB-6CF4-4DF5-9CD5-FE8F9E7919E8_4_5005_c
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.
2833169B-81C4-41A0-BC4B-191CF0F4B16F_4_5005_c

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. 
AFCD2A87-EB1C-41E0-931D-178ED0CFC270_4_5005_c

Wenn man mehrere Schriftstärken verwenden möchte, kann man das wie in folgendem Beispiel lösen:
5780F71D-5992-4469-A225-7069617CA028_4_5005_c