Introduction à l’éditeur d’habillage sans cadre

Dans n’importe quelle sortie d’aide Web, telle que HTML5 réactif ou sans cadre, vous obtenez une expérience qui reflète étroitement n’importe quel portail et contient la navigation, la recherche et d’autres fonctionnalités.La sortie a un aspect et une convivialité qu’un utilisateur souhaite personnaliser en fonction de la marque de l’entreprise ou d’autres directives.

L’une des façons de personnaliser la sortie consiste à personnaliser l’habillage.En plus de définir le style visuel, l’habillage définit également la disposition.Par exemple, la table des matières peut être une liste déroulante au lieu d’être simplement une structure arborescente.RoboHelp est directement livré avec différents habillages. À l’aide de l’éditeur d’habillage, vous pouvez personnaliser n’importe quel habillage selon vos besoins.

Vous pouvez voir tous les habillages de votre projet à partir du panneau Habillages de l’onglet Sortie.

éditeur d’habillage
Éditeur d’habillage RoboHelp

Double-cliquez sur n’importe quel habillage pour ouvrir l’éditeur d’habillage.L’éditeur d’habillage HTML5 réactif est différent de sans cadre. 

La plupart des habillages ont deux types de pages, la page d’accueil et la page de rubrique.La page d’accueil contient une image héros, une barre de recherche, des vignettes de la liste des matières et d’autres contenus facultatifs. La page d’accueil est facultative et certains habillages ne l’intègrent pas. La page de rubrique contient le contenu réel, la navigation, la recherche et d’autres widgets.

Prévisualisation instantanée

L’éditeur d’habillage dispose d’une prévisualisation instantanée et interactive de l’exemple de contenu.Les modifications dans l’éditeur d’habillage sont immédiatement visibles dans la prévisualisation. Vous pouvez basculer la prévisualisation en mode Bureau ou Mobile à partir de la barre d’outils. 

prévisualisation instantanée
Afficher les options de prévisualisation instantanée

La prévisualisation dispose également d’un surligneur utile avec une bordure rouge épaisse. Si vous sélectionnez une classe dans l’éditeur d’habillage, l’aperçu met en surbrillance cette zone. Vous pouvez désactiver la surbrillance dans la barre d’outils.

Comment personnaliser votre habillage

L’habillage définit l’expérience de sortie.Les données proviennent de trois sources différentes :

Toutes les chaînes proviennent du fichier de libellé spécifique à la langue dans le panneau Sortie> Libellés .Le fichier de libellé comporte des chaînes pour tous les paramètres prédéfinis que vous modifiez dans les sections appropriées.

personnaliser l’habillage
Personnaliser un habillage

Les paramètres du paramètre prédéfini de sortie vous permettent d’afficher la page d’accueil, le contenu du pied de page, le contenu personnalisé sur la page d’accueil, le bouton de téléchargement PDF, etc.

L’éditeur d’habillage vous permet de décider si vous souhaitez rendre l’habillage réactif ou si vous souhaitez afficher la boîte de dialogue d’acceptation des cookies. Ce document couvre la partie éditeur d’habillage de la personnalisation. Il fera référence à la section des paramètres prédéfinis de sortie et de libellés si nécessaire.

Paramètres généraux

Cette section traite de certaines propriétés et comportements courants de l’habillage.Le style des pages d’accueil et des pages de rubrique est couvert dans les sections suivantes.

Réactivité

Tous les habillages sont réactifs et s’adaptent aux vues de bureau et mobiles en fonction de la résolution de l’écran. Vous pouvez contrôler la résolution d’écran à laquelle le mode doit passer du bureau au mobile. Vous pouvez définir la valeur dans le champ  Disposition > Général > Largeur maximale mobile. Vous pouvez désactiver la réactivité à l’aide du paramètre Disposition > Général > Réactif

Réactivité
Définir la résolution de l’écran et désactiver la réactivité

Conformité au RGPD

Le règlement général sur la protection des données (RGPD) exige que les services prennent l’autorisation explicite d’un utilisateur avant d’enregistrer dans le navigateur le stockage local ou les cookies.  

