Lorsque vous configurez des modèles pour les devis, les factures, etc., vous utilisez généralement un document Word pour configurer votre propre style maison. Plus d'informations sur la configuration générale de votre style de maison peuvent être trouvés ici.

Cependant, certaines parties d'un modèle ne peuvent pas être définies dans votre document Word. Pour modifier ces parties, vous devez utiliser du code CSS.

Remarque : Lorsque vous avez modifié le code CSS d'un modèle, tous les codes CSS des autres modèles ayant la même modification de disposition seront automatiquement modifiés en conséquence.


1. Pour modifier le code CSS, accédez simplement à Paramètres> Disposition du document > Configurer maintenant > Devis ou factures > Options avancées > Modifier le 'CSS personnalisé'.



2. Sur l'écran suivant, vous trouverez le code CSS affiché ci-dessous:


Le code CSS se compose de trois parties :

  • HTML
    La partie du texte que vous souhaitez modifier (par exemple 'p' pour le texte normal)
  • Propriétés
    Les propriétés que vous souhaitez modifier
  • Valeur
    La valeur de ces propriétés
  • Autre syntaxe
    Vous devez toujours ouvrir et fermer le code avec '{}' et terminer une ligne avec ';'
    Si ce n'est pas le cas, tous les codes suivants ne seront pas considérés comme du code.

Un exemple pour les trois parties: p {color: # 000000;}

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


Balises HTML

Le cas échéant, ces balises HTML peuvent être utilisées dans le code CSS :

  • p pour le texte normal
  • h1 pour le premier en-tête
  • h2 pour le deuxième en-tête
  • h3 pour le troisième en-tête
  • h4 pour le quatrième en-tête
  • ol pour la liste entière
  • li pour les éléments de la liste
  • * pour tous les tags

Propriétés du texte CSS

Famille de police

  • La police d'un texte est définie avec la propriété font-family.
  • Commencez avec la police que vous voulez, et terminez avec une famille générique, pour laisser le navigateur choisir une police similaire dans la famille générique, si aucune autre police n'est disponible. Une liste de polices et leur famille de polices : http://www.cssfontstack.com/Web-Fonts
  • Remarque:
    • Si le nom d'une famille de polices comprend plus d'un mot, il doit être placé entre guillemets, cf.: "Times New Roman".
    • Vous devez utiliser des guillemets doubles et non des guillemets simples. Si vous copiez la famille de polices à partir de www.cssfontstack.com (comme indiqué ci-dessus), cela devra être changé.
    • Toutes les familles de polices ne sont pas disponibles dans CSS dans Teamleader. Si votre police n'est pas disponible, nous vous recommandons d'en utiliser une similaire.
  • Exemple: p {font-family: "Times New Roman";}

Couleur de la police

  • La couleur d'un texte est définie avec la propriété de couleur.
  • La valeur peut être hexadécimale ou RVB. RVB peut être dérivé du document Word en cliquant sur « Plus de couleurs » lors du choix de votre couleur.



Sur l'écran suivant, vous devrez sélectionner « Personnalisé » pour voir les valeurs de la couleur que vous avez utilisée.


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

Taille de police

  • La propriété font-size définit la taille du texte.
  • Par défaut, px est l'unité utilisée. Toutefois, Word utilise des «points» en tant qu'unité. Pour utiliser la même unité en CSS, utilisez 'pt' ou utilisez un convertisseur pt to px: cf. : http://www.endmemo.com/sconvert/pixelpoint.php
  • Exemple : p {font-size: 12pt;}
  • Le style de police:
    • La propriété font-style est principalement utilisée pour spécifier le texte en italique.
    • Cette propriété a trois valeurs:
      • normal - Le texte est normalement affiché
      • italique - Le texte est en italique
      • oblique - Le texte est affiché en oblique
    • Exemple : p {font-style: italic;}

Poids de la police

  • La propriété font-weight spécifie le poids d'une police.
  • Exemple: p{font-weight: gras;} -OU- p{font-weight: 400;}
  • Hauteur de la ligne
    • La propriété line height est utilisée pour spécifier l'espace entre les lignes.
    • Le pourcentage de 100% représente la taille de la police du texte.
    • Exemple : p{line-height: 200%;} -OU- p{line-height: 20pt;}


Code CSS pour les devis et les factures dans Teamleader


Longue description des articles

  • Utilisez la balise 'tag'.description pour éditer le balisage de la longue description des produits (= shortcode $LONG_DESCRIPTION$).
  • Avec p.product_image, vous modifiez le balisage de l'image du produit.
  • 'p.description' éditera le texte normal
  • 'ul' (points de puce) et 'ol' (liste numérotée) éditera le balisage des listes.

Défaut

/ * Exemples de styles pour html utilisés dans des descriptions d'article plus longues sur des factures ou des devis * /

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


Texte de devis

  • Utilisez .quotation_text 'tag' pour éditer le mark-up du shortcode $QUOTATION_TEXT$.
  • La balise h1, h2, h3, h4, p, li peut être utilisée. N'utilisez aucune balise pour affecter toutes les balises.
  • Vous pouvez également définir des parties dans votre texte de devis qui ont un poids de police différent, par ex. texte en gras via les tags normal, gras, plus audacieux, plus léger
    • Exemple: .quotation_text strong {font-size: 30px; color: # 00FF00 pour définir plus précisément tout le texte en gras
  • Les polices suivantes sont prises en charge dans le CSS pour le texte du devis :
    • Arial
    • Calibri
    • Courier New
    • Gill Sans
    • Lucida Sans Unicode
    • Times New Roman
    • Verdana


Défaut

/ * exemples de styles pour le texte de citation WYSIWYG * /

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

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


Exemple

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


Zone de signature sur les devis

  • By using ‘#signature_area’ in the text properties, the signature area can be edited (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Up until now, our CSS-code only edits text properties.
  • For the signature it is possible to edit more than that. The signature area is actually a table.
  • So it can be edited by using CSS properties for tables, more info can be found by clicking the following link: http://www.w3schools.com/css/css_table.asp.
  • En utilisant '#signature_area' dans les propriétés du texte, la zone de signature peut être modifiée (Shortcode = $DOCUMENT_SIGNATURE_AREA$).
  • Jusqu'à présent, notre code CSS modifie uniquement les propriétés du texte.
  • Pour la signature, il est possible de ne pas en rester là. La zone de signature est en fait une table.
  • Il peut donc être édité en utilisant les propriétés CSS pour les tables, plus d'informations peuvent être trouvées en cliquant sur le lien suivant: http://www.w3schools.com/css/css_table.asp.


Défaut

/ * exemples de styles pour la zone de signature sur les devis */

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


Exemple

/ * exemples de styles pour la zone de signature sur les devis * /

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


Tableau récapitulatif de TVA

  • Via ce code CSS, vous définissez la majoration pour le shortcode $VAT_SUMMARY$
  • Semblable à la zone de signature, la table récapitulative de TVA est une table. Voir «Zone de signature sur les devis » pour plus d'informations.

Défaut

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


Commentaires sur les factures

  • Utilisez p.comments ‘tag’ pour éditer la balise pour le shortcode $COMMENTS$.
  • Les Tags h1, h2, h3, h4, p, li peuvent être utilisés. N'utilisez aucune balise pour affecter toutes les balises.

Défaut

/ * exemple de style pour les commentaires sur les factures * /
p.comments{font-size:12px;}


Remarque :

Lorsque vous modifiez un modèle de cette manière, CSS a la priorité, ce qui signifie que le balisage CSS sera utilisé, et non le balisage du fichier Word.