How To: Hoe kan ik de CSS van mijn templates aanpassen?


Wanneer je templates aanmaakt voor offertes, facturen, enz. dan gebruik je meestal een Word-document om je eigen huisstijl in te stellen. Klik hier als je wil weten hoe je je eigen huisstijl kan instellen.


Sommige onderdelen van je template kunnen echter niet in dat Word-document aangepast worden. Hiervoor zul je de CSS code moeten aanpassen.


Opmerking: Wanneer je de CSS van een template wijzigt, dan wordt alle CSS code van andere templates in dezelfde layoutvariant ook automatisch aangepast.


1. Om CSS code te wijzigen, ga je naar Instellingen > Document layout > en klik door naar de aan te passen template

Kies Geavanceerde opties > Custom CSS 'aanpassen':



2. In het volgende venster vind je de CSS code terug:



CSS code bestaat uit drie delen:

  • HTML
    Het deel van de tekst dat je wil aanpassen (bv. ‘p’ voor gewone tekst)
  • Properties
    De eigenschappen die je wilt aanpassen
  • Value
    De waarde van deze properties
  • Other syntax
    Het is altijd belangrijk om de code met ‘{}’ te openen en te sluiten en aan het einde van een regel moet ‘;’ staan. Anders werkt de code niet.

Een voorbeeld voor de drie delen: p {color:#000000;}

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


HTML-tags

Deze HTML-tags kunnen (indien van toepassing) in de CSS code gebruikt worden:

  • p voor gewone tekst
  • h1 voor de hoofdtitel
  • h2 voor ondertitels
  • h3 voor ondertitels van een derde niveau
  • h4 voor ondertitels van een vierde niveau
  • ol voor een volledige lijst
  • li voor lijstitems
  • * voor alle tags


CSS teksteigenschappen

Font family

  • Het lettertype van de tekst wordt door de font-family property bepaald.
  • Begin met de gewenste font en sluit af met de generieke familie zodat de browser een gelijkaardige font kan kiezen indien er geen andere beschikbaar zijn. Een lijst van alle fonts en hun families vind je hier: http://www.cssfontstack.com/Web-Fonts
  • Let op:
    • Indien de naam van een font family langer is dan één woord, dan moet het tussen aanhalingstekens staan, bv. "Times New Roman"
    • Let erop dat je dubbele aanhalingstekens gebruikt. Indien je de font-family van www.cssfontstack.com kopieert, dan moet je dit nog manueel aanpassen.
    • Niet alle font-families zijn beschikbaar in de CSS code van Teamleader Focus, het is dus wel mogelijk dat jouw gewenste font niet beschikbaar is. Wij raden aan om dan een lettertype te kiezen, dat daarop lijkt.
  • Voorbeeld: p {font-family: "Times New Roman";}
  • Font color:
    • De tekstkleur wordt door de color property bepaald.
    • De waarde kan hexa-decimal of RGB zijn. RGB kan vanuit het Word-bestand opgehaald worden door op "Meer kleuren" te klikken bij het kiezen van het kleur.


  • In het volgende scherm moet je dan voor 'Custom' kiezen om de waarden van de gebruikte kleur te zien.


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

Font size

  • De font-size property bepaalt de tekstgrootte.
  • Standaard eenheid is px. Maar Word gebruikt 'points' als eenheid. Om dezelfde eenheid in CSS te gebruiken, kies je voor ‘pt’ of gebruik je een pt naar px convertor: e.g.: http://www.endmemo.com/sconvert/pixelpoint.php
  • Voorbeeld: p {font-size: 12pt;}

Font style

  • De font-style property wordt meestal gebruikt om tekst cursief te plaatsen.
  • Deze property heeft drie waarden:
    • normal - De tekst wordt normaal weergegeven.
    • italic - De tekst wordt cursief weergegeven.
    • oblique - De tekst wordt cursief weergegeven.
  • Voorbeeld: p {font-style: italic;}

Font weight

  • De font-weight property bepaalt het gewicht van een font.
  • Voorbeeld: p {font-weight: bold;} -OR- p {font-weight: 400;}
  • Line height
    • De line-height property wordt gebruikt om de afstand tussen de lijnen te bepalen.
    • Het percentage 100% staat voor de font size van de tekst.
    • Voorbeeld: p{line-height: 200%;-OR- p{line-height: 20pt;}


CSS code voor offertes en facturen in Teamleader Focus


Lange beschrijving van artikelen

  • Gebruik ‘tag’.description om de opmaak van de lange beschrijving van een artikel aan te passsen (=shortcode $LONG_DESCRIPTION$).
  • Met p.product_image kan je de opmaak van de afbeelding van een product bepalen.
  • ‘p.description’ wijzigt de normale tekst
  • ‘ul’ (bullet points) en ‘ol’ (nummereerde lijsten) past het opmaak van lijsten aan

Standaard

/* voorbeeldstijlen voor html gebruikt in langere artikelomschrijvingen bij facturen of offertes */

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


Offertetekst

  • Gebruik .quotation_text ‘tag’ om de opmaak van het tekst in de shortcode $QUOTATION_TEXT$ te bepalen.
  • Tag h1, h2, h3, h4, p, li kunnen daarvoor gebruikt worden. Gebruik geen tag om alle tags te bepalen.
  • Je kunt ook die delen in jouw offertetekst bepalen, die er een andere font weight hebben, bvb een tekst in vet. Dit kunt je met hulp van de tags normal, bold, bolder, lighter doen.
    • Voorbeeld: .quotation_text strong{font-size:30px; color:#00FF00 om die vet gedrukte tekst te definieren.
  • Voor de CSS van de begeleidende tekst ondersteunen we 'web-safe' lettertypes zoals Arial, Calibri, Courier New, Gill Sans, Lucida Sans Unicode, Times New Roman, Verdana,... Vind hier meer informatie over deze web-safe lettertypes.

Standaard

/* voorbeeldstijlen voor de WYSIWYG offertetekst */

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

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


Voorbeeld

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


Handtekening-sectie bij offertes

  • Door ‘#signature_area’ te gebruiken in de text properties, kan de handtekening-sectie aangepast worden (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Tot nu toe kan je met CSS code enkel tekst wijzigen.
  • Bij de handtekening-sectie kan je nog enkele zaken wijzigen. Het gaat hierbij om een tabel.
  • Die tabel kan dus gewijzigd worden via CSS properties voor tabellen. Voor meer info hierover: http://www.w3schools.com/css/css_table.asp.


Standaard

/* voorbeeldstijlen voor de handtekening-sectie bij offertes */

#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;}


Voorbeeld

/* voorbeeldstijlen voor de handtekening-sectie bij offertes */

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


VAT summary table

  • Zoals de signature area is de VAT summary table ook een tabel. Zie "Signature area on quotations" voor meer informatie. Via de CSS code kan je de opmaak van de shortcode $VAT_SUMMARY$ aanpassen.
  • Via dit CSS code kan je het opmaak van het shortcode $VAT_SUMMARY$ aanpassen. Net zoals de handtekening-sectie is ook de VAT summary table een tabel. Zie "Signature area on quotations" voor meer informatie.


Standaard

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%;}


'Opmerkingen' bij facturen

  • Gebruik p.comments ‘tag’ om de opmaak van de shortcode $COMMENTS$ te bepalen.
  • Tag h1, h2, h3, h4, p, li kunnen gebruikt worden. Gebruik geen tag om alle tags te bepalen.


Standaard

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



Om de lay-out van de shortcodes $INVOICE_REFERENCE$ en $LEGAL_NOTES$ te wijzigen moet je de 'general styles' wijzigen.

Je kunt deze niet individueel wijzigen; alle veranderingen die je maakt op vlak van de general styles zullen worden toegepast op deze twee shortcodes:



Opmerking:

Wanneer je een template op deze manier wijzigt, krijgt CSS voorrang. Concreet houdt dit in dat de CSS layout zal gebruikt worden, en niet de layout van het Word-bestand.

Was dit artikel nuttig?