Vous pouvez activer cette conformité à l’aide du paramètre Disposition > Général > Conformité RGPD. Certaines fonctionnalités telles que les favoris, l’état de la liste des matières et le chemin de navigation peuvent ne pas fonctionner de manière optimale sans cette acceptation.

RGPD
Affichage pour activer la conformité au RGPD

Paramètres du thème

L’éditeur d’habillage vous permet un contrôle commun pour certains aspects du style. Vous pouvez utiliser des remplacements locaux si nécessaire. Utilisez Disposition > Général > Police de la mise en forme pour définir la famille de polices. Utilisez Disposition > Général > Couleur du thème pour définir la couleur des textes et icônes.

Paramètres du thème
Définir une famille de polices

Les modifications ne s’appliquent pas aux icônes et au texte, qui ne suivent pas la couleur du thème. Utilisez Disposition > Général> Couleur de surbrillance de texte de la recherche et Disposition > Général > Couleur d'arrière-plan de surbrillance de la recherche pour définir la couleur de surbrillance des mots-clés de recherche et les couleurs d'arrière-plan. 

Accessibilité

Tous les habillages sont accessibles.Vous pouvez utiliser un lecteur d’écran, des raccourcis clavier, etc., pour l’accessibilité. Lors de la navigation à l’aide du clavier, la zone concernée est mise en surbrillance avec une bordure autour d’elle. 

Vous pouvez contrôler la couleur de la bordure à l'aide du paramètre Disposition > Général > Couleur du contour de mise au point.

Ressources utilisateur

Lorsque vous personnalisez l’habillage, souvent, vous n’avez pas besoin de fichiers supplémentaires. Pour certaines modifications avancées, par exemple, vous souhaitez une action personnalisée sur n’importe quel bouton et vous devez appeler une fonction JavaScript. Ensuite, vous devez ajouter le fichier JavaScript à l'habillage, utiliser le bouton Disposition Ressources utilisateur> Ajouter une ressource. Vous pouvez gérer toutes les ressources ajoutées explicitement dans le panneau Disposition > Ressources utilisateur

Page d'accueil

Lorsque vous personnalisez l’habillage, vous n’avez souvent pas besoin de fichiers supplémentaires. En cas de modifications avancéee, par exemple, une action personnalisée sur n’importe quel bouton, pour laquelle vous devez appeler une fonction JavaScript. Ensuite, vous devez ajouter le fichier JavaScript à l'habillage, utilisez le bouton Disposition Ressources utilisateur> Ajouter une ressource. Vous pouvez gérer toutes les ressources explicitement ajoutées dans le volet Disposition> Ressources utilisateur.


La page d’accueil comporte quatre sections. La section supérieure contient le logo, les liens, la barre de recherche principale et l’image héros. La zone des vignettes contient les vignettes conformément à la Table des matières.La page d’accueil personnalisée
et les sections de pied de page suivent.

Section supérieure

La section supérieure comporte différentes parties, par exemple, Logo, Titre, Liens d’en-tête, Filtre et Favoris. La section est similaire à la page Rubrique.Vous pouvez activer les liens d'en-tête sur la page d'accueil en utilisant la case à cocher Page d'accueil > Liens d'en-tête. L’image suivante fournit les détails de l’association de classe pour faciliter la définition du style.

Section supérieure
Afficher les détails de la section supérieure

Élément Valeur
1 Section supérieure > conteneur
2 Section supérieure > logo 
3 Section supérieure > title
4 Boutons > bouton-1
5 Section supérieure > légende 
6 Zone de recherche > boîte interne 
7 Filtres > sélectionnés par filtre

Recherche

La recherche sur la page d’accueil fonctionne de la même manière que la page de rubrique. Le champ de recherche comporte des boutons Rechercher et Effacer.Les suggestions de recherche et les résultats de recherche apparaissent de la même manière. L’image suivante fournit les détails de l’association de classe pour faciliter la définition du style. 

Suggestions de recherche
Afficher les suggestions de recherche

