Contitional coloring

HI ,

how can i display certain tiddlers in a list with the color red based of their field value , so in my case , tiddlers holding a date in the endd field that is greater than today

so the filter is

<$list filter="[tag[task]has:field[endd]sort[]]">

and the logic that i some how want to incorporate would be


{{{[{!!endd}compare:date:gt<now>then[yes]else[no]]}}}
{{{[<enddate>match[yes]then[????]]}}} <---- what do i do here, how do is say color the output red ?

I’m sure you could make tiddler-specific version. But here’s a solution that changes the style for ALL links to particular tiddlers, including in the sidebar (individually specified within a field, or based on filter condition in stylesheet, which is what you would want):

Follow up if you have questions!

1 Like

You can start with this and change as needed:

<ol>
<$let Today=<<now YYYY0MM0DD000000000>>>
<$list filter="[tag[task]sort[]]">
<li><$link><span style={{{ [<currentTiddler>get[endd]compare:date:gt<Today>then[color:#f00;]] }}}><$view field=title /></span></$link></li>
</$list>
</$let>
</ol>

Tested on TW.com and I got a list this
linkColor

3 Likes

@Springer Thanks’ springer , i am a bit struggling to find a usage guide or an example on the page, there are 2 tiddlers only on the demo page with not much information , any other place i can look ?

@brian , thank you , works perfectly

I’m glad you have your more direct solution. I do recommend LinkStyle, which is basically just a stylesheet to drag into your wiki. I’m traveling and replying by phone now, can check in tomorrow to show how I’d make it work for use-cases like yours.

Hello again! I’m back at a real computer.

The Linkstyle stylesheet is designed “out of the box” to decorate links to any tiddler that uses its special fields (linkstyle, style-before, style-after). It then applies the css specifications in those 3 fields to EACH occurrence of that link.

Once that one basic stylesheet is in place, you can apply styles based on list filters, which you specify in that same stylesheet tiddler.

Below I’ve copied the entire contents of @twMat’s original linkstyle stylesheet, PLUS (at bottom) the bit you’d need to get all links to future endd tiddlers to show up in red (I’ve also added a little penant-pointer before such links so you can see linkstyle-before in action.).

You could remove the middle section (which looks for the 3 fields and applies their style tweaks). But once you have this basic stylesheet handy, you may be tempted use those fields “on the fly” to make links to a certain key tiddler jump out everywhere (most usefully in the Recent sidebar list) by using one of those fields. Since color grabs my attention much better than text, I almost always have some Linkstyle going on in my TW5 projects. :slight_smile:

Make sure to put all of this in a tiddler tagged $:/tags/Stylesheet.

\define linkstyle()
<$set name="uri" value=<<makedatauri """$(tid)$""" "text/plain">> >
<$list variable="urititle" filter="""[<uri>removeprefix[data:text/plain,]]""">
<style>
a[href="#<<urititle>>"] { <<style>> }
.tc-sidebar-lists a[href="#<<urititle>>"] { <<style>> }
a[href="#<<urititle>>"]:before { <<style-before>> }
a[href="#<<urititle>>"]:after { <<style-after>> }
</style>
</$list>
</$set>
\end

<$list filter="""[has[linkstyle]] [has[linkstyle-before]] [has[linkstyle-after]]""">
<$vars tid={{!!title}}
            style={{!!linkstyle}}
            style-before={{!!linkstyle-before}}
            style-after={{!!linkstyle-after}}
>
<<linkstyle>>
</$vars>
</$list>

<$list filter="""[has[endd]] :filter[get[endd]compare:date:gt<today>]""">
<$vars tid={{!!title}}
            style="""color:red;"""
            style-before="""content:"►";"""
>
<<linkstyle>>
</$vars>
</$list>
4 Likes

@Springer This is amazing, thank you very much for the explanation and putting this together for me .

i actually wanted to have the styling in one tidddler , But, realizing how powerful this is , i ended up using the template to style other compononets globally in my wiki based .

so this was really helpful :slight_smile: thanks again

2 Likes