Utiliser les boîtes de contenu dans MadCap Flare : Créer des boîtes de contenu
Quand vous écrivez de la documentation, vous pourriez avoir envie de mettre en évidence certains éléments d’information avec des boîtes de contenu. Dans le premier article de cette série de deux, nous vous montrerons comment concevoir des boîtes de contenu avec le langage HTML et les feuilles de styles CSS dans MadCap Flare.
Selon le projet, vous pourriez avoir plusieurs types de boîtes de contenu contenant différents types d’information. En voici quelques exemples :
Dans cet exemple, les boîtes de contenu peuvent avoir jusqu’à quatre parties :
- Conteneur : La « boîte » de la boîte de contenu.
- Icône : Une image dans le coin supérieur gauche qui indique quel type d’information se trouve dans la boîte. Certaines boîtes de contenu n’utilisent pas d’icône.
- Titre : Un mot indiquant quel type d’information se trouve dans la boîte. Les titres courants comprennent Avis et Danger. Certaines boîtes de contenu n’utilisent pas de titre.
- Contenu : Le contenu de la boîte. Il s’agit généralement de texte standard, mais il peut aussi inclure des listes et des images.
Toutes les boîtes ont un conteneur et du contenu. Une boîte peut avoir une icône, un titre ou les deux.
Comprendre la programmation des boîtes de contenu
Pour créer une boîte de contenu, vous avez besoin des styles suivants :
- div.BoiteDeContenu : Le conteneur
- p.TitreDeBoiteDeContenu : L’icône et/ou le titre
- p.BoiteDeContenu : Le contenu
Remplacez « BoiteDeContenu » par le nom de la boîte (Danger, Avertissement, Note, etc.) pour obtenir le nom du sélecteur.
<div class="Danger">
<p class="DangerTitre"> </p>
<p class="Danger">
Décrit une situation où un danger immédiat va causer la mort
ou des blessures graves s'il n'est pas évité.
</p>
</div>
div.BoiteDeContenu
Ce sélecteur contrôle les propriétés suivantes du conteneur :
- hauteur minimum
- couleur d’arrière-plan
- couleur de la bordure
- rayon de la courbure
- remplissage (espace vide entre les bordures de la boîte et son contenu)
- marge (espace vide à l’extérieur de la boîte)
Il peut aussi contrôler les propriétés liées à son contenu, incluant :
- couleur du texte
- alignement du texte
div.Danger {
display: block;
text-align: left;
margin: 16px 0px;
padding: 12px 16px;
min-height: 32px;
background-color: #D70000;
color: #FFFFFF;
}
Les autres parties de la boîte de contenu sont contenues dans le div.
p.TitreDeBoiteDeContenu
Ce sélecteur contrôle les marges du haut et du bas, ainsi que le remplissage du haut et du bas pour le titre. En utilisant des pseudo-éléments, ce sélecteur contrôle aussi l’icône et le texte du titre.
p.DangerTitre {
margin-left: -1px;
margin-top: 0 !important;
margin-bottom: 0;
color: #FFFFFF;
}
Toutefois, sa principale fonction est d’appeler l’icône ou le titre en utilisant des pseudo-éléments.
Icônes Font Awesome
Font Awesome conçoit des icônes que vous pouvez utiliser gratuitement pour vos boîtes de contenu. Pour utiliser les icônes, téléchargez le paquet Free For Desktop de la version la plus récente du produit. Quand vous installez la police, cliquez sur Installer pour tous les utilisateurs pour vous assurer que les icônes s’affichent correctement dans les publications au format PDF. Les icônes de Font Awesome sont un meilleur choix que les images pour les boîtes de contenu parce qu’elles peuvent être redimensionnées sans que leur qualité soit affectée.
Utilisez la barre de recherche du site pour trouver des icônes. Quand vous avez choisi une icône, cliquez dessus et copiez la valeur Unicode dans le coin supérieur droit de la fenêtre contextuelle.
Pseudo-éléments ::before et ::after
En utilisant les pseudo-éléments ::before et ::after, vous pouvez faire apparaître certains éléments avant ou après un certain style. Pour les boîtes de contenu dans Flare, ils contiennent l’icône et le titre. En utilisant la propriété content, vous pouvez modifier l’icône ou le titre sélectionné.
p.DangerTitre::before {
content: "\f071";
font-size: 14px;
font-family: 'Font Awesome 6 Free Solid';
line-height: 20px;
border: none;
}
p.DangerTitre::after {
content: "DANGER";
font-family: 'Barlow Semibold';
font-size: 13px;
font-weight: 700;
line-height: 18px;
padding-left: 12px;
}
Dans le pseudo sélecteur ::before ci-dessus, la propriété content contient une barre oblique inverse et la valeur Unicode de l’icône Font Awesome que vous utilisez. Le pseudo-sélecteur ::after contient le texte du titre.
Quand vous utilisez p.TitreDeBoiteDeContenu, mettez une espace insécable ( ) entre les balises. Ici, ce sélecteur sert uniquement à appeler l’icône ou le titre – aucun texte ne va dans les balises. Ce qui se trouve dans les pseudo-sélecteurs ::before et ::after s’affichera.
<div class="Danger">
<p class="DangerTitre"> </p>
<p class="Danger">contenu</p>
</div>
Selon les parties incluses dans la boîte de contenu, placez-les comme suit dans les pseudo-éléments :
| Parties | Emplacement de l’icône |
Emplacement du titre |
| Icône et titre | ::before | ::after |
| Icône seulement |
::before | s. o. |
| Titre seulement |
s. o. | ::before |
p.BoiteDeContenu
Ce sélecteur contrôle l’espacement du texte, incluant l’indentation (remplissage de gauche).
Quand une boîte de contenu n’a pas de titre, vous pouvez utiliser un remplissage du haut négatif pour que le contenu soit à côté de l’icône plutôt qu’en-dessous. Cela signifie que la hauteur de la ligne de l’icône empiéterait sur le contenu.
Dans cet exemple, p.Tip a un remplissage du haut négatif, alors vous ne pouvez pas utiliser le style p.Tip pour les paragraphes suivants dans le div.Tip. Vous pouvez créer un autre sélecteur de paragraphe, p.Tip2, qui a le même remplissage de gauche, mais pas de remplissage du haut, de sorte qu’il fonctionnera pour les paragraphes subséquents de la même boîte de contenu.
C’est tout pour la partie 1! Dans la partie 2, nous vous donnerons quelques trucs et astuces pour utiliser les boîtes de contenu dans Flare.