Élément Valeur
1 Zone de recherche > icône
2 Zone de recherche > champ de texte
3 Zone de recherche > icône de suppression
4 Résultats de la recherche > icône de fermeture
5 Résultats de la recherche > résultats-en-tête-libellé 
6 Résultats de la recherche > résultat-élément-titre
7 Résultats de la recherche > résultat-élément-résumé
8 Résultats de la recherche > résultat- élément-chemin d’accès

Vignettes de la table des matières

Les vignettes de la page d’accueil correspondent aux éléments de la table des matières sélectionnée pour la génération de sortie. La page d’accueil comporte des vignettes pour les sections et les pages. En utilisant l'option Disposition > Page d'accueil > Exploration de la table des matières, vous pouvez contrôler si vous souhaitez afficher les vignettes uniquement pour le niveau supérieur ou pour chaque niveau de la table des matières.

exploration de la table des matières
Afficher tous les niveaux dans la table des matières

Chaque vignette comporte trois parties : image, description et titre. Vous pouvez définir un ensemble d’images dans l’éditeur d’habillage à utiliser pour les vignettes. Vous pouvez également activer l'option Disposition > Page d'accueil > Gérer les vignettes de la table des matières pour définir les images de la table des matières pour chaque section et page. Cette option vous offre une plus grande flexibilité pour gérer les vignettes. Si vous ne voulez pas de vignette particulière, ne spécifiez pas l’image. Le titre est le même que celui que vous avez dans la table des matières.

Le champ de description doit être activé à l'aide de l'option Disposition Page d'accueil > Description de la vignette. La valeur de la description provient de ce que vous définissez dans les propriétés de la rubrique.

L’image suivante fournit les détails de l’association de classe pour faciliter la définition du style. Par exemple, si vous ne voulez pas du tout de vignettes de la table des matières sur votre page d’accueil. Naviguez vers Page d'accueil Vignettes de la table des matières > conteneur > Disposition > Affichage et sélectionnez aucun dans la liste déroulante.

Conteneur des vignettes de la table des matières
Vue conteneur

Vue des vignettes
Vue des vignettes de la table des matières

Élément valeur
1 Vignettes de la table des matières > conteneur
2 Vignettes de la table des matières > zone de vignettes
3 Vignettes de la table des matières > zone d’images
4 Vignettes de la table des matières > vignette
5 Vignettes de la table des matières > description

Rubrique

La rubrique est un conteneur d’espace réservé dans les vignettes de la table des matières si vous souhaitez ajouter du contenu supplémentaire. Parfois, vous souhaiterez peut-être désactiver la zone Vignettes de la table des matières et n’avoir que du contenu personnalisé. Pour afficher votre contenu dans la zone des rubriques, sélectionnez la rubrique HTML avec le contenu dans le champ Disposition > Page d'accueil du paramètre prédéfini de sortie. 

Rubrique
Afficher le contenu dans la rubrique

Pied de page

Pour afficher le pied de page sur la page d’accueil, vous devez sélectionner une rubrique HTML avec le contenu du pied de page. Spécifiez le sujet dans le champ Disposition Contenu du pied de page du paramètre prédéfini de sortie.

Page de rubrique

La page de rubrique comporte trois zones : en-tête, corps et pied de page. La zone d’en-tête contient un logo, un titre, des liens de niveau supérieur et une zone de recherche. La zone du corps a des sections gauche, centrale et droite. La section de gauche contient des panneaux Table des matières, Index et Glossaire. La section médiane comporte un panneau de barre d’outils et la zone de contenu de la rubrique. La section de droite comporte des panneaux Tables des matières de rubrique, Favoris et Filtres dynamiques.

Remarque :

La disposition des différents habillages n’est pas la même. Les images de cette documentation utilisent l’habillage orange. Vous les trouverez également pertinents pour les autres habillages. De même, les vues sur ordinateur de bureau et sur mobile diffèrent. Ce document est destiné à la vue sur ordinateur de bureau.

En-tête

