Install this theme component
You can customize these banners with CSS. Each banner gets the tag name(s) appended as a class, for example:
The banner also works with tag intersections (e.g.,
In this case you’d target
.tag-banner-art.tag-banner-new-tag for CSS customization.
This theme component also comes with the setting to disable the banners for mobile (they’re enabled by default)
This is excellent! Shouldn’t it be in core (perhaps as a site option)?
Really excellent theme component! Is there any way to display banners for lists that are using both a category and tag simultaneously?
Not at the moment… at some point it probably does make sense to combine this tag component with the category banner component… then where the banners are shown can probably be handled in the theme settings if someone wants it one way or another.
I think I found a way. I will post a PR tonight probably if I manage to get it work.
Edit: Alright PR is ready
Fantastic! Thanks @radek3911!
This component is working really well with categories banners now Category (or subcategory) + tag will display both the category and tag banner. Really awesome, thanks @awesomerobot!
Have a suggestion for the tag banner. There is an Discourse option ‘force lowercase tags’ which is enabled by default. If it is disabled, then tags can have upper and lowercase characters. I’ve used custom CSS as a work around (text-transform: capitalize) for capitalising first characters in the tag banner where needed, but would be nice if this component supported uppercase as well (like the Discourse tag drop down filter does currently). E.g. ‘Mytag’ and ‘MyTag’ will both be displayed as ‘mytag’ in the banner currently (without custom CSS).
Edit: Just noticed I think there is an issue with the tag banner on mobile. The tag text gets pushed up to the top of the banner. I’ve attached a screenshot from the theme creator preview. The same thing happens on Discourse instances I’ve tested.
To fix the issue above with the tag getting pushed up to the top of the banner on slim screens, I recommend adding this CSS class by default:
If anyone wants to fix this immediately, you can add this to your custom CSS.
Now that tag descriptions are officially a thing, it would be nice to have the header show both the name and the description rather than just the name.
Yes, that would be really great!
Hmm. @sam do we have time to get this in? I agree the description should show for the tag… but I’m thinking of core, so maybe doesn’t apply to this theme component.
I think this is actually not caused by the component, but by the way tags are resolved from other ux elements in Discourse. I have upper-case tags on a site:
When I select the tag from the topic list item above, it directs me to /tag/tips. And then the banner shows “tips”.
But when I navigate to to /tag/Tips, the banner shows “Tips”.
Hmm yeah, it’s been a while, but if I recall correctly the issue was that the tag banner wouldn’t capitalise the tag like the rest of the UI. The tag url would stay lowercase, but that is expected and ideal imo.
I’ve just made an update that adds tag descriptions here. Let me know if you encounter any issues with the new feature!
I also fixed some misalignment on mobile.
Saw this on two instances: the banner doesn’t show when a tag uses hyphens and remove tag hyphen is enabled.
The remove tag hyphen is nice, but can you also add an option for underscores?
This probably does the trick:
But can’t test it out yet, because the same bug is present as with the hyphen option. When enabled, the tag banner disappears.
Is anyone else having an issue with
remove tag hyphen? For me the tag banner disappears when I turn this option on.
Once the plugin works again, I’ll submit a PR for the underscore replacement. But I’m also considering to add an option to capitalize the first letter of a tag. So e.g. #open_source would become “Open source” in the banner. I could also add another option to capitalize every word, e.g. “Open Source”. But before doing that I need a working base to be able to test these changes. Hopefully it can be fixed soon.
Hello, is it possible to modify this theme so that it also shows the banner once you enter a topic that has the tag? Would it be an easy addition?
I am trying to modify this theme to include a featured topic in the banner. I need to obtain the topic_id to generate the necessary url, but I only have access to the external_id of the topic (external_id is derived from a value in the description so I already have access to the external_id).
The ideal output is as follows and it essentially let’s us pin a topic to a tag page.: