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 einem Template eingestellt haben, dann werden die CSS Codes der anderen Vorlagen derselben Layout-Variante direkt auch angepasst.


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


Advanced options CSS



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 Focus 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 Focus 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 Textinhaltes 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 Angebotstextes 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.
  • Für das CSS des Quotation-Textes werden websichere Schriftarten wie Arial, Calibri, Courier New, Gill Sans, Lucida Sans Unicode, Times New Roman, Verdana,...unterstützt. Weitere Informationen zu diesen websicheren Schriftarten finden Sie hier.

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;}
.quotation_text table{font-size:12px; color:#000000}


Signature area on quotations

  • Durch den Gebrauch von ‘#signature_area’ in der text properties kann das Unterschriftfeld angepasst werden (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Bis zum jetzigen Zeitpunkt wurden lediglich text properties verändert. Beim Unterschriftfeld 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 Unterschriftfeld ist auch die Tabelle für die Zusammenfassung der USt.-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 für Bemerkungen auf Rechnungen */p.comments{font-size:12px;}


Um das Layout der Shortcodes $INVOICE_REFERE$ und $LEGAL_NOTES$ bearbeiten zu können, müssen Sie die allgemeinen Stile bearbeiten. Beachten Sie, dass Sie sie nicht einzeln bearbeiten können. Alle Änderungen an diesen allgemeinen Stilen werden auf diese beiden Shortcodes angewendet:



Hinweis:

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