L’en-tête comporte différentes sections.Vous pouvez contrôler les styles et la disposition à l’aide des classes respectives. Par exemple, pour augmenter la hauteur, modifiez le champ Page de rubrique > En-tête > conteneur > DISPOSITION > Hauteur.

hauteur de l’en-tête
Affichage pour définir la hauteur de l’en-tête

Sections d’en-tête
Afficher les sections d’en-tête

Élément Valeur
1 En-tête > conteneur
2 En-tête > zone de logo
3 En-tête > logo
4 En-tête > titre
5 Liens d’en-tête > conteneur
6 Liens d’en-tête > liste
7 Liens d’en-tête > élément
8 Liens d’en-tête > icon-000N
9 Zone de recherche > recherche
10 Zone de recherche > icône de recherche

Logo

Pour définir un logo, naviguez dans le champ Page de rubrique > En-tête > logo > ARRIÈRE-PLAN > Chemin de l’image.

Logo
Pour définir un logo

Cliquez sur le bouton Parcourir pour sélectionner l’image du logo. Une copie de l’image est créée dans le dossier d’habillage si vous sélectionnez l’image de l’extérieur. Utilisez les champs Hauteur et Largeur pour modifier la dimension de l’image. 

Remarque :

Pour les pages d’accueil et de rubrique, le logo doit être spécifié séparément. Vérifiez également si le logo est affiché de manière appropriée dans la vue mobile. 

Titre

Le texte du titre provient du champ Titre dans le paramètre prédéfini de sortie. Vous pouvez contrôler la dimension, la police, la taille du texte et d’autres attributs à partir de l’éditeur d’habillage. Sélectionnez Page de rubrique > En-tête > titre > POLICE pour définir la famille de polices, la taille de la police et d'autres propriétés. 

Champ Titre
Afficher le champ titre

Sélectionnez le groupe Page de rubrique En-tête > titre > DISPOSITION pour contrôler la largeur. Utilisez la marge ou la marge intérieure gauche pour gérer l’espacement du logo, et ainsi de suite.

Utilisez la section Disposition > Général pour définir la famille de polices et la couleur communes pour l’ensemble de l’habillage.

Remarque :

Prévisualisez dans la vue mobile pour voir si vous avez besoin d’un ajustement spécifique au mobile.

Liens d’en-tête

Les liens d’en-tête apparaissent sur le côté droit de l’en-tête. Lorsque vous créez un habillage, il n’y a pas de liens d’en-tête. Vous pouvez définir les liens à partir de la section Disposition Liens d'en-tête . Suivez les étapes suivantes.

  1. Cliquez sur le bouton Ajouter un lien pour créer des liens.

  2. Les liens sont créés en tant que Link1, Link2, ... LinkN. Vous pouvez réorganiser à l’aide de la poignée sur la gauche.

    Liens d’en-tête
    Afficher les liens d’en-tête

  3. Pour spécifier les détails d’un lien, sélectionnez-le dans la liste déroulante Sélectionner le lien.

  4. Dans la section GÉNÉRAL, définissez le titre, l’URL et l’info-bulle pour chaque lien.

  5. L’ID est automatiquement attribué par RoboHelp et est utilisé pour définir l’icône des liens. Vous verrez l’utilisation ci-dessous. 

Vous pouvez styliser n’importe quel lien dans l’onglet Page de rubrique. Voir la disposition des cases ci-dessus dans l’image d’en-tête. Utilisez l'élément Page de rubrique > Liens d'en-tête > pour styliser les liens comme la taille de la police, la couleur du texte, le style du texte, etc. Pour définir l’icône d’un lien, sélectionnez Page de rubrique > Liens d’en-tête > icon-000N et procédez comme suit. (Remarque : N représente le numéro d’icône défini à l’étape 5 ci-dessus)

Définir l’icône
Définir l’icône dans les liens d’en-tête

  1. Définissez la hauteur et la largeur à partir du groupe DISPOSITION.

  2. Sélectionnez une image d’arrière-plan dans le groupe ARRIÈRE-PLAN.

Remarque :

