Tag Style Tool

:information_source: Summary Tag Style Tool allows you to customize the appearance of tags.
:eyeglasses: Preview To be filled in
:hammer_and_wrench: Repository TagStyleTool on Github
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

About

TagStyleTool is an inspired version of (3) existing components to allow customizing the appearance of tags on Discourse!

v0.2
Added Visual Style Builder - Allows for icon searching, color picking, and category importing!

Features:

  • Solved compatibility issues (Specifically between the remove dashes, and tag icons)
  • Assign a Font Awesome icon to specific tags.
  • Added the option to apply a default tag icon to any tag not defined.
  • Inverted inheritance e.g. label or text color
  • Solves a contrast color issue with text color when using the label coloring setting.
  • Allowed the ability to choose between the existing tag styles.
  • Versatility of settings allowing disabling of default tag, or dashes feature.
  • Settings format is the same (with the addition of new settings) as Tag Icons allowing for portability/adoptability easily.

As of v0.2

  • Implement an option to apply to an entire category. (This has its drawbacks, I think it can be done, but requires extra maintenance)
  • Search the FontAwesome Database for the perfect icon!
  • Pick your favorite color from a visual color picker.

More to do:

  • Default Tag Color :sweat_smile: a what if scenario if you just want the color and not icon.
  • User Friendly fixes for settings

Other:

This is the first time I have published something to the public in a while. If you have issues let me know!

Inspiration (and in some cases formatting/settings etc) was directly adopted from these existing projects:
Remove Dashes from Tag Names
Tag Icons
Color Tag Style

Helpful Resources
These are both integrated into the component now
Font Awesome
HTML Color Picker

8 Likes

I’m going to be trying this! Thanks!! Had looked at a bunch of tag styling components and seemed fiddly to have to install multiple ones, so I’ll take yours for a spin next time I get around to working on my setup!

1 Like

Just tried quickly. Two “newbie” comments:

  • I get a bit lost in the FontAwesome stuff. Is it just the free ones? Which version? Is there a list of all the icons somewhere (or it is too long for that)?
  • color: how complicated would it be to provide a color picker, for people who aren’t fluent in RGB? :innocent:

But thanks already, this seems good!

Don’t worry about getting lost, happy to help any way I am able to, that is what Discourse is for after all right?

Font Awesome

The component should automatically support any Font Awesome icon from the current version that is in the current version of Discourse. I believe they currently support v6. Which you can locate all of here Font Awesome.

For the second part of the question, yes its free, there is a premium verison, but I am not sure how that works with Discourse since Font Awesome is already included with the core.

Color Picker

I can take a look and see if I can implement one, but since its a theme component, I am not sure how much I can do before it becomes necessary to be a plugin. You can use this helpful tool though, you click on the “Use HTML 5” area where the color is, and for this component, you want to use the hex color. HTML Color Picker

1 Like

Thanks! Actually, a link to those two ressources in the settings interface would already be super helpful!

1 Like

There is a native HTML component for picking colors nowadays

We also wrap it in a component for even easier use.

4 Likes

Thank you so much!

Chandler Bing Smiling in Friends

Well, I made some progress. I still need to do a few things to tidy it up before pushed, such as The insert logic doesn’t work (copy does), and the button is visible on the whole site, and most notably as you can see is on the bottom corner.

I also :eyes: figured out how to apply to all tags of a tag group.


colorpickdemo

3 Likes

That style builder would be a killer feature!

:smiley: I pushed it out, let me know if you have issues.

1 Like

The builder is pretty great! I managed to use it for a couple tags to start, and then when I hit the green check to save my settings, the Tag Style Builder disappeared.

If I refresh, the button appears for just a moment before disappearing again.

I’m also not able to get one of the icons (lock-keyhole, for example) to appear on the tag despite being suggested by the builder. I added it to the SVG icons list as well, saved, and still no joy.

This is so close to being a joy to use, thanks for the efforts. I’d love to see this permanently replace several other theme components for me.

1 Like

:sweat_smile: I did this all at 1-2AM, and published at 6am, so forgive me on the few hiccups.

  • I can reproduce the button disappearing, darn thing is stubborn. I managed to fix it, I think.
  • I suppose I forgot something about the Font Awesome Icons. You need to go to your sites settings, and go to the SVG Subset, and manually add it. If Discourse doesn’t already have it in use, it won’t render by default. Though, even doing this I still had an issue with it not rendering. I will look into this further.

This has been pushed out.

2 Likes

I wish it was.

So I had to delete the component and reinstall (both times) to get the builder button to show up to begin with.

With the latest version, I can get the button to persist through the initial setup of my tags. And I can get it to persist through a refresh. But going back into the component edit screen from Themes & Components, the button is missing again. Sneaky bugger.

I’ll play around with the icons part. Since there’s a way to turn off default icons, would there be a way to discard the tag icon for colored tags? Like if it matches the default icon set or something? The colored tags component was nice in not needing to set an icon, I enjoyed the clean look of it, and replicating that would be a useful feature to me.

2 Likes

:sweat_smile: It is def a pesky little thing.

I am trying a few things, I sent you my latest beta bundle, feel free to let me know if you have any issues with it, as that is the codebase I am working off.

It should fix some of these things. I added a todo list to fall back on overrides e.g. Tag1,Pencil,NoColor would just render Tag1,Pencil, <Color if default is used, True or false default used, otherwise, no color applied>.

This is great learning process for me! :joy:

1 Like