Wenn Sie Ihre Vorlagen für Angebote und Rechnungen, etc. einstellen, dann arbeiten Sie direkt in Ihrem Word-Dokument, um Ihr persönliches Firmendesign einzustellen. Mehr Informationen darüber finden Sie hier.


Nun müssen manche Teile im CSS Code und nicht im Word-Dokument angepasst werden.


Hinweis: Wenn Sie den CSS Code von einer Template eingestellt haben, dann werden die CSS Codes der anderen Vorlagen der selben Layout Variante direkt auch angepasst.


1. Um Ihren CSS Code anzupassen gehen Sie zu Einstellungen > Dokumenten Layout > Jetzt einstellen > Angebote oder Rechnungen > Erweiterte Optionen > "Custom CSS" ändern.



2. Im folgenden Schritt sehen Sie den CSS Code:


CSS Code besteht aus drei Teilen:

  • HTML
    Der Teil des Texts, den Sie anpassen möchten (z.B. ‘p’ for normal text)
  • Properties
    Die Eigenschaften, die Sie anpassen möchten
  • Value
    Die Werte für diese Eigenschaften
  • Other syntax
    Es ist wichtig, den Code immer mit ‘{}’ zu eröffnen und zu schließen und um eine Zeile immer mit ‘;’ zu beenden. Andernfalls funktioniert der Code nicht.

