Is it possible to apply conditional styling to links?

[Si]

For example say I wanted every link to a tiddler with the tag "Purple" to appear purple.

Just wondering if this is possible without diving into something like $:/core/modules/widgets/link.js?

[Brian Radspinner]

I believe this ooktech demo has an option for what you want. It uses macros which would hide them from link/backlink lists

[Si]

Hi Brian, thanks for the reply. I appreciate that I was not clear about this in my post, but I'm actually trying to figure out if it is possible to apply the conditional styling to normal WikiText links, rather than by creating a custom macro.

[Mat]

Maybe http://linkstyle.tiddlyspot.com/

<:-)

[Eric Shulman]

On Saturday, July 31, 2021 at 12:50:43 PM UTC-7 Si wrote:

For example say I wanted every link to a tiddler with the tag "Purple" to appear purple.

Just wondering if this is possible without diving into something like $:/core/modules/widgets/link.js?

Put the following line of CSS into a tiddler tagged with $:/tags/Stylesheet:

[data-tags*="purple"] .tc-tiddler-body .tc-tiddlylink { color:purple; }

Alternatively, instead of using tags, you can use the value from a "linkcolor" field, like this:

<$list filter="[has[linkcolor]]">

   <div>

   [data-tiddler-title^="<<currentTiddler>>"] .tc-tiddler-body .tc-tiddlylink { color:{{{ [<currentTiddler>get[linkcolor]] }}}; }

   </div>

</$list>

 

Notes:

* The $list find each tiddler that has non-blank linkcolor field

* The CSS defines a "data-tiddler-title" rule for each matching tiddler, where the color attribute value is retrieved from that tiddler's "linkcolor" field

* The <div>...</div> is not required, but simply puts the results for each matching tiddler on a separate line for easier reading

enjoy,

-e

[Eric Shulman]

Oh no!  I misread your OP.  You want the custom link color applied for "every link TO a tiddler tagged with purple", but my solution is for "every link IN a tiddler tagged with purple"

Here's the solution for links TO a tiddler with a linkcolor field:

<$list filter="[has[linkcolor]]">

   <div>

   a.tc-tiddlylink[href$="{{{ [<currentTiddler>encodeuri[]] }}}"] { color:{{{ [<currentTiddler>get[linkcolor]] }}}; }

   </div>

</$list>

It defines a rule for each a.tc-tiddlylink element that has an "href" attribute value ending with the name of the matching tiddler.

Note that the matching tiddler's title has to be URI encoded (replacing spaces with %20)

enjoy,

-e

[Mat]

I think there's a typo in Erics neat solution, i.e it should be <style>...</style>, not <div>...</div>

 <:-)

[Eric Shulman]

On Sunday, August 1, 2021 at 3:43:24 AM UTC-7 Mat wrote:

I think there's a typo in Erics neat solution, i.e it should be <style>...</style>, not <div>...</div>

Nope.  The code I supplied goes in a tiddler tagged with $:/tags/Stylesheet.

Thus, it should not have <style>...</style> tags, and the <div>...</div> is merely so that

when you view the stylesheet tiddler, the CSS rules will be displayed on separate lines

for better readability.

-e

[Mat]

@Eric - Ah, OK. I have never considered the possibility to use html tags inside a stylesheet. Interesting.

BTW, would it be inappropriate to use the <style>...</style> inside a listwidget, i.e to generate listblocks not inside a full stylesheet? I have used this technique successfully but maybe there are some great costs that I'm not aware of (other than the usual objections to use styleblocks instead of stylesheets).

Thanx

<:-)

[Si]

Thank you Eric and Mat! Exactly what I needed.

[TW Tones]

Mat,

The key issue with using the style tags is when they are displaying they apply to the whole page. Unless the CSS you use there in is selective, it will impact anything on the page that the css can apply to. This can cause side effects. Especialy if conflicking styles are "visible"

I have used them inside lists and reveals quite successfully because it becomes conditional css, but best it defines a custom class you reference in the tiddler or use other strict css selectors eg target an particular html tag or ID  

Style blocks are great for design and testing.

Regards

Tones

[Brian Radspinner]

Woah,

I just realized that I can use this kind of thinking to flag tiddler titles in the Recent tab with unicode characters to make them stand out with editing the titles...

<$list filter="[prefix[Test ]first[]splitbefore[ ]encodeuri[]addprefix[#]]">
   <div>
   a.tc-tiddlylink[href^="{{{ [<currentTiddler>] }}}"]::after { content:"\2B50"; }
   </div>
</$list>

results in:

a.tc-tiddlylink[href^="#Test%20"]::after { content:"\2B50"; }

inside a stylesheet, which makes lists automatically add a gold star to tiddler titles starting with "Test ".

"Test 1", "Test 2", and "Test 3" can all be flagged with gold stars to draw attention to them, without actually putting the character in the tiddlers' titles.

TiddlyWiki and current CSS standards continuing to blow my mind

[TW Tones]

Great, Thanks for Sharing Brian TiddlyWiki Spinner.

Tones