Dans la sortie mobile, ces liens apparaissent différemment. Sélectionnez une vue mobile en haut, puis définissez les éléments pertinents dans le groupe Liens d’en-tête. 

Recherche

La recherche comporte de nombreux composants et la structure est complexe. Vous pouvez modifier des parties courantes telles que la couleur de l’icône et la famille de polices à l’aide des paramètres de thème de l’onglet Disposition. Cependant, en voyant la capture d’écran suivante avec des étiquettes, vous pouvez personnaliser la plupart des composants.

composants de recherche
Afficher les composants de recherche

Élément Valeur
1 Zone de recherche > sélectionnée par la recherche
2 Zone de recherche > barre de recherche
3 Zone de recherche > icône de recherche
4 Zone de recherche > champ de texte de recherche
5 Zone de recherche > icône de suppression
6 Zone de recherche > boîte de prédictions
7 Zone de recherche >-élément de prédiction
8 Résultats de la recherche > boîte de résultats-externe
9 Résultats de la recherche > boîte interne de résultats
10 Résultats de la recherche > en-tête de résultats
11 Résultats de la recherche > fermeture des résultats
12 Résultats de la recherche > résultats-en-tête-libellé
13 Résultats de la recherche > élément de résultat
14 Résultats de la recherche > résultats-en-tête-titre
15 Résultats de la recherche > résumé de l’élément de résultat
16 Résultats de la recherche > résultat- élément-chemin d’accès
17 Résultats de la recherche > pied de page des résultats
18 Résultats de la recherche > paginateur
19 Résultats de la recherche > page précédente
20 Résultats de la recherche > paginateur-libellé
21 Résultats de la recherche > page suivante

Modifier l'en-tête et le pied de page

La fonctionnalité colle l’en-tête et le pied de page sur la sortie, même lors du défilement. L’en-tête ou le pied de page sera toujours visible à l’écran. Nous avons fourni deux interrupteurs à bascule sur les sections Page d’accueil et Page de rubrique dans l’éditeur d’habillage.

  1. Cliquez sur l’onglet Contenu. Dans le panneau de gauche sous Sortie, cliquez sur Habillages.

  2. Dans la liste des habillages, choisissez un habillage que vous souhaitez modifier.

  3. Ajoutez un nouvel habillage sans cadre en cliquant sur l’icône + dans Habillages.

  4. Choisissez un habillage et cliquez sur Terminé.

  5. Vous pouvez activer ou désactiver l’en-tête ou le pied de page statique à la fois pour les modèles de pages d’accueil et de rubrique.

    • Pour activer un pied de page statique pour la page d’accueil, sélectionnez Page d’accueil dans la Disposition. Cliquez pour activer le bouton bascule pour Pied de page statique.
    • Pour activer un en-tête statique et un pied de page statique pour la page Rubrique, sélectionnez Page de rubrique sous Disposition. Cliquez pour activer le bouton bascule pour En-tête statique et Pied de page statique.

    Habillage existant

    Les options En-tête statique et Pied de page statique sont désactivées par défaut pour un habillage existant. Vous pouvez activer l’option en suivant les étapes ci-dessus.

    Nouvel habillage

    Par défaut, l’en-tête statique est activé et le pied de page statique est désactivé.

Corps

Le corps se trouve dans la partie centrale de la page de rubrique. Le corps comporte quatre parties : barre d’outils, panneau de gauche, zone de contenu de rubrique et panneau de droite.

Barre d’outils