Ein Beispiel für die drei Teile: p {color:#000000;}

  • HTML: p
  • Properties: color
  • Value: #000000

HTML-tags

Diese HTML-tags können an geeigneten Stellen im CSS Code von Teamleader verwendet werden.

  • p for normal text
  • h1 for the first header
  • h2 for the second header
  • h3 for the third header
  • h4 for the fourth header
  • ol for entire list
  • li for list items
  • * for all tags

CSS text properties

Font family

  • Die Schriftart des Texts wird mit dem font-family property eingestellt.
  • Beginnen Sie mit der gewünschten Schriftart und enden Sie mit der generischen Familie. So kann der Browser eine ähnliche Schriftart wählen, wenn keine andere verfügbar ist. Eine Liste der Schriftarten und deren Familien findet sich hier: http://www.cssfontstack.com/Web-Fonts
  • Hinweise:
    • Falls der Name der Famile der Schriftarten aus mehreren Wörtern besteht, dann muss dieser zwischen Ausrufungszeichen stehen, z.B.: "Times New Roman”.
    • Dies müssen doppelte und keine einfachen Anführungszeichen sein. Falls Sie die Familie der Schriftarten von www.cssfontstack.com kopieren, dann müssen Sie dies abändern.
    • Nicht alle Schriftartenfamilien sind für den CSS Code in Teamleader verfügbar. Falls Ihre gewünschte Schriftart nicht funktioniert, dann empfehlen wir Ihnen eine andere ähnliche auszuwählen.
  • Beispiel: p {font-family: "Times New Roman";}

Font color

  • Die Schriftfarbe wird durch den color property bestimmt.
  • Der Wert kann in hexa-decimal oder RGB angegeben werden. RGB können Sie aus Ihrem Word-Dokument ablesen indem Sie beim Wählen Ihrer Farbe auf "Mehr Farben" klicken.


  • Anschließend klicken Sie auf "Custom", um die Werte der verwendeten Farbe zu sehen.


  • Beispiel:p {color: rgb(0,0,0);} OR p {color:#000000;}

Font size

  • Der font-size property bestimmt die Schriftgröße des Texts.
  • Standardmäßig wird die Einheit px verwendet. Word hingegen verwendet 'points' als Einheit. Um mit der selben Einheit zu arbeiten verwenden Sie entweder 'pt im CSS Coder oder Sie nutzen einen pt au px converter,z.B.: http://www.endmemo.com/sconvert/pixelpoint.php
  • Beispiel: p {font-size: 12pt;}

Font style

  • Der font-style property wird meist dazu verwenden, um einen Text in kursiv darzustellen.
  • Diese Eigenschaft hat drei Werte:
    • normal - Der Text wird normal angezeigt.
    • italic - Der Text wird kursiv angezeigt.
    • oblique - Der Text wird oblique/schief angezeigt.
    • Beispiel: p {font-style: italic;}

Font weight

  • Der font-weight property spezifiziert die Schwere der Schriftart.
  • Beispiel: p {font-weight: bold;} -OR- p {font-weight: 400;}

Line height

  • Der line-height property wird dafür verwendet, um den Zeilenabstand einzustellen.
  • Der Prozentsatz 100% steht für die Schriftgröße des Texts.
  • Beispiel: p{line-height: 200%;-OR- p{line-height: 20pt;}


CSS Code für Angebote und Rechnungen in Teamleader

Long description of articles

  • Verwenden Sie ‘tag’.description, um das Layout der langen Produktbeschreibung anzupassen (=shortcode $LONG_DESCRIPTION$).
  • Mit p.product_image verändern Sie das Layout der Abbildung des Produkts.
  • ‘p.description’ passt den normalen Text an
  • ‘ul’ (ungeordnete Aufzählung) und ‘ol’ (nummerierte Aufzählung) bewirken Veränderungen des Layouts von Listen.

Standard

/* example styles for html used in longer article descriptions on invoices or quotations */

p.description{color:#666666;font-size:11px;margin-top:6px;margin-bottom:0px;margin-left:12px;}

p.description *{font-size:11px;}

p.product_image{margin-left:12px;margin-top:0px;margin-bottom:0px;}

ul.description li{background-color:none;}

ul.description li:first-child{margin-top:6px;}

ol.description li{background-color:none;}
ol.description li:first-child{margin-top:6px;}


Quotation text

  • Verwenden Sie .quotation_text ‘tag’, um das Layout des Textinhalt des Shortcodes $QUOTATION_TEXT$ zu verändern.
  • Tag h1, h2, h3, h4, p, li können hierbei verwendet werden. Wenn Sie alle Tags anpassen möchten, dann nutzen Sie keine Tags.
  • Sie können auch die Teile Ihres Angebotstext definieren, die eine andere font weight habe, z.B. den fettgedruckten Text. Die tun Sie mithilfe der tags: normal, bold, bolder, lighter
    • Beispiel: .quotation_text strong{font-size:30px; color:#00FF00, um den fettgedruckten Text zu definieren.
  • Die folgenden Schriftarten werden im CSS von Teamleader für den Angebotstext unterstützt.:
    • Arial
    • Calibri
    • Courier New
    • Gill Sans
    • Lucida Sans Unicode
    • Times New Roman
    • Verdana

Standard

/* example styles for the WYSIWYG quotation text */

.quotation_text p{font-size:12px; color:#000000}

.quotation_text li{font-size:12px; color:#000000}


Beispiel

.quotation_text {font-family:'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;}

.quotation_text h1 {font-size:18pt;font-weight: bold;}

.quotation_text h2{font-size:14pt;font-weight: bold;}

.quotation_text h3{font-size:12pt;font-weight: bold;}

.quotation_text h4{font-size:10pt;font-weight: bold;}

.quotation_text p{font-size:10pt;color:#000000;}

.quotation_text li{font-size:10pt;color:#000000;}


Signature area on quotations

  • Durch den Gebrauch von ‘#signature_area’ in der text properties kann das Unterschriftenfeld angepasst werden (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Bis zum jetzigen Zeitpunkt wurden lediglich text properties verändert. Beim Unterschriftenfeld haben Sie weitere Möglichkeiten, da dieses Feld eigentlich eine Tabelle ist. Daher kann dies mithilfe der CSS properties für Tabellen bearbeitet werden. Mehr Informationen darüber finden sich hier: http://www.w3schools.com/css/css_table.asp.

Standard

/* example styles for the signature area on quotations */

#signature_area{font-size:14px;}

#signature_area hr{color:#CCC;}

table.signature_area{width:100%}

table.signature_area td{width:50%;vertical-align:top;}

table.signature_area td:first-child{text-align:left}

table.signature_area td:last-child{text-align:right}

table.signature_area td:last-child img{float:right;}


Beispiel

/* example styles for the signature area on quotations */

#signature_area{font-size:12px;color: #000000;font-family: "Times New Roman";}


VAT summary table

  • Mithilfe dieses CSS Codes bestimmen Sie das Layout des Texts des Shortcodes $VAT_SUMMARY$
  • Genauso wie das Unterschriftenfeld ist auch die Tabelle für die Zusammenfassung der MwSt;-Beträge eine Tabelle. Unter "Signature area on quotations" finden Sie mehr Informationen darüber.

Standard

table.vat_summary{font-size:14px;margin-left:100%;}

table.vat_summary th{border:1px solid #CCC;}

table.vat_summary tr{line-height:26px;}

table.vat_summary td{border:1px solid #CCC;}

table.vat_summary td:last-child,table.vat_summary th:last-child{text-align:right;}

table.vat_summary .vat_rate{width:20%;}


Comments on invoices

  • Verwenden Sie p.comments ‘tag’, um das Layout des Shortcodes $COMMENTS$ zu bearbeiten.
  • Tag h1, h2, h3, h4, p, li können hierbei verwendet werden. Wenn Sie alle Tags bearbeiten möchten, dann verwenden Sie einfach keine Tags.

Standard

/* example style for comments on invoices */p.comments{font-size:12px;}


Hinweis:

Wenn Sie eine Vorlage mithilfe des CSS Codes bearbeiten, dann haben diese Einstellungen Vorrang vor den Einstellungen in Ihrem Word-Dokument.