Ecco un esempio pratico che ho creato per te:
Ecco l’HTML che ho inserito nella scheda After Header
<div id="category-general-banner" class="below-header-banner">
<h2>🚀 Ecco alcuni contenuti visualizzati solo nella categoria <strong>Generale</strong></h2>
</div>
<div id="category-site-feedback-banner" class="below-header-banner">
<h2>✨ Ecco alcuni contenuti visualizzati solo nella categoria <strong>Feedback sul sito</strong></h2>
</div>
Ecco l’SCSS che ho inserito nella scheda CSS (Discourse utilizza SCSS che estende le funzionalità CSS):
$category_classes: "general", "site-feedback";
.below-header-banner {
display: none;
}
@each $cat in $category_classes {
body.category-#{$cat} {
#category-#{$cat}-banner.below-header-banner {
display: block;
}
}
}
Ecco il risultato. Ogni banner appare solo nella sua rispettiva categoria.
Spero che questo ti sia d’aiuto!