Chaque habillage a des boutons de barre d’outils pour différentes actions de l’utilisateur. Vous trouverez la liste dans la section Page de rubrique > Boutons. Vous pouvez les renommer, les réorganiser et les supprimer de la liste. Cliquez sur Ajouter un bouton pour en ajouter un nouveau. Pour définir les propriétés d’un bouton, sélectionnez-le dans la liste déroulante Sélectionner le bouton. Vous pouvez spécifier les propriétés suivantes.

  • ID : l’ID est généré automatiquement pour donner une valeur unique à n’importe quel bouton.La section Page de rubrique > Boutons utilise cet ID pour modifier les paramètres d’un bouton particulier.
  • Titre : le titre s’affiche sous la forme de l’info-bulle du bouton. Le bouton affiche uniquement l’icône. Utilisez l’option Disposition > Page de rubrique > Nom du bouton pour afficher le nom sur les boutons. La valeur du nom du bouton est identique au titre.
  • Basculer le titre d’état : si un bouton quelconque change l'état, alors vous pouvez fournir un titre différent pour l'état basculé. Par exemple, le bouton Développer/Réduire Tout .
  • URL : spécifiez l’URL que vous souhaitez déclencher en cliquant sur un bouton. Il peut s’agir d’un sujet local, d’un lien Web ou d’un lien par courrier électronique.
  • JavaScript : les utilisateurs avancés peuvent fournir leur nom de fonction JavaScript pour différents états du bouton. Les fichiers JavaScript personnalisés peuvent être attachés à l'habillage à partir de la section Disposition> Ressources de l'utilisateur.

L’image suivante illustre toutes les classes de la barre d’outils. 

Barre d’outils
Vue barre d’outils

Élément Valeur
1 Barre d’outils > zone boîte à outils
2 Barre d’outils > panneau-masquer
3 Barre d’outils > panneau-afficher
4 Boutons > bouton-0
5 Boutons > icône de bouton

Partager sur les réseaux sociaux

Le bouton Partager de la barre d’outils affiche la liste des options à partager lorsque vous cliquez dessus. Chaque habillage dispose d’une liste prédéfinie d’options de partage. Utilisez la section Disposition > Options de partage pour personnaliser la liste. Cliquez sur le bouton Ajouter une option de partage pour ajouter une nouvelle option.

Options de partage
Afficher les options de partage

Sélectionnez l’option dans la liste déroulante Sélectionner l’option à modifier. Procédez comme suit pour la personnalisation :

  • ID : généré automatiquement pour donner un identifiant unique à n’importe quel bouton. Il est utilisé lors de la modification des paramètres dans la section Page de rubrique>Boutons de partage
  • Titre : définit l’étiquette du bouton.
  • URL : le lien qui sera déclenché en cliquant sur le bouton. Les fournisseurs de services ont des URL fixes pour les boutons de médias sociaux.
  • Info-bulle : définit l’info-bulle du bouton.

L’image suivante illustre toutes les classes du widget de partage. 

widget de partage
Affichage du widget de partage

Élément Valeur
1 Boutons de partage > conteneur
2 Liste des boutons > partager
3 Boutons de partage > bouton
4 Boutons de partage > icône de bouton

Panneaux de gauche

Sur le côté gauche, il y a les panneaux Table des matières, Index et Glossaire. Le panneau Contenu est obligatoire ; L’index et le glossaire sont facultatifs. Vous pouvez activer et désactiver les panneaux Index et Glossaire à partir de la section Disposition > Page de rubrique. Vous pouvez également contrôler le panneau qui apparaît en premier pour l’utilisateur. Si vous ne sélectionnez pas le contenu Index et Glossaire dans le paramètre prédéfini de sortie, le panneau correspondant ne s’affichera pas.

Les noms des onglets du panneau proviennent de Libellés. Accédez à l’onglet Sortie de l’application et ouvrez le panneau Libellés dans la barre d’outils de gauche. Sélectionnez ou créez un fichier de libellés pour la langue requise. Lorsque vous ouvrez le fichier pour le modifier, consultez l’onglet Sans cadre pour rechercher toutes les chaînes pertinentes pour la sortie.

L’image suivante illustre toutes les classes de style du panneau Table des matières.

Panneau de table des matières
Afficher le style du panneau Table des matières

Élément Classe
1 Panneau de gauche > conteneur
2 Panneau de gauche > liste d’onglets
3 Onglet > panneau de gauche
4 Panneau de gauche > onglet sélectionné
5 Panneau de gauche > table des matières
6 Panneau de gauche > titre-niveau-0
7 Panneau de gauche > icône de réduction
8 Panneau de gauche >-titre sélectionné
9 Panneau de gauche > icône sélectionnée
10 Panneau de gauche > icône de développement
11 Panneau de gauche > icône de rubrique

