Modifier la mise en page du Texte Additionnel (CGV)

Créé: 07/09/2017
Dernière mise à jour: 29/04/2022

Nombre de vues pour le message: 6728

Le logiciel de facturation en ligne VosFactures vous permet de créer des factures et devis personnalisés. Vous pouvez personnaliser la mise en page de vos documents grâce au champ CSS de vos paramètres (en savoir plus).

Parmi les modifications possibles, vous pouvez changer le style du contenu du champ "Texte additionnel (imprimé sur la page suivante)", généralement utilisé pour y insérer vos CGV, comme par exemple les afficher en plus petit ou les mettre en couleur.

Il vous suffira de copier le code CSS qui vous convient et de le coller dans le champ "Configuration de l'impression par CSS" depuis vos Paramètres > Paramètres du compte > Paramètres d’impression > Configuration, sans oublier de sauvegarder.

Changer la Taille
Changer la Couleur
Changer le Type de police
Changer l'Alignement du texte
Organiser le contenu en Colonnes
Exemple

Changer la Taille

Pour changer la taille du contenu du champ "Texte additionnel (imprimé sur la page suivante)", il vous suffit d'indiquer:

#extra_page_content {
font-size: 8px;
}

Plus vous indiquez un nombre petit (ex: 5 au lieu de 8), plus la taille diminue (et inversement). Ce code modifiera la taille sur le PDF du document, et non sur l'aperçu.

Si vous souhaitez que cela affecte également l'aperçu (et pas seulement le pdf), écrivez plutôt:

} @media all {
#extra_page_content {
font-size: 8px;
}

Changer la Couleur

Vous pouvez également changer la couleur du texte en indiquant le code suivant:

#extra_page_content {
color: blue;
}

Où "blue" représente la couleur bleue. Vous pouvez choisir n'importe quelle couleur, en remplaçant 'blue' par une autre couleur (ex: 'red'). Vous pouvez consulter la liste des noms de couleurs possibles ici.

Si vous souhaitez que cela affecte également l'aperçu (et pas seulement le pdf), écrivez plutôt:

} @media all {
#extra_page_content {
color: blue;
}

Changer le Type de police

Vous pouvez par ailleurs changer le type de police grâce au code suivant:

#extra_page_content {
font-family: arial;
}

Où "arial" représente le style de police. Vous pouvez consulter la liste des styles de police possibles ici.

Si vous souhaitez que cela affecte également l'aperçu (et pas seulement le pdf), écrivez plutôt:

} @media all {
#extra_page_content {
font-family: arial;
}

Changer l'Alignement du texte

Vous pouvez en plus adapter l'alignement du texte en fonction de votre mise en page en copiant le code suivant:

#extra_page_content {
text-align: justify;
}

Où "justify" indique que votre texte sera justifié. Vous pouvez écrire "center" pour centrer votre texte, "left" pour le mettre à gauche ou "right" pour l'aligner à droite.

Si vous souhaitez que cela affecte également l'aperçu (et pas seulement le pdf), écrivez plutôt:

} @media all {
#extra_page_content {
text-align: justify;
}

N'oubliez pas de sauvegarder une fois le code ajouté, afin de visualiser l'effet sur n'importe quel document créé.

Organiser le contenu en Colonnes

Le contenu de votre texte additionnel peut être long (surtout en cas de CGV). Si vous souhaitez qu'il tienne sur une page, réduire la taille du contenu peut ne pas être suffisant, et il vaut mieux alors l'organiser en colonnes (2 ou 3), en copiant le code suivant (qui reprend également les modification:

#extra_page_content {
  display: block;
  text-align: justify;
  padding: 0.75cm;
  columns:2;
}

où 2 représente le nombre de colonnes. Vous pouvez indiquer à la place columns:3; si vous souhaitez 3 colonnes.

Si vous souhaitez que cela affecte également l'aperçu (et pas seulement le pdf), écrivez plutôt:

} @media all {
#extra_page_content {
  display: block;
  text-align: justify;
  padding: 0.75cm;
  columns:2;
  }

N'oubliez pas de sauvegarder une fois le code ajouté, afin de visualiser l'effet sur n'importe quel document créé.
! Attention : avec ce code, il vous faut imprimer vos documents avec la fonction "Imprimer > Impression rapide".

Exemple

Un contenu plus petit, justifié, mois espacé, et organisé en 3 colonnes :

} @media all {
#extra_page_content {
  font-size: 8px !important;
  line-height: 9px !important;
  clear: both;
  display: block;
  text-align: justify;
  padding: 0.75cm;
  columns:3;
  }

En savoir plus sur les modifications possibles via le champ CSS

Retour