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> Mise en Page du Document > Devis ou factures > Options avancées > Modifier le 'CSS personnalisé'.

options avancées des modèles



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 Focus. 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é
      • italic - 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: bold;} -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 Focus


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
  • Pour le CSS du texte du devis, des polices sûres pour le web sont prises en charge, telles que Arial, Calibri, Courier New, Gill Sans, Lucida Sans Unicode, Times New Roman, Verdana... Vous trouverez plus d'informations sur ces polices sûres pour le web ici.


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


Zone de signature sur les devis

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


Autre


Pour pouvoir éditer la mise en page des shortcodes $INVOICE_REFERENCE$, $LEGAL_NOTES$ vous devez éditer le style général. Notez que vous ne pouvez pas les modifier individuellement, toutes les modifications apportées à ce style seront appliquées à ces deux shortcodes :



Remarque: Lors de l'édition d'un modèle de cette façon, CSS est prioritaire, ce qui signifie que la mise en page du CSS sera utilisé, et non la mise en page du fichier Word.