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, 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
- 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
- Comment modifier l’espace 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
- Modification des dimensions de 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
- Comment modifier l’apparence du temps écoulé 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 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.
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;
}
4 commentaire