How to change the color of a specific pill tag with a <<colour>> macro

#1

I’ve been playing with the <<colour>> macro for a while now, and I’m using it a lot to customize my tiddlywiki. But there’s only one thing I can’t do at the moment

I would like a specific tag (e.g.“interim”) to change color based on the selected palette, maybe to have the same color as the tiddler’s title. I tried simply putting a <<colour tiddler-title-foreground>> macro in the “color” field of the tiddler tag, but that didn’t work. I also tried to create a tiddler stylesheet to change the color of the pill tags of all the tiddlers tagged “interim”, but unfortunately I managed to change the color of all the tags contained in that tiddler and not just the one I wanted.

How can I make the color of a specific tag follow the palette?
<<colour>> macro as value of "color" field, or something similar
#2

Create a tiddler (e.g., “MyStyles”), tagged with $:/tags/Stylesheet, containing:

[data-tag-title="interim"] .tc-tag-label {
   background:<<colour tiddler-title-foreground>>;
}

Note that if you want to set the tag text color or fill color (for SVG images), then you need to use !important to override the TWCore, which assigns those attributes directly in the generated HTML for the tag display. Thus:

[data-tag-title="interim"] .tc-tag-label {
   background:<<colour tiddler-title-foreground>>;
   color:red !important;
   fill:blue !important; }

Note also that you can also make the CSS rule apply only for a specific tiddler, like this:

[data-tiddler-title="SomeTitle"] [data-tag-title="interim"] .tc-tag-label
   { background: <<colour tiddler-title-foreground>>; }

enjoy,
-e

3 Likes
#3

Thanks Eric, you gave me even more than I asked for, I’m grateful. Btw it works great!