Personnalisation du thème de votre centre d’aide

Suite Growth, Professional, Enterprise et Enterprise Plus édition professional enterprise

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

Les administrateurs指导aguerris peuvent阵痛ler 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, consultezModification du code source des articles du centre d’aide.

Conseil :si vous avez besoin d’aide pour intégrer votre marque et personnaliser votre centre d’aide, consultezDiziana. Ils vendent des centaines de thèmes et de modèles prêts à l’emploi et peuvent vous aider à vous lancer.

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 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 :

Lespages 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.
Lapage Article(article_page.hbs) : la page de chaque article dans la base de connaissances.
Lapage Catégorie(category_page.hbs): les pages d’accueil.
Lapage de liste de publications dans la communauté(community_post_list_page.hbs).
Lapage des publications de la communauté(community_post_page.hbs).
Lapage de liste de sujets de la communauté(community_topic_list_page.hbs).
Lapage des sujets de la communauté(community_topic_page.hbs).
Lapage 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 baliseheaddu document.
Lapage d’erreur(error_page.hbs) : le message qui s’affiche quand l’utilisateur essaie d’accéder à une page qui n’existe pas.
Lepied 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.
Lapage d’accueil(home_page.hbs) : la page d’accueil de niveau supérieur de votre centre d’aide.
Lapage de nouvelle publication dans la communauté(new_community_post_page.hbs).
Lapage Nouvelle demande(new_request_page.hbs) : le formulaire d’envoi de la demande ou du ticket.
Lapage Demande(request_page.hbs) : la page de chaque demande ou ticket.
Lapage Demandes(requests_page.hbs) : les listes de demandes ou tickets affectés à un utilisateur ou qui lui sont envoyés en CC.
Lesrésultats de recherche(search_results.hbs): le 'affichage d格式es résultats de recherche.
Lapage Section(section_page.hbs) : les pages d’accueil.
Lapage Abonnements(subscriptions_page.hbs) : la liste des catégories, sections et articles auxquels est abonné un utilisateur.
Lapage du profil d’utilisateur(user_profile_page.hbs).

Remarque –当你们用l 'editeur倒调整主题er 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 quethème personnalisé. Les thèmes personnalisés ne sontpaspris en charge par Zendesk et ne sontpasmis à 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 dupanneau de personnalisation() dans la barre latérale.
Cliquez surPersonnalisersur le thème que vous voulez modifier.
Cliquez surModifier le code.
Dans la sectionModè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èlepour 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 lesmodèles du centre d’aide.
- Balises de contenu dynamique(consultezAjout de texte traduit)
- Widgets incorporablescréés par des tiers (widget de recherche Twitter, par exemple)
- Balises HTML
Cliquez surEnregistreren 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 visualiser vos modifications, cliquez surAperçu(consultezAperç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 surEnregistrer.
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 Zendeskpour 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 –当你们用l 'editeur倒调整主题er 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 quethème personnalisé. Les thèmes personnalisés ne sontpaspris en charge par Zendesk et ne sontpasmis à 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 dupanneau de personnalisation() dans la barre latérale.
Cliquez surPersonnalisersur le thème que vous voulez modifier.
Cliquez surModifier le code.
Cliquez surscript.jspour modifier le code JavaScript ou surstyle.csspour 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 surEnregistreren haut à droite pour enregistrer vos modifications.
Les modifications sont appliquées à votre thème.
Pour visualiser vos modifications, cliquez surAperçu(consultezAperçu de votre thème dans le centre d’aide).
Continuez de modifier le code si nécessaire, puis cliquez surEnregistrer.
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 fichierstyle.cssdu 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 (consultezManifeste des paramètres - Référence).

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

brand_colorest la couleur de la marque pour les principaux éléments de navigation.
brand_text_colorest la couleur de la marque pour les statuts de survol et actif.
text_colorest la couleur du texte pour les éléments du corps et du titre.
link_colorest la couleur du texte pour les éléments de liens.
background_colorest la couleur d’arrière-plan de votre centre d’aide.
heading_fontest la police pour les titres.
text_fontest la police pour le corps du texte.
logoest le logo de l’entreprise.
faviconest l’icône affichée dans la barre d’adresse de votre navigateur.
homepage_background_imageest l’image du héros de la page d’accueil.
community_background_imageest l’image du héros de la page des sujets de la communauté.
community_imageest 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

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 fichierstyle.cssde 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’objetsettingsdans 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}}