Guide CSS du centre d’aide

Disponible pour les éditions Suite Growth et supérieures Disponible pour toutes les éditions Guide

Vous pouvez facilement personnaliser l’apparence de votre centre d’aide à l’aide des feuilles de style CSS (Cascading Style Sheets). Ce guide est destiné à vous aider à modifier l’aspect de votre centre d’aide pour l’adapter à vos besoins et à votre marque.

Remarque – L’édition Professional, qui comprend des options de modification de code, est proposée aux utilisateurs ayant choisi la version d’essai, mais s’ils achètent Suite Team, ils ne peuvent plus accéder à cette fonctionnalité.

Pour accéder au code CSS et le modifier dans Guide, consultez Personnalisation du code CSS ou JavaScript.

Si vous ne connaissez pas le code CSS ou que vous êtes un peu rouillé, consultez les didacticiels suivants pour vous mettre à niveau :

Getting started with CSS (version française disponible sur le site en remplaçant « en-US » par « fr » dans l’adresse) est le didacticiel CSS le plus complet, conçu pour les débutants. Il vous guidera à travers les fonctions de base des CSS grâce à des exemples pratiques que pourrez tester vous-même.
CSS Beginner Tutorial (en anglais) contient tout ce qu’il faut savoir pour bien démarrer.

Vous pouvez aussi personnaliser l’aspect de votre centre d’aide en utilisant le langage de création de modèles du centre d’aide ou JavaScript :

Sommaire

Le guide est organisé en sections qui couvrent les éléments du centre d’aide. Chaque section inclut du code CSS que vous pourrez copier/coller directement dans la feuille de style de votre thème. Vous pouvez soit utiliser le code tel quel, soit le modifier en fonction de vos besoins.

Ce guide n’est pas exhaustif. En modifiant les modèles HTML et la feuille de style CSS, vous n’êtes limité que par votre imagination.

En-tête et bas de page

L’en-tête affiche un logo et d’autres éléments, en fonction du thème et des rôles utilisateur utilisés. Le bas de page peut servir à afficher des liens connexes, des informations sur votre société ou des mentions légales.

Retour au Sommaire.

Comment modifier la couleur d’arrière-plan de l’en-tête et du bas de page

Modifiez ou ajoutez la propriété background-color dans les sélecteurs suivants.

En-tête :

.header {
  background-color: #666;
}

Bas de page :

.footer {
  background-color: #333;
}

Comment modifier la hauteur de l’en-tête et du bas de page

Modifiez ou ajoutez la propriété height dans les sélecteurs suivants.

En-tête :

.header {
   height: 70px;
}

Bas de page :

.footer {
   height: 20px;
}

Comment modifier l’espace au-dessus et en dessous de l’en-tête et du bas de page

Modifiez ou ajoutez les propriétés margin-bottom et margin-top dans les sélecteurs suivants.

En-tête :

.header {
     margin-bottom: 20px;
}

Bas de page :

.footer {
     margin-top: 10px;
}

Comment modifier l’apparence de la langue sélectionnée

Ajoutez la propriété et le sélecteur suivants :

.language-selector .dropdown-toggle {
  color: green;
}

Comment modifier l’apparence du lien Envoyer une demande

Le modèle header.hbs propose une version de bureau et une version mobile de l’en-tête dans le même modèle afin qu’il soit adaptatif. La version de bureau se trouve dans une div avec une classe intitulée nav-wrapper-desktop et la version mobile dans une div avec une classe intitulée nav-wrapper-mobile. Chaque div contient un lien Envoyer une demande indépendant. Pour modifier l’apparence du lien, vous devez créer une version de bureau et une version mobile de votre règle CSS et accroître la spécificité de leurs sélecteurs.

Ajoutez les sélecteurs suivants au fichier style.css et modifiez les propriétés du texte :

.nav-wrapper-desktop a.submit-a-request {
  font-size: 14px;
  color: green;
}

.nav-wrapper-mobile a.submit-a-request {
  font-size: 12px;
  color: green;
}

Comment masquer le lien Envoyer une demande

Ajoutez les sélecteurs suivants au fichier style.css :

.nav-wrapper-desktop a.submit-a-request {
  display:none;
}

.nav-wrapper-mobile a.submit-a-request {
  display:none;
}

Comment modifier l’apparence du lien Connexion

Ajoutez ou modifiez les propriétés de texte dans le sélecteur suivant :

.login {
  font-size: 14px;
  color: green;
}

Modification des dimensions de logo

Bien que la taille de logo recommandée soit 200 x 50 pixels, vous pouvez remplacer cette valeur par défaut si nécessaire.

Remarque – Pour utiliser un logo plus grand que la taille recommandée, vous devez héberger le logo à l’extérieur de votre instance de Zendesk Support.

