Personnalisation du thème de votre centre d’aide

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

Accès rapide : Admin Guide > Panneau de personnalisation > Personnaliser > Modifier le code

Les administrateurs Guide aguerris peuvent travailler directement dans la page de code pour créer un thème personnalisé pour votre centre d’aide. Les thèmes personnalisés peuvent inclure :

Des modèles modifiables qui définissent la disposition de chaque page (par exemple, page d’article, page de catégorie ou page de sujet de la communauté)
Des pages personnalisées que vous créez de zéro et placez n’importe où dans votre centre d’aide
Des en-têtes et pieds de page globaux pour le centre d’aide

Vous pouvez aussi utiliser un langage de création de modèles appelé Curlybars pour accéder aux données du centre d’aide et manipuler le contenu des modèles de pages et des pages personnalisées. Vous pouvez aussi utiliser les fichiers JavaScript et CSS inclus à votre thème pour modifier l’aspect et le comportement de votre thème sur l’ensemble du site. Si vous envisagez d’utiliser votre propre code HTML pour modifier le thème de votre centre d’aide, consultez Modification du code source des articles du centre d’aide.

Quand vous modifiez le code d’un thème (par exemple, ses modèles, son JavaScript ou son CSS), l’aperçu du thème affiche l’icône </>, qui indique que le code du thème a été modifié et qu’il ne recevra plus les nouvelles fonctionnalités et mises à jour.

Conseil : si vous avez besoin d’aide avec la gestion de la marque et la personnalisation de votre centre d’aide, vous pouvez vous rendre dans Zendesk Marketplace pour acheter de nouveaux thèmes créés par Zendesk et des développeurs tiers.

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 pourront plus accéder à cette fonctionnalité.

Cet article aborde les sujets suivants :

Personnalisation des modèles de page avec HTML et Curlybars
Personnalisation du code CSS ou JavaScript
Utilisation de variables dans CSS et HTML

Personnalisation des modèles de page et des pages personnalisées avec HTML et Curlybars

Le code HTML du centre d’aide est contenu dans des modèles modifiables qui définissent la présentation de vos types de page, les pages personnalisées, ainsi que l’en-tête et le pied de page. Vous pouvez aussi utiliser un langage de création de modèles appelé Curlybars pour créer et manipuler le contenu de ces éléments.

Remarque – Avec les éditions Enterprise, vous pouvez créer des pages personnalisées, ainsi que d’autres modèles de page pour les articles, les sections et les catégories, si vous avez besoin de plusieurs versions de ces modèles.

Vous pouvez personnaliser le modèle des types ou éléments de page suivants ou créer vos propres pages personnalisées :

Les pages personnalisées (custom_page.hbs) : pages personnalisées que vous créez de zéro et placez n’importe où dans votre centre d’aide.
La page Article (article_page.hbs) : la page de chaque article dans la base de connaissances.
La page Catégorie (category_page.hbs) : les pages d’accueil.
La page de liste de publications dans la communauté (community_post_list_page.hbs).
La page des publications de la communauté (community_post_page.hbs).
La page de liste de sujets de la communauté (community_topic_list_page.hbs).
La page des sujets de la communauté (community_topic_page.hbs).
La page de contributions (contributions_page.hbs) : les listes des publications, les commentaires de la communauté et les commentaires sur les articles faits par un utilisateur final.
L’en-tête du document (document_head.hbs) : la balise head du document.
La page d’erreur (error_page.hbs) : le message qui s’affiche quand l’utilisateur essaie d’accéder à une page qui n’existe pas.
Le pied de page (footer.hbs) : les barres qui s’affichent en bas de toutes les pages du centre d’aide.
L’en-tête (header.hbs) : les barres qui s’affichent en haut de toutes les pages du centre d’aide.
La page d’accueil (home_page.hbs) : la page d’accueil de niveau supérieur de votre centre d’aide.
La page de nouvelle publication dans la communauté (new_community_post_page.hbs).
La page Nouvelle demande (new_request_page.hbs) : le formulaire d’envoi de la demande ou du ticket.
La page Demande (request_page.hbs) : la page de chaque demande ou ticket.
La page Demandes (requests_page.hbs) : les listes de demandes ou tickets affectés à un utilisateur ou qui lui sont envoyés en CC.
Les résultats de recherche (search_results.hbs) : le format d’affichage des résultats de recherche.
La page Section (section_page.hbs) : les pages d’accueil.
La page Abonnements (subscriptions_page.hbs) : la liste des catégories, sections et articles auxquels est abonné un utilisateur.
La page du profil d’utilisateur (user_profile_page.hbs).