L’image suivante illustre toutes les classes de style du panneau Index. 

Panneau Index
Afficher le style du panneau d’index

Élément Classe
1 Index > boîte de recherche 
2 Index > champ de texte
3 Index > mot-clé-niveau-0
4 Index >-clé sélectionné

L’image suivante illustre toutes les classes de style du panneau Glossaire.

Panneau Glossaire
Afficher le style du panneau Glossaire

Élément Classe
1 Glossaire > icône de recherche-supprimer
2 Glossaire > glossaire
3 Glossaire > définition 

Rubrique

Le sujet comporte trois parties :

  • Le chemin de navigation est en haut.
  • Contenu de la rubrique au centre.
  • Parcourez la séquence en bas.

Utilisez une feuille de style pour styliser le contenu de la rubrique. Vous pouvez utiliser masterpage pour remplacer la feuille de style au moment de la génération de la sortie.

Le chemin de navigation en haut affiche la hiérarchie de la rubrique en cours selon la liste des matières. Au début, il peut avoir un libellé, qui peut fonctionner comme le lien pour aller à la rubrique par défaut. Le texte de ce libellé provient du champ Sortie > Libellés > (fichier de langue) > SANS CADRE Début du chemin de navigation dans le fichier de libellé spécifique à la langue. Utilisez la case à cocher Disposition > Page de rubrique > Hyperlien vers l’accueil dans le chemin de navigation pour rendre le libellé statique ou non.

La plupart des habillages disposent d'une séquence de navigation en bas de l'écran. Utilisez l'option Disposition > Page de rubrique > Séquence de navigation dans le panneau droit pour la déplacer en bas du panneau de droite. Certains habillages le placent en haut.

L’image suivante illustre toutes les classes de style de la zone de rubrique.

Rubrique
Afficher le style de la zone de rubrique

Élément Classe
1 Chemin de navigation > conteneur
2 Chemin de navigation > libellé
3 Chemin de navigation > séparateur de chemin d’accès
4 Chemin de navigation > rubrique active
5 Panneau central > rubrique
6 Séquence de navigation > conteneur
7 Séquence de navigation > précédent
8 Séquence de navigation > zone suivante:après

Panneau de droite

Le panneau de droite contient diverses fonctionnalités telles que mini table des matières, favoris, filtre dynamique et options de partage. Il dispose également d’une barre d’outils avec des boutons et quelques boutons en bas. Vous avez le choix de masquer le panneau de droite. Utilisez le paramètre Disposition Page de rubrique > Panneau droit pour masquer le panneau. Ajoutez les boutons du panneau de droite à la barre d’outils principale au cas où vous voudriez masquer le panneau de droite.

Il y a trois boutons en haut et deux boutons en bas. Vous pouvez aussi opter pour une navigation par séquence de navigation avec les boutons en bas en utilisant l'option Disposition > Page de rubrique > Séquence de navigation dans le panneau droit. 

Boutons et mini-table des matières

La mini table des matières ou la table des matières de la rubrique s’affiche par défaut dans le panneau de droite. Utilisez le paramètreDisposition > Mini-table des matièrespour contrôler les niveaux de titre. L’image suivante illustre toutes les classes de style de la barre d’outils et de la mini-table des matières

Barre d’outils et mini-table des matières
Barre d’outils de style et mini-table des matières

Élément Classe
1 Panneau droit > conteneur
2 Panneau droit > bouton favoris
3 Panneau droit > bouton d’impression
4 Panneau droit > bouton de surbrillance-suppression
5 Mini table des matières > légende
6 Mini table des matières > élément sélectionné
7 Mini table des matières > élément
8 Panneau droit > bouton page haut
9 Panneau droit > bouton plein écran

Favoris

