Application d’un style personnalisé aux entrées de la table des matières et au contenu de la rubrique

Parfois, vous pouvez appliquer un style personnalisé aux entrées de la table des matières ou à une rubrique particulière. Pour ce faire, vous pouvez associer une outputclass avec l’attribut <topicref> dans votre mappage DITA. En outre, si vous souhaitez appliquer un format personnalisé à une rubrique entière, cela peut également être réalisé en étendant la définition de style de l’attribut dans le CSS.

Prenons un exemple d’une nouvelle rubrique que vous souhaitez envoyer pour révision. Pour identifier facilement la rubrique mise à jour, vous devez ajouter une outputclass à l’attribut <topicref> dans votre mappage DITA, puis définissez un style personnalisé pour le même dans le CSS.

Dans l’exemple suivant, la variable Histoire des vols une rubrique a été affectée à une outputclass avec la valeur de new-topic.

{width="500"}

La définition de classe de la variable new-topic dans une page CSS peut vous permettre de définir le style des éléments suivants :

Voyons comment chacun de ces scénarios peut être défini dans le CSS. Dans la définition CSS suivante de la variable new-topic , la couleur du texte a été modifiée.

…
.new-topic {
  color: #CC5309
}
…

Cette définition contrôle la couleur du texte dans la table des matières et le titre de la rubrique. La sortie de PDF suivante montre les différentes couleurs appliquées à l’entrée de la table des matières :

{width="500"}

Le titre de la rubrique est également stylisé avec la même couleur.

{width="500"}

Si vous souhaitez que l’entrée de la table des matières et le titre du sujet aient des styles différents, vous pouvez les définir séparément, comme illustré ci-dessous :

...
/*for styling TOC entry */
.new-topic {
  color: #CC3509
}

/* for styling topic's title */
.new-topic.title {
  color: #092ACC
}
...

Enfin, vous pouvez également appliquer des styles à l’ensemble du contenu de la rubrique. Pour ce faire, vous devez ajouter un suffixe "-content" au nom de la classe. Dans l’exemple suivant, une barre de modification a été ajoutée sur l’ensemble du contenu de la rubrique :

...
/* for styling the topic's content */
.new-topic-content {
  -ro-change-bar-color: #A609CC;
}
...

À l’aide des attributs de style ci-dessus, une barre de modification est ajoutée à gauche du Histoire du vol , comme illustré ci-dessous :

{width="500"}