Remarque – Quand vous utilisez l’éditeur de thème pour modifier les modèles de page, CSS ou JavaScript pour un thème standard ou quand vous développez votre propre thème, il est enregistré en tant que thème personnalisé. Les thèmes personnalisés ne sont pas pris en charge par Zendesk et ne sont pas mis à jour automatiquement quand de nouvelles fonctionnalités sont publiées (consultez À propos des thèmes standards et personnalisés dans le centre d’aide).

Pour modifier les modèles de page

Dans Guide, cliquez sur l’icône du panneau de personnalisation () dans la barre latérale.
Cliquez sur Personnaliser sur le thème que vous voulez modifier.
Cliquez sur Modifier le code.
Dans la section Modèles, cliquez sur le modèle ou la page personnalisée que vous voulez modifier.
La page s’ouvre dans l’éditeur de code.
Modifiez le modèle ou la page dans la vue du code.
Vous pouvez ajouter, supprimer et réorganiser les éléments suivants :
- Expressions de modèle pour afficher et manipuler le contenu de vos pages
  Par exemple, l’assistant de modèles Fil d’Ariane {{breadcrumbs}} affiche un élément de navigation par fil d’Ariane sur une page. Pour un guide détaillant les expressions de modèle, consultez la section portant sur les modèles du centre d’aide.
- Balises de contenu dynamique (consultez Ajout de texte traduit)
- Widgets incorporables créés par des tiers
- Balises HTML
Cliquez sur Enregistrer en haut à droite pour enregistrer vos modifications.
Si vous avez modifié un modèle, les modifications sont appliquées à toutes les pages de votre thème basé sur ce modèle.
Pour afficher un aperçu de vos modifications, cliquez sur Aperçu. Consultez Aperçu de votre thème dans le centre d’aide.

Remarque – Quand vous consultez l’aperçu d’un thème, il est possible que certaines fonctionnalités ne marchent pas. La fonctionnalité d’aperçu est conçue pour présenter les modifications de l’aspect du thème, mais pas pour tester ses fonctionnalités interactives dans leur intégralité. À cette fin, nous vous conseillons d’utiliser une sandbox.
Continuez de modifier le code si nécessaire, puis cliquez sur Enregistrer.
Quand vous avez fini de modifier le modèle de page ou la page personnalisée, vous pouvez le fermer.

Conseil : consultez cet article du blog Zendesk pour d’autres idées de modèles d’articles de la base de connaissances.

Personnalisation du code CSS ou JavaScript

Vous pouvez ajouter du code JavaScript ou personnaliser la feuille de style CSS du site. Pour avoir un aperçu de ce que vous pouvez faire dans le centre d’aide avec un peu code, consultez les ressources suivantes :

Remarque – Quand vous utilisez l’éditeur de thème pour modifier les modèles de page, CSS ou JavaScript pour un thème standard ou quand vous développez votre propre thème, il est enregistré en tant que thème personnalisé. Les thèmes personnalisés ne sont pas pris en charge par Zendesk et ne sont pas mis à jour automatiquement quand de nouvelles fonctionnalités sont publiées. Consultez À propos du thème standard et des thèmes personnalisés dans le centre d’aide.

Pour personnaliser du code CSS ou JavaScript