Vos utilisateurs peuvent marquer n’importe quelle rubrique comme favori et revisiter la liste plus tard. La liste s’affiche sur le côté droit lorsque l’utilisateur clique sur le bouton Favoris de la barre d’outils principale. Les utilisateurs peuvent supprimer n’importe quel favori en cliquant sur le bouton du crayon pour passer en mode édition, puis apporter les modifications. L’image suivante illustre toutes les classes de style du panneau Favoris.

Panneau des favoris
Panneau Styles favoris

Élément Classe
1 Favoris > libellé
2 Favoris > bouton d’édition
3 Favoris > bouton de fermeture
4 Favoris > élément
5 Favoris > bouton de suppression

Filtre de contenu dynamique

Les options de filtrage de contenu dynamique ne sont visibles que si un filtre est défini dans votre contenu. Vous le faites à partir du préréglage de sortie. La barre d’outils a un bouton pour afficher les options de filtrage qui apparaissent dans le panneau de droite. Les utilisateurs peuvent cliquer sur le même bouton pour le masquer. Les filtres sélectionnés apparaissent en haut au-dessus de la zone de rubrique.Le texte de filtrage provient de ce que vous avez spécifié dans le panneau Filtre de contenu dynamique. Le reste du texte provient de la section Sans cadre du fichier de libellés. 

L’image suivante illustre toutes les classes des filtres de contenu dynamiques.

Contenu dynamique
Afficher les filtres de contenu dynamique

Élément Classe
1 Filtres > légende
2 Filtres > libellé de groupe
3 Filtres > tout réinitialiser
4 Filtres > sélectionnés par filtre
5 Filtres > sélectionnés par filtre- supprimer

Pied de page

Vous pouvez définir le pied de page de la page d’accueil et des pages de rubrique comme n’importe quelle rubrique HTML.Spécifiez le fichier dans le champ Disposition > Contenu du pied de page du paramètre prédéfini de sortie. Vous pouvez donner un style à la boîte de la zone de pied de page en utilisant la classe Page de rubrique > Pied de page> Conteneur.

Boîte de dialogue d’acceptation des cookies

GDPR signifie Règlement général sur la protection des données. C’est le cœur de la législation européenne sur la protection de la vie privée numérique. Le RGPD et d’autres réglementations exigent l’acceptation explicite de l’utilisateur avant d’enregistrer dans le navigateur le stockage local ou les cookies. Utilisez le paramètre Disposition > Général > Conformité RGPD pour activer cette conformité. Une boîte de dialogue d’acceptation des cookies s’affiche pour la première fois à l’utilisateur. Il peut l’accepter ou la rejeter. Le texte par défaut fourni pour l’acceptation explique pourquoi il est nécessaire. Vous pouvez personnaliser le texte à partir des Libellés. L’image suivante illustre toutes les classes à styliser cette boîte de dialogue.

acceptation des cookies
Boîte de dialogue d’acceptation des cookies de style

Éléments Classe
1 Boîte de dialogue Cookies > navigateur-cookies-autorisés
2 Cookies Boîte de dialogue > autoriser-corps
3 Boîte de dialogue cookies > bouton de rejet
4 Cookies Boîte de dialogue > bouton d’acceptation

Édition avancée

L’éditeur d’habillage est suffisant pour personnaliser l’habillage dans la plupart des cas d’utilisation. Si vous êtes à l’aise et que vous souhaitez faire une utilisation plus avancée, voici quelques-uns des détails qui vous seront utiles.

  • Lorsque vous créez un habillage, peu de fichiers sont copiés dans le dossier du projet. Sélectionnez Afficher dans l’Explorateur en cliquant avec le bouton droit de la souris sur l’habillage pour ouvrir le dossier.
  • Les fichiers de modèle homepage.ejs et topicpage.ejs contiennent la disposition de la page. Vous pouvez modifier ces fichiers comme un fichier HTML. Lorsqu’Adobe publie une mise à jour, ces fichiers peuvent être écrasés.
  • Le fichier layoutDiff.css contient toutes les classes CSS pour modifier le style. Toutes les modifications apportées dans l’éditeur d’habillage y sont enregistrées. Vous pouvez apporter des modifications directement dans ce fichier, mais ne modifiez pas la structure du fichier. 

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?