Colored Tag Styles

[nolo (Manuel)]

	Summary	Assign tags to a set of pre-defined color styles
	Repository	Manuel Kostka / Discourse / Helpers / Tag Styles · GitLab
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Theme Settings

You can select tags from a dropdown-list for each color.

Site settings

The component is supposed to work with tag style box. For styles simple or bullet you’d need to add some custom declarations to adjust tags.

Customizing colors

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.

[Fma965]

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

[tmn (Tran Nhat)]

Simple but working perfect. Thank you.

[sunjam (james.network)]

• 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?

[nolo (Manuel)]

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

Add a data-tag-group attribute for tags

Right now tags have their name stored in the data attribute data-tag-name: [Screenshot from 2022-07-29 15-50-16] Could there also be an attribute data-tag-group? It would make it easy to style and distinguish tags from different groups on the ux. A use-case where I find this especially helpful is on setups that only use tags. Then you likely have some top-level tags and it makes navigation more intuitive when tags from that group stand out with a distinct look. I saw there was a request years…

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.

[45thj5ej]

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?

  $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.

[ogulcan1787]

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?

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

[huynhthai824 (Sora &\)]

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

@ogulcan1787

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.

me too

[Av8tion]

Hi, this component isn’t working with my instance. I’ve added in the tags to be certain colors in the admin menu for the component but they are all still grey. I haven’t tweaked the component’s code at all and am just trying to use it as provided. Pictures below for example:

[nolo (Manuel)]

I’m afraid I can’t reproduce. It works for me on 3.5.

In any case, I published an updated component to a new repo on GitLab. No functional changes, just some house-keeping and re-factoring. The old GitHub repo should still work, but if you install afresh, please use the new repo, it’s also listed on the Summary topic.

[Av8tion]

Yeah that new version of the component you linked doesn’t work for me either… the boxes are all still grey

[nolo (Manuel)]

Yes there’s no functional change. But the component works on a default new instance. Did you inspect elements?

[Av8tion]

I’m not a coding expert unfortunately… if a component doesn’t work plug-and-play I’m fairly sunk. I’ll just have to look for other options to get something like this to work.

[Ahmed26]

made all settings correctly, labels still grayed out

[nolo (Manuel)]

Thanks for the reports, I guess I found the issue… tags are case-sensitive now, but data-tag-name needs to be parsed a lower-case value. So it didn’t apply styles to upper-case tags.

Let me know if it works after updating the component @Ahmed26 @Av8tion

[Ahmed26]

works very well now thanks

[Av8tion]

Great work and excellent find! Thank you for the hard work in getting these to work for us!