Dokumentvorlagen individualisieren (BETA)

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.

CSS einfügen

Bitte prüft das Ergebnis auch immer im PDF - die Vorschau ist nicht zu 100% akurat.

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. Ihr habt alle Möglichkeiten, die CSS 2.1 euch bietet.

Dokumententitel links, Tabelle etwas weiter oben

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:

Titel links in der Vorlage platzieren

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:

Spalten in den Vorlagen ausblenden

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.";
}

Diese CSS-Befehle ergeben:

Inhalte verändern

Weiter zu Import