< 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

In dem Tarif „sevDesk Warenwirtschaft“ können beliebig viele PDF-Briefpapiere und Layouts hochgeladen werden. In dem Tarif „sevDesk Buchhaltung“ kann nur ein PDF-Briefpapier und ein eigenes Layout angelegt werden. In dem Tarif „sevDesk Rechnung“ kann nur ein eigenes PDF-Briefpapier hochgeladen und kein eigenes Layout angelegt werden. Bei allen Tarifen kann man zwischen unterschiedlichen Standard-Layouts frei wählen.

 

9 Kommentare

  • 0
    Avatar
    Jacobus Onneken

    Wo finde ich die Angaben um Ränder anpassen zu können? Also z.B. möchte ich bei allen Standard Vorlagen den unteren Rand zum Text vergrößern, da mein Briefpapier hier noch eine Grafik hat, die aktuell vom Text überlagert wird.

  • 0
    Avatar
    sevDesk Team

    Hallo Jacobus,

    Die Individualisierung findet mittels HTML / CSS statt. Hast du da schon Erfahrung? Falls nicht können wir dir auch gerne helfen.

    Viele Grüße Sandro

  • 0
    Avatar
    Jacobus Onneken

    Hallo Sandro, 

    dass es über HTML läuft ist schon klar. Die Frage ist wo genau ich die Angaben finde um den Abstand zu ändern. Ich habe mir den Code angesehen und nichts finden können. Im Prinzip müsste ich in allen Standardvorlagen von unten her gesehen 12-14mm mehr Abstand haben, damit Grafik und Text des Layouts sich nicht torpedieren. Wenn Ihr mir sagt, wie ich das machen kann, super. Alternativ freue ich mich natürlich auch auf Unterstützung. (Wie wäre dafür der Preis?)

    Viele Grüße Jacobus

  • 0
    Avatar
    ahupp

    Hallo sevdesk-Team,

    tolle Funktion! Die Templates sehen mir auf den ersten Blick mustache.js - basiert aus. Können Sie hierfür Testdatensätze mit gefüllten Variablen für die einzelnen Dokumenttypen für die Entwicklung bereitstellen? Dies würde die Erstellung von individuellen Layouts deutlich erleichtern.

    Viele Grüße

  • 0
    Avatar
    sevDesk Team

    Hallo Jacobus & ahupp,

    Jacobus: Schreib uns einfach eine eMail an support@sevdesk.de mit deinen Wünschen, dann machen wir das für dich. Wenn es sich nur um den Abstand handelt, kostet das nix.

    ahupp: Falls du Layouts testen willst, kannst du sie herunterladen und verändern. Die Variablen füllst du selber im Programm. Andere Vorlagen können wir nicht bereitstellen.

    Viele Grüße Sandro

  • 0
    Avatar
    Christopher Kurth

    Hallo,

    für ein leichteres individualisieren des Layouts fände ich jeweils eine PDF Datei mit Beispielinhalten für die Beispieldateien hilfreich. Wäre es möglich solche Dokumente zu erstellen?

    Gruß Christopher

  • 1
    Avatar
    info

    Hallo,

    kann man irgendwo die Layouts verändern sprich z.b die Farbe oder das dass Logo größer ist? ich kenne mich überhaupt nicht mit HTML usw aus. Gibt es irgendwie eine leichtere Variante:)

     

    gruß Artur Magel

  • 0
    Avatar
    sevDesk Team

    Hallo Christopher,

    Ja das wird in naher Zukunft erstellt. 

    Hallo Artur,

    Aktuell gibt es leider keine leichtere Variante aber wir sind dabei eine leichtere zu entwickeln.

    Viele Grüße Sandro

  • 0
    Avatar
    Alexander Eleftherakis

    Hi,

    soweit ist alles klar mit der Erstellung der Layouts. Es ist nur etwas unbequem. Meine vorgehensweise wäre jetzt, ein JSON Objekt mit den ganzen Daten zu erstellen und diese durch Mustache.js zu jagen. Könnt ihr da ggf. ein Repository zur Verfügung stellen, was den Einstieg da ein wenig vereinfacht? Ich bin mir sicher, ihr habt da schon einen guten Workflow...

    viele Grüße

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