Dokumentvorlagen individualisieren (BETA)

Achtung

Das Feature ist derzeit in einer BETA-Phase. Die Funktionalität kann sich in zukünftigen Updates ändern. Sollte das Feature bereits produktiv genutzt werden, kann es sein, dass die Layouts nach der BETA-Phase noch einmal geändert werden müssen.

Mit Hilfe individueller CSS-Regeln lässt sich das Design der Vorlagen für Angebote, Rechnungen, Mahnungen etc. flexibel anpassen. Das Feature steht ab der Pro+ Version zur Verfügung.

CSS sind sogenannte Cascading Style Sheets. Weitere Informationen über die Nutzung und Verwendung findet ihr hier. Papierkram bietet Euch ein vorgefertigtes HTML Layout welches in ein PDF gewandelt wird. Mit individuellen CSS Regeln könnt ihr die von Papierkram vordefinierten Stile und Werte überschreiben.

Zusätzlich zu den Einstellungsmöglichkeiten, die ihr unter dem Tab "Briefpapier" und rechts neben der jeweiligen Vorlage findet, wo ihr einzelne Elemente aktivieren und deaktivieren könnt, lassen sich über CSS-Anweisungen beliebige Änderungen an den Vorlagen vornehmen.

Die notwendigen Klassen lassen sich in der Vorschau links im Quelltext auslesen.

Die gewünschten Befehle tragt ihr dann einfach in die CSS-Box unter der Schriftauswahl ein und speichert das Template.

Templates via CSS anpassen

Achtung

Bitte prüft das Ergebnis auch immer im PDF - die Vorschau ist nicht zu 100% akkurat. Manche Anweisungen wie bspw. letter-spacing werden zwar in der Browseransicht korrekt ausgegeben, können aber nicht von der PDF-Engine verarbeitet werden und werden im PDF ignoriert.

Mit dem Custom-CSS habt ihr die volle Kontrolle über das Aussehen der Dokumente. Alle CSS-Anweisungen, die im Standardtemplate integriert sind, können überschrieben und beliebige weitere CSS-Anweisungen eingebaut werden. Dabei sind alle CSS-Befehle möglich, die in der CSS-Spezifikation 2.1 integriert sind.

Im Folgenden haben wir euch ein paar Beispiele aufgeführt, wie ihr die Vorlagen mit wenigen Zeilen CSS verändern könnt. Selbstverständlich sind sehr viel mehr Änderungen möglich.

Wenn ihr beispielsweise den Dokumententyp nicht rechts im Dokument, sondern links unter dem Adressblock stehen und die Tabelle etwas weiter oben haben möchtet, dann könnt ihr folgende CSS-Befehle verwenden.

#content {
  top: 90mm;
}

#document-type {
  position: absolute;
  top: 70mm;
  left: 20mm;
  width: 85mm;
  text-align: left;
}

Diese CSS-Befehle ergeben dieses etwas abgeänderte Layout.

Einfache CSS-Änderung

Spalten ausblenden

Wenn ihr eine Spalte in der Rechnungstabelle nicht benötigt, könnt ihr diese einfach ausblenden. Mit diesem Code blendet ihr die Spalte "Einheit" aus.

th.col-unit, td.col-unit {
  display: none;
}

Diese CSS-Befehle ergeben die folgende Änderung im Template.

Spalte Einheit via CSS ausblenden

Tipp

Für die anderen Spalten verwendet ihr dann einfach die entsprechenden Klassen.
Menge: .col-quantity
Einheit: .col-unit
MwSt.: .col-vat
Einzelpreis: .col-price
Gesamtpreis: .col-total

"USt." statt "MwSt." verwenden

In unseren Vorlagen wird immer die Abkürzung für "Mehrwertsteuer" verwendet. Wenn ihr lieber "USt." für "Umsatzsteuer" verwenden möchtet, dann könnt ihr den Text ganz einfach mit diesem Code ändern.

th.col-vat span {
  display: none;
}

th.col-vat:after {
  content: "USt.";
}

tr.items-total-vat td.label {
  visibility: hidden;
}

tr.items-total-vat td.label:after {
  visibility: visible;
  content: "zzgl. 19% USt.";
}

Durch diese CSS-Anweisungen wird "MwSt." durch "USt." ersetzt.

Ust. statt MwSt. in den Vorlagen verwenden

Nicht verwenden, wenn mehrere Steuersätze verwendet werden

Achtung! Nicht verwenden, wenn Rechnungen mit verschiedenen MwSt-Sätzen erstellt werden müssen. Sonst wird die Bezeichnung "zzgl. 7% MwSt." auch durch "zzgl. 19% USt." ersetzt.

Klassen und IDs mit dem Developer-Tool herausfinden

Die CSS-Klassen und -IDs können über das Developer-Tool im Browser ausgelesen werden. Mit einem Rechtsklick auf den Bereich, der geändert werden soll, und der Auswahl "untersuchen" im dann erscheinenden Kontextmenü können die Klassen und IDs angezeigt werden.

Mit dem Kontextmenü das Developer-Tool öffnen

Nach dem Klick auf "untersuchen" zeigt Dir das Tool die zugehörigen Klassen und IDs an.

Benennung der Klassen und IDs mit dem Developer-Tool herausfinden

Übersicht über die wichtigsten Klassen und IDs

In der folgenden Grafik haben wir die wichtigsten Klassen und IDs, die zur Änderung einer Vorlage durch CSS-Anweisungen nötig sind, kenntlich gemacht und benannt. Die zu den Nummern gehörenden Namen haben wir unten aufgelistet.

Grafik mit Kenntlichmachung der wichtigsten Klassen und IDs

  1. #document-type
  2. #recipient
  3. #recipient_sender
  4. .content
  5. .document_id
  6. .document_id + span
  7. .customer_id
  8. .customer_id + span
  9. .service_date
  10. .service_date + span
  11. .document_date
  12. .document_date + span
  13. td.document-id-no-col
  14. td.customer-id-no-col
  15. td.service-date-col
  16. td.document-date-col
  17. #document-header
  18. #item-list-table th
    1. Pos.: th.col-pos
    2. Beschreibung: th.col-description
    3. Menge: th.col-quantity
    4. Einheit: th.col-unit
    5. MwSt.: th.col-vat
    6. Einzelpreis: th.col-price
    7. Gesamtpreis: th.col-total