Is there a plugin to customize the colors and icons for tags with different labels?

[Oneechan69]

I did some googling and found the colorful tag plugin but I don’t know how or if I can use the plugin to do that. I’d rather not write CSS for it, especially to use different icons, a plugin would be more convenient.

[holroy]

I approached this request with the opposite proposal of is it even possible to style the tag element within the body of the text? So I checked with a test paragraph of #two #random tags, and in live preview they produce:

Live preview

<div class="cm-active cm-line">
  <span class="cm-formatting cm-formatting-hashtag cm-hashtag cm-hashtag-begin cm-meta cm-tag-two">#</span>
  <span class="cm-hashtag cm-hashtag-end cm-meta cm-tag-two">two</span> 
<span class="cm-formatting cm-formatting-hashtag cm-hashtag cm-hashtag-begin cm-meta cm-tag-random">#</span>
  <span class="cm-hashtag cm-hashtag-end cm-meta cm-tag-random">random</span>
  tags
</div>

Reading

<div class="tag-two tag-random el-p" data-tag-name="p">
  <p>
    <a href="#two" class="tag" target="_blank" rel="noopener">#two</a> 
    <a href="#random" class="tag" target="_blank" rel="noopener">#random</a>
     tags
  </p>
</div>

What we can see from this is that you can indeed style the two variants using CSS, but there are some slight variations:

• In live preview you can style (or hide) or replace the hashtag since it’s its own html element (using something like .cm-formatting-hashtag or .cm-hashtag-begin
• In both live preview and reading you can style the text of the tag, and address different tags using either .cm-tag-TAG-NAME or data[href="#TAG-NAME] (or similar)
• In Reading you can’t easily remove/replace the hashtag since it’s just part of the normal text. You could play around with over-writing the hashtag, but it gets sketchy very fast.

So if you want a plugin to do this, it needs to be a plugin which also is able to do some postprocessing. The Base Tag Renderer seems to offer some aid, but alas it seems to work in live preview only.

Regarding the Colorful tag it seems to be able to do this, for icons which you’re able to input using as text. This includes emojis, but not svg icons, unless some of the shortcut plugins works. (It doesn’t seem like the Icon shortcodes works at least)

In the image below I’ve styled the #two tag with a Icon shortcode and an emoji, and as can be seen only the emoji is shown:

How to do this using Colorful tag

The trick to doing this using Colorful tag is simple (but a little deceiving). You need to go into its setting page, and hit the Add button on the top of the page, which adds a section below the three default sections.

See the one section with just the # displaying? Expand this and you can start customising that particular tag, like shown in this image for the example above:

Repeat this process for any tag you want to customise, and don’t forget to enable the customisation in upper right. When enabled the title of this section will show the customised tag, or when disabled it’ll just show the #two variant (unless you’ve done some global changes as well).

[holroy]

@holroy

The trick to doing this using Colorful tag is simple (but a little deceiving). …

I tried expanding upon this related to some of my nested tags, #P/JohnDoe and #SO/SomePlaceOrOrganisation. It turns out that it makes it hard (if not impossible without disabling the plugin) to edit the tags, so that’s a show stopper for me. And the deceiving part of the option parts it presents is just more and more present.

I tried styling this line with tags:

#P  - #P/JohnDoe, - #SO - #SO/SomePlaceOrOrganisation 

And in some cases I got it to add the emojis as the front (and replace the #P/ or #SO/ part. In other cases it removed the entire tag, also from source mode, rendering nothing. Further more it was glitchy as too doing its thing in reading view or not. Finally it seems like the global settings enabled or not, does affect the outcome of other settings.

One iteration of my settings provided this image:

(Where it’s adding a global suffix of SS, even though it is disabled. None of the remove options was possible to add without too much being removed.)

All in all, I’m going to uninstall this plugin for now, and rather rely on simpler and more reliable syntax within CSS to do most of my styling there.

Hopefully, this is just me being ignorant on how to set this up correctly, but so far I’ve found this plugin to be glitchy at best, and doesn’t provide what I feel it promises. Kind of sad, for the promises are very promising…