Hello forum,
how can system tags (all starting with $:/) be colorized - eg. background-color: red?
Thanks
Stefan
I think this is what you’re looking for.
https://tiddlywiki.com/#Cascades
In your tiddlywiki go to Control Panel > Info > Advanced > Cascades
Interesting question. Here is a step on the way:
title: apfelstrudel
tags: $:/tags/Stylesheet
type: (leave this empty)
text:
<$list filter="$:/tags/Stylesheet">
span[data-tag-title="{{!!title}}"] span {background-color:red;}
</$list>
So, this colours (only) the tag $:/tags/Stylesheet but if you exchange the filter for all the tags you want, then it should work.
The problem is that I don’t know how to identify the system tags. As you may know, a tag doesn’t necessarily have to be a tiddler so in some sense it is just a string. Maybe there is some kind of hard coded list in the system of system tags somewhere that is accessible… since they are system tags… but maybe not…
Hello @twMat,
yes this works:
<$list filter="$:/tags/Stylesheet">
changing to
<$list filter="[is[system]]">
will not work
Any ideas?
That’s exactly what I pointed out. [is[system]] refers to tiddlers, but tags are not necessarily tiddlers. I don’t know how to identify tags that are not tiddlers - which, at that, I suspect is the case for most system tag, i.e that they are not tiddlers.
This works:
<$list filter="[all[shadows+tiddlers]tags[]prefix[$:/]]">
span[data-tag-title="{{!!title}}"] span {background-color:red;}
</$list>
1 Like
You sure? Again, I would not think you catch non-tiddler tags with this. But maybe that is OK for your case.
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.
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
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.
1 Like
Thanks @PaulH, @twMat, @TW_Tones, @pmario and @TiddlyTweeter or all feedback and hints.
Greetings
Stefan
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.
1 Like
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
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:
This works for me:
span[data-tag-title^="$:/"] span.tc-tag-label {background-color:lightgray;}
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.
1 Like