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.
Pour accéder au code CSS et le modifier dans Guide, consultezPersonnalisation 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 d’un 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
- Comment modifier la couleur d’arrière-plan de l’en-tête et du bas de page
- Comment modifier la hauteur de l’en-tête et du bas de page
- 评论修改器空间au-dessus et en dessous de l’en-tête et du bas de page
- Comment modifier l’apparence de la langue sélectionnée
- Comment modifier l’apparence du lien Envoyer une demande
- Comment masquer le lien Envoyer une demande
- Comment modifier l’apparence du lien Connexion
- Comment modifier les dimensions du logo
Recherche
- Comment modifier la largeur/hauteur du champ de recherche
- Comment modifier la couleur d’arrière-plan du champ de recherche
- Comment modifier l’apparence du texte de recherche
- Comment modifier l’apparence du titre de la page des résultats
- Comment modifier l’aspect de la mise en surbrillance des mots-clés dans les résultats de recherche
- Comment modifier l’apparence des titres de la base de connaissances et de la communauté
- Comment modifier l’espacement entre les résultats
- Comment modifier l’apparence du texte des résultats
- Comment modifier la couleur des liens de résultats
Fil d’Ariane
Liste des articles
Articles de la base de connaissances
- Comment modifier l’apparence des titres des articles
- Comment modifier l’apparence du texte des articles
- Comment modifier la couleur des liens d’articles
- Comment modifier l’apparence du nom de l’auteur
- Comment modifier l’apparence de la chaîne mise à jour en dernier
- Comment modifier l’apparence de « Cet article vous a-t-il été utile ? »
- Comment modifier l’apparence du compteur de votes
- Comment modifier l’apparence de « Vous avez d’autres questions ? Envoyer une demande »
- Comment modifier l’apparence du titre des commentaires
- Comment modifier l’apparence du texte des commentaires
Questions et réponses de la communauté
- Comment modifier l’apparence du titre des questions
- Comment modifier l’apparence du texte des questions
- Comment modifier la couleur des liens des questions
- Comment modifier l’apparence du nom des auteurs des questions
- Comment modifier l’apparence de l’heure de publication des questions
- Comment modifier l’apparence du lien de partage des questions
- Comment modifier l’apparence du titre des réponses
- Comment modifier l’apparence du texte des réponses
- Comment modifier l’apparence du nom des auteurs des réponses
- 评论修改器l 'apparence du临时工ecoule depuis la publication d’une question
- Comment modifier l’apparence du lien de partage des réponses
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 auSommaire.
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-colordans 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éheightdans les sélecteurs suivants.
En-tête :
.header { height: 70px; }Bas de page :
.footer { height: 20px; }评论修改器空间au-dessus et en dessous de l’en-tête et du bas de page
Modifiez ou ajoutez les propriétésmargin-bottometmargin-topdans 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
Ajoutez le sélecteur suivant et ajoutez ou modifiez les propriétés de texte :
.submit-a-request { font-size: 14px; color: green; }Comment masquer le lien Envoyer une demande
Modifiez le sélecteur suivant :
.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; }Comment modifier les dimensions du 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.
Pour modifier la taille de votre logo
- Dans Guide, cliquez sur l’icône dupanneau de personnalisation(
) dans la barre latérale. - Cliquez surModifier le thème.
- Cliquez surCSSpour 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数值de la道具riétéheightdans le sélecteur « .logo img » pour qu’elle corresponde à la taille de l’image.
- Cliquez surEnregistrer.
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 lasection d’aide pour la recherchedans le Guide des modèles du centre d’aide.
Retour auSommaire.
Comment modifier la largeur/hauteur du champ de recherche
Modifiez les valeurswidthouheightdans 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ébackgrounddans 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 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-bottomdans 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écolordans 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 lasection d’aide pour le fil d’Arianedans le Guide des modèles du centre d’aide.
Retour auSommaire.
评论修改器空间au-dessus et en dessous du fil d’Ariane
Ajoutez ou modifiez la propriétépaddingdans 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éscoloretcontentdans 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 auSommaire.
Comment modifier l’espace autour de la liste des articles
Ajoutez ou modifiez les propriétéspaddinget le sélecteur suivants :
.article-list { padding-left: 16px; padding-right; 20px; }Comment modifier l’espacement entre les articles
Modifiez la propriétémargin-bottomdans 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 auSommaire.
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{颜色:# 666;字体类型: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 auSommaire.
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; }评论修改器l 'apparence du临时工ecoule 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; }
4 Commentaires
Bonjour, dans l'éditeur de texte , le rendu est défini par la feuille de style "feuille de style user-agent"
et ne prends pas en compte la feuille de style.css du thème/template.
Comment faire pour que cela soir pris en compte par l'éditeur de texte ?
D'une manière générale une règle CSS peut-être remplacée par une nouvelle, si cette dernière se trouve placée en dessous de la première dans la feuille CSS.
Vous pouvez également forcer le style en ajoutant "!important" sur votre règle, comme ceci :margin-inline-start: 40px !important;
N'hésitez pas à contacter notre support si vous avez des questions concernant la personnalisation votre thème.
Cordialement.
Bonjour,
Dans notre compte Zendesk, chaque client (B2B), avec un·e ou plusieurs utilisateur·ices, correspond à une organisation. Tous nos utilisateur·ices (end-user) ont accès aux formulaires de contact via le lien Envoyer une demande.
Aujourd'hui, je cherche à masquer le lien pour un groupe d'utilisateur·ices d'un de nos clients, mais je n'arrive pas à trouver l'article ou le guide pour pouvoir le faire. Pouvez-vous m'aider s'il vous plaît ? Peut-être que ce n'est pas possible.
Vous devriez pouvoir masquer la plupart des éléments de votre centre d'aide selon l'organisation de l'utilisateur en vous inspirant des deux articles ci-dessous:
Il faudra bien entendu adapter le code à votre besoin mais tout y est. J'espère que cela vous sera utile!
Vous devezvous connecterpour laisser un commentaire.