Tag Style Tool

Customization Theme component
1
:information_source: Summary Tag Style Tool allows you to customize the appearence 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!

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.

More to do:

  • Implement an option to apply to an entire category. (This has its drawbacks, I think it can be done, but requires extra maintenance)
  • 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

Font Awesome
HTML Color Picker

3 Likes
2

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
3

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!

4

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

image
image758×578 17.2 KB

1 Like
5

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

1 Like
6

There is a native HTML component for picking colors nowadays

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

3 Likes