Category Banners

I’ve just made an update to this component that makes it integrate with Tag Banners

When both components are installed and you’re filtered to a category and a tag, rather than stacking the banners, now the tag name will be shown within the category banner:


Thanks Kris, another great integration!

Few issues though:

  • it’s not working for me in mobile view (even on desktop browser—no web console errors)
    • category banner displays properly in both desktop and mobile view, but tag banner only displays in desktop view
  • when also using with Tag icons component
    • tags have generic tag icon and the icon defined by Tag icons (it would be better if only Tag icons defined icon was displayed in such cases)
    • when icon defined by Tag icons is the same color as Category banner the icon is rendered invisible (similar problem as Category banners + Category icons integration—if possible please allow the Tag icon to match the banner text color for this combo too)
    • Remove hyphens / underscores from Tag banners completely hides the icon defined in Tag icons

Thanks for the quick feedback!

I’ve added a fix for the tag not appearing in mobile view:

I’ve also added a setting to disable the tag icon for now, which is a temporary solution for working better with the tag icons component. I’ll have to spend a little more time getting a proper integration with the tag icons component working.


Thanks for a quick workaround, meanwhile I’ve got another one for you :wink::

when using Category banners together with Tag banners with Remove hyphens / underscores set to true, the tag name (eg. with-hyphens is displayed without hyphens under the title and hyperlinked but the link is invalid (/tag/with hyphens) and results in 404.


Oh another good one, thanks again!

This fix relies on a minor Discourse update: DEV: add optional `displayName` parameter for `discourse-tag` by awesomerobot · Pull Request #21391 · discourse/discourse · GitHub

So once Discourse and the component are updated, tags without hyphens or underscores will be linked correctly.


A post was split to a new topic: Is it possible to make the category banner appear like the default subcategory banners?

I’ve successfully added banners to some of my categories but can’t add them to others.

The categories it doesn’t work for have names like “Weather - General”, i.e. Space-Hyphen-Space in the middle of the name. If I change the name to “Weather-General”, i.e. no spaces around the hyphen the banner is displayed as expected. In both cases the slug for the category is the same - “weather-general” so I’m not sure why that’s not accepted as a valid value in one case but is in the other.

1 Like

Is it possible to align the banner in such a way so it would vertically be (always, whether sidebar on or off) in one line with – forgive a non-webdev’s lack of better/proper terminology – where the main content (not the sidebar) is, to the left, as oppose to the center as it is now, I think.
If it’s not possible or there is no straightforward way to do so - might I suggest to enhance this already neat tool that way? So that rest of us, of non-web people would be able to control that behaviour/parameter. Many thanks.

1 Like

May I suggest a quick mockup (even Paint® will do :stuck_out_tongue: ) so we can have a clearer idea of what you want to achieve?

1 Like

Before making a mock-up — bare in mind that a not-webdev is making these suggestions — what is missing here, in my mind, is the sense that the banner actually belongs to the category (as oppose to top-bar / header as it is).
So, in both views, with left side-bar & without it, the category banner aligns to the left of the main bit (main-outlet element?) and “travels” with it when browser window is resized, that… would give browsees true sense of it being the part of, belonging to the category.

My second suggestion would be to “enhance” the category banner with setting option to disable, to not use category colour

Does that make sense?

1 Like

Sorry, I do not understand this part. :confused:

Until it is decided if such a feature would make sense, I paste a SCSS that will do this in case someone needs it:

.category-title-header {
  background-color: transparent !important;
  color: var(--primary) !important;

1 Like

You are devel I presume - I said rubbish & there is no “<div id=“main-outlet”>” ? Inspect html source is all I can do.

cat banner align

Did try my best with the picture, sorry.
Or perhaps even better - ? - make it a part of that main-outlet, place it a the top, above “General | all tags | etc…”
Perhaps… as a dual-choice user option (as with colour), between ‘as-is-now’ & ‘inside that main-outlet element / align that way’. Thanks.

1 Like

So, for instance, putting it in the above-main-container outlet?

This way the sidebar wouldn’t be pushed down.

Something like this?


Spot on! Exactly what I mean - that is that true sense, given to browsees, of the banner belonging to the category. Again, perhaps as setting option to have that view/alignment when enabled VS as-is-now as the default.


Unless I’m missing something, this setting already exists:


Hi Kris,
I have put some links in the category banner descriptions, that worked okay, until the last core update on our staging. Since then these don’t work and show as plain text e.g.
Is it not possible to use links with the banners now?


Yesterday, they merged changes to improve the component, and it would seem that the ability to render HTML was removed. I’m unsure if it was intentional (for security reasons) or simply an overlook. :thinking:


I think this was unintentional, but will double-check and update!


I’d really appreciate if html is available again…

1 Like

if you update the component this should be fixed now