Toolbar under site header per category

Dev
8

Here’s a practical example I made for you:

Here’s the HTML I put in the After Header tab

<div id="category-general-banner" class="below-header-banner">
    <h2>🚀 Here's some content only displayed on the <strong>General</strong> category</h2>
</div>

<div id="category-site-feedback-banner" class="below-header-banner">
    <h2>✨ Here's some content only displayed on the <strong>Site Feedback</strong> category</h2>
</div>

Here’s the SCSS I put in the CSS tab (Discourse uses SCSS which extends CSS features):

$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;
        }
    }
}

Here’s the result. Each banner appears only in its respective category.

image
image2497×1440 139 KB

Hope that helps further!

1 Like