Colorize system tags

[TW_Tones]

One one hand;

Of course it is important to understand that normally, to assign a color or icon to a tag you have to create the tag tiddler and update the color or icon field.

On the other hand when you are displaying tags such as in the view template or editor, the tiddlywiki “user Interface” UI code, is where the tag is displayed by default or if the tag tiddler exists, it looks inside the tag “tiddler” to retrieve such values.

• but tags do not need to have their own tiddlers.

You could modify the UI to use a default color if it is not available perhaps one for system, another non-system tags. If this had a config tiddler this may be a worthy addition to the core. Although the same with a cascade mechanism would be even more configurable.

If however you don’t have the time why not just create a tag tiddler for all system tags (that do not already have their own tiddler) and batch apply the colour to each “tag” tiddler you want? You could even create tiddlers for tags not yet in your wiki, because you had not used them yet, but may.

[pmario]

@StS

This works:

<$list filter="[all[shadows+tiddlers]tags[]prefix[$:/]]">
span[data-tag-title="{{!!title}}"] span {background-color:red;}
</$list>

Creating styles like this, should be the absolute last resort, because it can be a major performance hit if you have many tiddlers.

[TiddlyTitch]

@pmario

Creating styles like this, should be the absolute last resort, because it can be a major performance hit if you have many tiddlers.

Right, in principle.

But, TBH, I think it is also an empirical matter?
Meaning some use cases may be okay with it?

Side comment, TT

[pmario]

I think the best way to do that is to overwrite the tag-pill-style-macro using a list-widget that decides if a tiddler is a system tiddler. The easiest filter is [all[current]is[system]].

The main problem with a CSS hack is, that the tag macro uses a <contrastcolour macro that avoids to get a green forground on a green background tag pill.

See: https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Ftag

[StS]

Thanks @PaulH, @twMat, @TW_Tones, @pmario and @TiddlyTitch or all feedback and hints.

Greetings
Stefan

[Alvaro]

In the CSS selectors you have the simpliest way. Without using a list of tiddlers.

span[data-tag-title^="$:/"] span {background-color:red;}

Reference: Attribute selectors - CSS: Cascading Style Sheets | MDN

Then you need solve the problem with the palettes and the contrast.

[twMat]

@Alvaro

span[data-tag-title^="$:/"] span {background-color:red;}

Ah, but of course! Alvaro is right, this is a superior solution and I believe it also solves the problem when tags don’t have a tiddler.

It is much better also because it is a static style. The stylesheet should have its type field set to text/css

[twMat]

Such a good overall idea and solution that I proposed it for native TW here.

[StS]

@Alvaro

span[data-tag-title^="$:/"] span {background-color:red;}

Thanks @Alvaro.

My idea was, that this colorized tags are shown in the pulldown menu (adding a tag in a tiddler)
This doesn’t happens also not with this approach:

[Mohammad]

This works for me:

span[data-tag-title^="$:/"] span.tc-tag-label {background-color:lightgray;}

[twMat]

@StS

My idea was, that this colorized tags are shown in the pulldown menu (adding a tag in a tiddler)
This doesn’t happens also not with this approach:

@StS How do you produce that dropdown? Can you post a link or the code?

[Alvaro]

Ups… sorry. I changed the selector with check the html. I took code from a answer.

@Mohammad, Thanks for the fix.

The dropdown menu is created in different way that the tag pills. So the solution doesn’t work because there isn’t data-tag-title and the $:/ only appear in the text content.

[StS]

@twMat
It is the pulldown in each tiddler (done on https://tiddlywiki.com/)

[StS]

Hello @Mohammad,

tag is colorized but not in the “tag”-pulldown of the tiddler… (tested on https://tiddlywiki.com/)

[twMat]

OK, right, it does not work there. The tagpills seen in view mode is this

where you can see how there exists a data-tag-title attribute which is what the proposed solution uses and which can sense if the tag itself is prefixed with $:/ but in edit mode the tags in the dropdown have another structure like so

where it is not possible to use the same method to identify that it is prefixed such.

So, I’m afraid I don’t have any better idea

But I note that if tags are manually colored via the tag manager then they do properly show also in edit view and that dropdown. So there are ways to achieve it but probably at a deeper level than pure css.

[Mohammad]

@StS

how can system tags (all starting with $:/) be colorized - eg. background-color: red?

• If you have Commander, then it is a piece of cake!
• If not create a tiddler with below code on https://tiddlywiki.com/ and just click the button!

Please do not try on your own wiki except you take a backup before clicking
This is a destructive test!

<$button actions="""
<$list filter="[is[system]] :filter[tagging[]]">
<$action-setfield color="#ff0000"/>
</$list>
"""> Just do it</$button>

If you want to inject your customization into core tiddler, then do as below

<$button actions="""
<$list filter="[all[tiddlers+shadows]is[system]] :filter[tagging[]]">
<$action-setfield color="#ff0000"/>
</$list>
"""> Just do it</$button>

[Mohammad]

Yes, but @Alvaro explained the reason! See his post above!

[Mohammad]

Side note:

@Mohammad

<$button actions="""
<$list filter="[all[tiddlers+shadows]is[system]] :filter[tagging[]]">
<$action-setfield color="#ff0000"/>
</$list>
"""> Just do it</$button>

Testing on: TiddlyWiki — a non-linear personal web notebook

Before test, we have 9 overridden shadows

After test, we have 36 overridden shadows

This test did not destroy anything! But my own way is to keep shadow tiddlers specially the core tiddler intact (as much as I can)!

[StS]

Thanks to all (@Alvaro, @twMat and @Mohammad) – input much appreciated!

[TiddlyTitch]

This is a footnote to this thread which I found interesting!

We do have already the excellent inbuilt Tag Manager at: https://tiddlywiki.com/#%24%3A%2FTagManager that can set colours for non-system Tiddlers.

Can’t it just be liberated to be able to set colours for system Tiddlers too?

Just a comment
TT