I put together a rough theme component for this so you don’t have to create a bunch of redundant markup to show/hide… This will pull the appropriate category name, description, and background/text colors when you’re on a category list page.
My JS is hacked up from a few different posts on Meta, so definitely please improve it if you can.
Put this in common/header
<script type="text/discourse-plugin" version="0.8">
const container = Discourse.__container__;
const { h } = require('virtual-dom');
api.createWidget('category-header-widget', {
tagName: 'span',
html(attrs, state) {
const path = window.location.pathname;
let category;
const controller = container.lookup('controller:navigation/category');
category = controller.get("category");
if(/^\/c\//.test(path)) {
$("body").addClass("category-header");
return h('div.category-title-header', {
"attributes" : {
"style" : "background-color: #" + category.color + "; color: #" + category.text_color + ";"
}
}, h('div.category-title-contents', [
h('h1', category.name),
h('p', category.description_text)
])
);
} else {
$("body").removeClass("category-header");
}
}
}),
api.decorateWidget('category-header-widget:after', helper => {
helper.widget.appEvents.on('page:changed', () => {
helper.widget.scheduleRerender();
});
});
</script>
<script type='text/x-handlebars' data-template-name='/connectors/below-site-header/category-header-widget'>
{{mount-widget widget="category-header-widget"}}
</script>
This is common/CSS
.category-title-header {
padding-top: 60px;
display: flex;
text-align: center;
width: 100%;
justify-content: center;
.category-title-contents {
max-width: 500px;
padding: 40px 0;
}
}
.category-header {
#main-outlet {
padding-top: 20px;
}
}
You can also target specific category headers with additional custom CSS by using this structure:
body.category-example {
.category-title-header {
background: url(example.jpg);
}
}
With some time this could definitely be improved to support tags & topic titles!
Update: Made some refinements and put this in a repo as a theme component