Pour modifier la taille de votre logo

Dans Guide, cliquez sur l’icône du panneau de personnalisation () dans la barre latérale.
Cliquez sur Modifier le thème.
Cliquez sur CSS pour ouvrir la feuille de style CSS, puis recherche la règle suivante :
```
.logo img {
  max-height: 37px;
}
```
Pour rechercher, cliquez à l’intérieur de l’éditeur de code et appuyez sur Ctrl+F (Windows) ou Cmd+F (Mac).
Modifiez la valeur de la propriété height dans le sélecteur « .logo img » pour qu’elle corresponde à la taille de l’image.
Cliquez sur Enregistrer.

Recherche

Le champ de recherche permet de rechercher du contenu dans la base de connaissances et la communauté ; il affiche des liens dans une page de résultats. Si besoin est, vous pouvez supprimer ce champ de recherche. Pour en savoir plus, consultez la section d’aide pour la recherche dans le Guide des modèles du centre d’aide.

Retour au Sommaire.

Comment modifier la largeur/hauteur du champ de recherche

Modifiez les valeurs width ou height dans les sélecteurs suivants.

Version étendue du champ de recherche :

.search input[type=search] {
  height: 50px;
  width: 90%;
}

Version réduite du champ de recherche :

.search-small input[type=search] {
  height: 50px;
  width: 320px;
}

Comment modifier la couleur d’arrière-plan du champ de recherche

Modifiez la propriété background dans les sélecteurs suivants.

Version étendue du champ de recherche :

.search input[type=search] {
  background: #999;
}

Version réduite du champ de recherche :

.search-small input[type=search] {
  background: #999;
}

Comment modifier l’apparence du texte de recherche

Ajoutez ou modifiez des propriétés de texte dans les sélecteurs suivants :

Version étendue du champ de recherche :