Dans Guide, cliquez sur l’icône du panneau de personnalisation () dans la barre latérale.
Cliquez sur Personnaliser sur le thème que vous voulez modifier.
Cliquez sur Modifier le code.
Cliquez sur script.js pour modifier le code JavaScript ou sur style.css pour modifier le code CSS.
Le fichier s’ouvre dans l’éditeur de code.
Ajoutez ou modifiez le code CSS ou JavaScript dans la vue du code.
Cliquez sur Enregistrer en haut à droite pour enregistrer vos modifications.
Les modifications sont appliquées à votre thème.
Pour visualiser vos modifications, cliquez sur Aperçu (consultez Aperçu de votre thème dans le centre d’aide).
Continuez de modifier le code si nécessaire, puis cliquez sur Enregistrer.
Quand vous avez terminé, vous pouvez fermer le fichier.

Utilisation de variables dans CSS et HTML

Les propriétés que vous choisissez dans le volet Paramètres ou définissez dans votre fichier de manifeste pour les couleurs, les polices et les images du thème sont stockées sous la forme de variables. Vous pouvez utiliser ces variables dans le fichier style.css du thème. Vous pouvez aussi référencer les variables en utilisant des expressions Curlybars dans les modèles de page HTML.

Les variables sont utiles pour spécifier la même valeur à plusieurs endroits et la mettre à jour rapidement. Si vous mettez la propriété à jour, elle est mise à jour partout où elle est utilisée. Le thème Copenhagen par défaut inclut des variables pour les couleurs et les polices. Vous pouvez changer les noms et les libellés, supprimer des variables ou en ajouter (consultez Manifeste des paramètres - Référence).

Dans le thème Copenhagen standard, vous disposez des variables suivantes par défaut :

brand_color est la couleur de la marque pour les principaux éléments de navigation.
brand_text_color est la couleur de la marque pour les statuts de survol et actif.
text_color est la couleur du texte pour les éléments du corps et du titre.
link_color est la couleur du texte pour les éléments de liens.
background_color est la couleur d’arrière-plan de votre centre d’aide.
heading_font est la police pour les titres.
text_font est la police pour le corps du texte.
logo est le logo de l’entreprise.
favicon est l’icône affichée dans la barre d’adresse de votre navigateur.
homepage_background_image est l’image du héros de la page d’accueil.
community_background_image est l’image du héros de la page des sujets de la communauté.
community_image est l’image pour la section Communauté de la page d’accueil.

Pour utiliser des variables dans CSS et HTML, consultez :

Exemples utilisant des variables dans CSS
Exemples utilisant des variables dans Curlybars dans HTML

Exemples utilisant des variables dans CSS

Les propriétés que vous définissez pour les couleurs, les polices et les images du thème sont stockées dans des variables que vous pouvez utiliser dans le fichier style.css de votre thème.

Par exemple, vous pouvez utiliser certaines des variables par défaut dans CSS avec la syntaxe suivante :

$brand_color
$brand_tex_color
$heading_font
$text_font

Dans le fichier CSS, vous affectez une variable à une propriété CSS de la même façon que vous le feriez pour affecter une valeur normale. Par exemple :

.button {
  label-color: $text_font;
}

Vous pouvez aussi utiliser des accolades simples pour incorporer l’assistant dans une expression CSS, comme suit :

max-width: #{$search_width}px

Exemples utilisant des variables dans Curlybars dans HTML

Les propriétés que vous définissez pour les couleurs, les polices et les images du thème sont stockées dans des variables que vous pouvez référencer avec des expressions Curlybars dans les modèles de page HTML.

Les variables deviennent des propriétés dans l’objet settings dans Curlybars. Comme avec tout objet Curlybars, vous pouvez utiliser des accolades doubles et la notation par points pour insérer une propriété dans un modèle de page.

Par exemple :

{{settings.color_1}} est la valeur HEX d’une couleur. Exemple :#FF00FF
{{{settings.font_1}} est la liste des polices. Par exemple, le système est défini comme : '-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif"
{{settings.homepage_background_image}} est le chemin pour le fichier stocké dans ce champ. Exemple :p8.zdassets.com/theme_assets/...
{{settings.range_input}} est la valeur d’entrée de plage.

L’objet settings peut être utilisé comme entrée pour n’importe quel assistant. Par exemple :

{{is settings.enabled}} ... {{/is}}