Applicare uno stile personalizzato alle voci del sommario e al contenuto dell’argomento

Talvolta, potrebbe essere utile applicare uno stile personalizzato alle voci del sommario o a un particolare argomento. A tale scopo è possibile associare un attributo outputclass all'elemento <topicref> nella mappa DITA. Inoltre, nel caso in cui desideri applicare un formato personalizzato a un intero argomento, ciò può essere ottenuto anche estendendo la definizione di stile dell’attributo nel CSS.

Prendiamo ad esempio un nuovo argomento che si desidera inviare per la revisione. Per identificare facilmente l'argomento aggiornato, è necessario aggiungere un attributo outputclass all'elemento <topicref> nella mappa DITA e quindi definire uno stile personalizzato per lo stesso elemento nel CSS.

Nell'esempio seguente, all'argomento Cronologia dei voli è stato assegnato un attributo outputclass con il valore di new-topic.

La definizione di classe di new-topic in un CSS può consentire di definire lo stile per i seguenti elementi:

Vediamo come ciascuno di questi scenari può essere definito nel CSS. Nella seguente definizione CSS della classe new-topic, il colore del testo è stato modificato.

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

Questa definizione controlla il colore del testo nel sommario e il titolo dell'argomento. Nell'output PDF riportato di seguito viene illustrato il diverso colore applicato alla voce del sommario:

Anche il titolo dell'argomento viene formattato con lo stesso colore.

Se si desidera che la voce del sommario e il titolo dell'argomento abbiano stili diversi, è possibile definirli separatamente come illustrato di seguito:

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

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

Infine, puoi anche applicare stili all’intero contenuto all’interno dell’argomento. Per questo, devi aggiungere un suffisso "-content" al nome della classe. Nell'esempio seguente è stata aggiunta una barra di modifica all'intero contenuto dell'argomento:

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

Utilizzando gli attributi di stile di cui sopra, viene aggiunta una barra di modifica a sinistra dell'argomento Cronologia del volo, come illustrato di seguito: