Discourse Tag Banners

When visiting a tag-filtered topic list, this theme component displays the tag name in a banner at the top of the page… (similar to the Discourse Category Banners component.)

:telescope: Preview on theme creator

:octopus: Github repo: https://github.com/discourse/discourse-tag-banners.git

:brain: How do I install a Theme or Theme Component?

Unlike categories, tags don’t get descriptions or custom colors so these banners don’t have as many options as the category banner variety.

But you can customize these banners with CSS. Each banner gets the tag name(s) appended as a class, for example:

.tag-banner-art {
  background: salmon;
  color: beige;
}

The banner also works with tag intersections (e.g., community.example.com/tags/intersection/art/new-tag)

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)

17 Likes

This is excellent! Shouldn’t it be in core (perhaps as a site option)?

1 Like

Related topic: Tag explanation - feature request

1 Like

It may show hashtags on banners.

#tag

I sense that there might be a workaround for the old problem of tag descriptions: how would I add some text below the tag name in the banner (similar to how the category description is shown in category banners)?

1 Like

Adding descriptions in some way would be great! I guess the plugin would have to handle that in settings, unless tag descriptions are on the discourse roadmap

1 Like

We do this with category descriptions and would love to do the same with tag-pages. For example, the Web Dev Teams will often need to access our Github, so adding:

Team Name
Tools: Github - Pictures of Happy Dogs - New Build Wireframe

Gives a smoother more productive experience