Conditional text coloring based on tag

#1

I have a template tiddler to format text, I’d like it to color the text depending if a given tag is present in the tiddler calling the template. Here’s the non-functional snippet I’ve been hacking :thinking:, can anyone help get it working?

<$set clr="[ [<currentTiddler>tag[positive]then[green]]
   ~[<currentTiddler>tag[negative]then[red]]
   ~[[black]]">
 <p style="font-size:125%; color:clr;">
  <!-- Here '!!description' refers to the calling tiddler's textual description field! -->
  {{!!description}}
  </p>
</$set>
#2

Try this:

<$let clr={{{ [<currentTiddler>tag[positive]then[green]]
   ~[<currentTiddler>tag[negative]then[red]] ~[[black]] }}}>
<p style="font-size:125%;" style.color=<<clr>>>
  {{!!description}}
</p>
</$let>

Notes:

  • Your filter syntax has an extra unmatched opening [ at the start which should be removed so that your filter consists of three separate “filter runs”, each of which is a complete filter syntax on their own, with properly matched square brackets.
  • The $set widget uses parameters name=... and value=... (or filter=...). Thus, you could write:
<$set name="clr" filter="[<currentTiddler>tag[positive]then[green]]
   ~[<currentTiddler>tag[negative]then[red]] ~[[black]]">
  • However, since the filter will always result in a single value, you can use the less-verbose $let widget, combined with a “filtered transclusion” syntax (tripled curly braces), as shown above.
  • Your style="..." syntax is enclosed in double-quotes, which means the value specified is literal text, and no variable substitution is performed.
  • To insert a value from the clr variable, you can either construct the entire style text using filtered transclusion, like this:
<p style={{{ [[font-size:125%; color:]addsuffix<clr>addsuffix[;]] }}}>
or
<p style={{{ [[font-size:125%; color:]] [<clr>] [[;]] +[join[]] }}}>

or, you can use style="font-size:125%" to set the font size using a literal text value, and a separate style.attributename=<<variable>> syntax (i.e., style.color=<<clr>>) to assign the clr value directly to the color CSS attribute, as shown above.

enjoy,
-e

3 Likes
#3

Masterful. Thanks so much. :smiley: