Colored Tag Styles

Theme component
1

A simple theme component that let’s you assign tags to a set of pre-defined color styles.

You can select tags from a dropdown-list in the theme settings:

Screenshot from 2022-01-14 11-56-06
Screenshot from 2022-01-14 11-56-06648×578 18.5 KB

And they’ll show with the assigned style:

Screenshot from 2022-01-14 11-57-22
Screenshot from 2022-01-14 11-57-22734×147 6.13 KB

:point_right: I chose a simple interface over flexibility with the styles. So if you want to change the pre-defined colors, you’d have to fork the component and change the style declarations in it’s CSS file.
:hammer_and_wrench: Repository GitHub - nolosb/discourse-tag-styles
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes
22 Likes
2

Nice work, this only works if the tag style is set to BOX though

removing .box makes it work on simple, not sure if it breaks box or not though
image

3

Simple but working perfect. Thank you.

1 Like
4
  • Would it be possible to assign colors to Tag Groups rather than individual tags?
  • Would it be possible to customize available colors to follow color blind hex values?
3 Likes
5

Thanks for the suggestions!

On targeting tag groups: Right now tags only have a data attribute for their name and that’s what the component targets. I had posted a feature request for adding another attribute for their group a while ago, you can give it a like :wink:

On customizing colors: As of now you’d need to fork the component and hardcode other color values. If dropdown menus (to pick tags) would become available on the popup editors I guess I’ll re-factor the component with more customizable settings.

2 Likes
6

EDIT: Nevermind, I simply forgot to actually save the other “settings.yml” file, lol. Brain is fried.

Hi. When changing the code from the color yellow to purple, I get this error. All I did was simply swap any mention of “yellow” to “purple” and adjust the hex color value. Why?
hhhh

  $tags-purple: str-to-list("#{$purple}", "|");
  @each $tag in $tags-purple {
    .discourse-tag[data-tag-name="#{$tag}"] {
      color: #CCCCCC !important;
      background-color: #ae00d1;
      &:hover {
        color: #CCCCCC;
        background-color: #ae00d1;
      }
    }
  }

The first line here is line 8 that the error mentions.

1 Like
7

Hi thank you for component.
Not working with GitHub - discourse/discourse-remove-dashes-from-tag-names: Remove dashes (-) from tag names in the Topic List and on the Topic page.

Maybe you can bring an update? :pray:

It works when there is a single line tag, but it does not work when there is a double line.

Like single line tag : support
Double line : support-me

1 Like
8

Can we select color for all tag in Group Tag?
And not effect with my discourse!

me too