.search {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Version réduite du champ de recherche :

.search-small {
  font-size: 12px;
  font-family: Tahoma, Arial, sans-serif;
}

Comment modifier l’apparence du titre de la page des résultats

Le titre de la page des résultats de recherche est le nombre de résultats renvoyés pour le terme de recherche. Exemple : 9 résultats pour « numéro de série ».

Ajoutez le sélecteur suivant s’il n’est pas déjà présent dans la feuille de style et modifiez ou ajoutez les propriétés de texte :

.search-results-heading {
  font-size: 36px;
  font-family: Tahoma, Arial, sans-serif;
}

Comment modifier l’aspect de la mise en surbrillance des mots-clés dans les résultats de recherche

Les termes en surbrillance dans les résultats de recherche sont entourés de l’élément <em> sous le conteneur .search-result-description. Si vous voulez que les termes en surbrillance s’affichent en gras sur fond jaune, procédez comme suit :

.search-result-description em {  
  font-weight: bold;
  background-color: #FFF3CA;
  padding: 0px 3px 2px;
  border-radius: 3px;
}

Comment modifier l’apparence des titres de la base de connaissances et de la communauté

Ajoutez ou modifiez les propriétés de texte dans le sélecteur suivant :

.search-results-subheading {
  font-size: 24px;
  font-family: Tahoma, Arial, sans-serif;
}

Comment modifier l’espacement entre les résultats

Ajoutez une propriété margin-bottom dans le sélecteur suivant :

.search-result {
  margin-bottom: 20px;
}

Comment modifier l’apparence du texte des résultats

Ajoutez ou modifiez les propriétés de texte dans le sélecteur suivant :

.search-result {
  font-size: 105%;
  font-family: Arial, Helvetica, sans-serif;
}

Comment modifier la couleur des liens de résultats

Ajoutez ou modifiez la propriété color dans le sélecteur suivant :

.search-result a {
  color: #484;
}

Fil d’Ariane

Le fil d’Ariane aide les utilisateurs à parcourir le contenu de votre centre d’aide. Si besoin est, vous pouvez supprimer le fil d’Ariane. Pour en savoir plus, consultez la section d’aide pour le fil d’Ariane dans le Guide des modèles du centre d’aide.

Retour au Sommaire.

Comment modifier l’espace au-dessus et en dessous du fil d’Ariane

Ajoutez ou modifiez la propriété padding dans le sélecteur suivant :

.breadcrumbs {
  padding-top; 20px;
  padding-bottom: 16px;
}

Comment modifier l’apparence du texte du fil d’Ariane

Ajoutez ou modifiez les propriétés de texte dans le sélecteur suivant :

.breadcrumbs li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Comment modifier la couleur des liens du fil d’Ariane

Ajoutez la propriété et le sélecteur suivants :

.breadcrumbs li a {
  color: #484;
}

Comment modifier le caractère de pointeur (>) dans le fil d’Ariane

Modifiez les propriétés color et content dans le sélecteur suivant :

.breadcrumbs li + li:before {
  color: #158EC2;
  content: ">>";
}

Liste des articles

Selon le thème, les listes des articles sont présentes dans la page d’accueil, les pages de destination des catégories et des sections.

Retour au Sommaire.

Comment modifier l’espace autour de la liste des articles

Ajoutez ou modifiez les propriétés padding et le sélecteur suivants :

.article-list {
  padding-left: 16px;
  padding-right; 20px;
}

Comment modifier l’espacement entre les articles

Modifiez la propriété margin-bottom dans le sélecteur suivant :

.article-list > li {
  margin-bottom: 10px;
}

Comment modifier l’apparence des liens d’articles

Ajoutez ou modifiez les propriétés de texte dans le sélecteur suivant :

.article-list > li {
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}

Comment modifier la couleur des liens d’articles

Ajoutez la propriété et le sélecteur suivants :

.article-list li a {
  color: #FFF;
}

Articles de la base de connaissances

Vous modifiez l’apparence des articles de votre base de connaissances.

Retour au Sommaire.

Comment modifier l’apparence des titres des articles

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-header h1 {
  color: #993;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 20px;
}

Comment modifier l’apparence du texte des articles

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-body {
  color: #666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

Comment modifier la couleur des liens d’articles

Ajoutez ou modifiez la propriété et le sélecteur suivants :

.article-body a {
  color: #930;
}

Comment modifier l’apparence du nom de l’auteur

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-author a {
  color: #669;
  font-family: Georgia, Times New Roman, serif;
  font-size: 16px;
}

Comment modifier l’apparence de la chaîne mise à jour en dernier

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-updated {
  color: #CCC;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 13px;
}

Comment modifier l’apparence de « Cet article vous a-t-il été utile ? »

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-vote-question {
  color: #763;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
}

Comment modifier l’apparence du compteur de votes

Exemple : « 6 sur 8 ont trouvé cela utile ». Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-vote-count {
  font-family: Georgia, Times New Roman, serif;
  font-size: 10px;
}

Comment modifier l’apparence de « Vous avez d’autres questions ? Envoyer une demande »

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-more-questions {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 105%;
}

Comment modifier l’apparence du titre des commentaires

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.article-comments h2 {
  color: #666;
  font-family: Georgia, Times New Roman, serif;
  font-size: 130%;
}

Comment modifier l’apparence du texte des commentaires

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.comment-body  {
  color: #666;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
}

Questions et réponses de la communauté

Vous pouvez modifier l’apparence du contenu de votre communauté.

Retour au Sommaire.

Comment modifier l’apparence du titre des questions

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.question-title {
  color: #484;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 120%;
}

Comment modifier l’apparence du texte des questions

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.question-text {
  color: #666;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 14px;
}

Comment modifier la couleur des liens des questions

Ajoutez ou modifiez la propriété et le sélecteur suivants :

.question-text a {
  color: #484;
}

Comment modifier l’apparence du nom des auteurs des questions

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.question-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Pour modifier la couleur du lien, ajoutez ou modifiez la propriété et le sélecteur suivants :

.question-author a {
  color: #484;
}

Étant donné que le nom de l’auteur de la question, le temps écoulé depuis la publication de la question et le lien de partage sont généralement groupés sur une page, il paraît logique de leur donner la même apparence. Pour ce faire, utilisez le sélecteur combiné suivant :

.question-author, .question-published, .question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Comment modifier l’apparence de l’heure de publication des questions

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.question-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Comment modifier l’apparence du lien de partage des questions

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.question-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Comment modifier l’apparence du titre des réponses

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.answer-list-heading {
  color: #4CC;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 105%;
}

Comment modifier l’apparence du texte des réponses

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.answer-text {
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 105%;
}

Comment modifier l’apparence du nom des auteurs des réponses

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.answer-author {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Pour modifier la couleur du lien, ajoutez ou modifiez la propriété et le sélecteur suivants :

.answer-author a {
  color: #484;
}

Étant donné que le nom de l’auteur de la réponse, le temps écoulé depuis la publication de la réponse et le lien de partage sont généralement groupés sur une page, il paraît logique de leur donner la même apparence. Pour ce faire, utilisez le sélecteur combiné suivant :

.answer-author, .answer-published, .answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Comment modifier l’apparence du temps écoulé depuis la publication d’une question

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.answer-published {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}

Comment modifier l’apparence du lien de partage des réponses

Ajoutez ou modifiez les propriétés et le sélecteur suivants :

.answer-share {
  font-family: Georgia, Times New Roman, serif;
  font-size: 12px;
}