Beispieltemplate Honey & Comb

Angenommen, Dein Briefpapier hätte folgende Struktur.

Beispielbriefpapier

In diesem Fall ist schnell ersichtlich, dass dieses Layout nicht optimal zu den Standardtemplates von Papierkram passt. Mit der Funktion "CSS-Layouts" können jedoch die einzelnen Bereiche der Vorlagen angesprochen und hinsichtlich Farbe, Position, Breite, Anordnung etc. verändert werden.

In diesem Fall möchten wir den Dokumententitel nach rechts und ein wenig nach unten verschieben und die Tabelle, die die Rechnungs-, Kundennummer etc. enthält, soll nach oben geschoben und die einzelnen Punkte untereinander angezeigt werden.

Dazu soll der Freitext weiter nach oben gesetzt werden und die Schriften und Linien bekommen eine andere Farbe und Stärke. Außerdem möchten wir in diesem Fall statt "MwSt." "USt." im Dokument stehen haben und die Spalte "Einheit" soll nicht angezeigt werden.

Um diese Änderungen umsetzen zu können, sind folgende Anweisungen nötig, die wir in das Feld "CSS" rechts neben der Dokumentenvorschau eingeben.

body {
  font-size: 12pt;
  color: #999;
}


/* Die Schrift wird generell auf 12 Pt und die Schriftfarbe auf den
Hexadezimalwert #999 gesetzt. */

#recipient {
  position: absolute;
  top: 48mm;
  left: 20mm;
  width: 85mm;
}


/* Das Adressfeld wird neu positioniert. */

#content {
  top: 120mm;
}


/* Der Inhaltsbereich wird etwas nach unten geschoben. */

#greetings_text {
  position: absolute;
  top: -20mm;
  margin: 0;
  font-size: 0.8em;
}


/* Der Grußtext wird neu positioniert. */

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


/* Der Dokumententitel wird neu positioniert */

#item-list-table th,
time-entry-list table th {
  background: #fff !important;
  padding: 3px;
  border-bottom: 2px solid #444;
}

#item-list-table tr:last-child th {
  background: #fff;
  padding: 3px;
  border: none;
}


/* Die Kopfzeile der Tabelle bekommt eine andere Hintergrundfarbe
und einen unteren Rand. */

th.col-unit,
td.col-unit {
  width: 0;
  padding: 0;
}

th.col-unit span {
  display: none;
  padding: 0;
}

th.col-unit span:after {
  content: "";
  padding: 0;
}

td.col-unit span {
  display: none;
  padding: 0;
}

td.col-unit span:after {
  content: "";
  padding: 0;
}

th.col-price,
td.col-price {
  width: 12%;
}

th.col-total,
td.col-total {
  width: 13%;
}


/* Die Spalte "Einheit" wird ausgeblendet */

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


/* Der Begriff "MwSt." in der Kopfzeile wird ausgeblendet */

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


/* Der Begriff "USt." wird eingesetzt */

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


/* Der Text "zzgl. 19% MwSt." über der
Gesamtsumme wird ausgeblendet */

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

/* Und durch "zzgl. 19% USt." ersetzt.*/


/*Achtung! Nicht verwenden, wenn Du Rechnungen mit verschiedenen
MwSt-Sätzen erstellst. Sonst wird die Bezeichnung
"zzgl. 7% MwSt." auch ersetzt. */

#item-list table tr.spacer th {
  border: none;
}

#recipient_sender {
  white-space: nowrap;
}


/* Kein Umbruch der Absenderzeile bei langen
Unternehmensnamen oder Adressdetails */

#document-header {
  position: absolute;
  right: 0;
  top: -78mm;
}

#document-header table td {
  display: block;
  text-align: right;
  width: 40mm;
  padding: 1mm 0;
}


/* Die Tabelle mit den Informationen "Rechnungsnummer"" usw.
wird nach oben gesetzt und rechtsbündig positioniert.
Außerdem werden die Tabellenzellen untereinander statt
nebeneinander dargestellt. */

Wenn wir das Dokument nun speichern, dann sieht die Vorlage in der Vorschau und als PDF folgendermaßen aus:

Beispieltemplate Honey & Comb