태그 스타일 도구

: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

10개의 좋아요

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개의 좋아요

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개의 좋아요

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

1개의 좋아요

There is a native HTML component for picking colors nowadays

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

5개의 좋아요

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

4개의 좋아요

That style builder would be a killer feature!

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

3개의 좋아요

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.

2개의 좋아요

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

3개의 좋아요

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개의 좋아요

: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:

2개의 좋아요

안녕하세요! 다시 돌아왔는데, Tag Style Builder가 어디에 있는지 아무리 찾아도 모르겠어요?

테마 구성 요소 설정에서 Tag icon list 위쪽에 표시되어야 합니다.

TC가 /customize/components/와 같은 관리자 URL을 찾지만, discourse가 이제 /customize/themes/로 리다이렉트하기 때문에 작동하지 않습니다.

이 문제가 수정될 때까지, 기존 경로는 여전히 작동하며 URL에서 themescomponents로 직접 교체할 수 있습니다:

다음에서:
image
다음으로:
image

그런 다음, 버튼이 나타납니다:

1개의 좋아요

원하시면 PR을 제출해 주세요. 지난 한 달 정도 꽤 바빴지만, 이번 주말에 수정할 수 있습니다. 알려주셔서 감사합니다! PR을 직접 하기가 부담스러우시면, 알려주신 덕분에 더 빠르게 수정할 수 있습니다!

1개의 좋아요

간단한 PR을 하나 올립니다: Add support for /admin/customize/themes/ route - Pull Request #1 - jdc20181/TagStyleTool - GitHub

2개의 좋아요

@stephtara 이 내용을 병합했으니 업데이트해 주세요. 이제 올바른 페이지에 표시됩니다.

2개의 좋아요