[tw5] Re: Is it possible to apply conditional styling to links?

[TW Tones]

Great, Thanks for Sharing Brian TiddlyWiki Spinner.

Tones
On Monday, 9 August 2021 at 10:58:49 UTC+10 Brian Radspinner wrote:

> 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[#]]">
>
>a.tc-tiddlylink[href^="{{{ [] }}}"]::after { 
> content:"\2B50"; }
>
> 
>
> 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. 
> [image: CrazyLinkFlagging_TW.jpg]
>
>
> TiddlyWiki and current CSS standards continuing to blow my mind
>
>
>
> On Sunday, August 1, 2021 at 6:06:38 PM UTC-7 TW Tones wrote:
>
>> 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
>>
>>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/cdb03318-7747-43cb-a831-8a608e971560n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/e1282db0-ed5e-4872-94e7-60dc1153cdc1n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[Si]

Thank you Eric and Mat! Exactly what I needed.

On Sunday, 1 August 2021 at 16:05:00 UTC+1 Mat wrote:

> @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 ... 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
>
> <:-)
>
> On Sunday, August 1, 2021 at 1:20:29 PM UTC+2 Eric Shulman wrote:
>
>> 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 
>>> ..., not ...
>>>
>>
>> Nope.  The code I supplied *goes in a tiddler tagged with 
>> $:/tags/Stylesheet*.
>>
>> Thus, it *should not have ... tags*, and the 
>> ... is merely so that
>> when you view the stylesheet tiddler, the CSS rules will be displayed on 
>> separate lines
>> for better readability.
>>
>> -e
>>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/bb7be716-d2db-43c4-bda7-11c210b051c8n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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 ... 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

<:-)

On Sunday, August 1, 2021 at 1:20:29 PM UTC+2 Eric Shulman wrote:

> 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 
>> ..., not ...
>>
>
> Nope.  The code I supplied *goes in a tiddler tagged with 
> $:/tags/Stylesheet*.
>
> Thus, it *should not have ... tags*, and the 
> ... is merely so that
> when you view the stylesheet tiddler, the CSS rules will be displayed on 
> separate lines
> for better readability.
>
> -e
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/a90172b3-8649-478e-ab4f-0c2837ba0294n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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 
> ..., not ...
>

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

Thus, it *should not have ... tags*, and the ... 
is merely so that
when you view the stylesheet tiddler, the CSS rules will be displayed on 
separate lines
for better readability.

-e

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/562dba3d-0c49-441d-a216-589bcf52db1fn%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[Mat]

I think there's a typo in Erics neat solution, i.e it should be 
..., not ...

 <:-)

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/bdacb478-90a2-461a-b8e1-06333b1a6c39n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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]]">
   
   a.tc-tiddlylink[href$="{{{ [encodeuri[]] }}}"] { 
color:{{{ [get[linkcolor]] }}}; }
   


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

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/7e11ea22-9ad1-4b29-ab30-8b37322e5503n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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]]">
   
   [data-tiddler-title^="<>"] .tc-tiddler-body 
.tc-tiddlylink { color:{{{ [get[linkcolor]] }}}; }
   

 
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 ... is not required, but simply puts the results for each 
matching tiddler on a separate line for easier reading

enjoy,
-e

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/2567291c-00f0-496c-93f7-a6649b8d7d2an%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[Mat]

Maybe http://linkstyle.tiddlyspot.com/

<:-)

On Sunday, August 1, 2021 at 12:37:39 AM UTC+2 Si wrote:

> 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.
> On Saturday, 31 July 2021 at 22:42:30 UTC+1 Brian Radspinner wrote:
>
>> I believe this ooktech demo 
>>  has an option for 
>> what you want. It uses macros which would hide them from link/backlink lists
>>
>> 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 
>>> ?
>>>
>>>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/f66e1c99-37b2-49ff-bae7-38b238127748n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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.
On Saturday, 31 July 2021 at 22:42:30 UTC+1 Brian Radspinner wrote:

> I believe this ooktech demo 
>  has an option for 
> what you want. It uses macros which would hide them from link/backlink lists
>
> 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 
>> ?
>>
>>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/1cfa9b9a-531f-41b5-8e6d-eaea96accca7n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[amreus]

AH I read your question wrong. 

You want every link TO a tiddler to be styled.  I still think it's possible 
even though I don't know css selectors well enough do it. 

the css might be something like:

a[title="Your Title"] { color: purple;}


On Saturday, July 31, 2021 at 3:50:43 PM UTC-4 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 
> ?
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/1a3c3a8b-06b6-4d52-9b7f-495ea38cbed3n%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[amreus]

It's possible using a stylesheet and css attribute selectors.

See this TiddlyWiki page 
for the 
explanation.

Look here 
for
 
a simple example.

 

On Saturday, July 31, 2021 at 3:50:43 PM UTC-4 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 
> ?
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/2724a8e0-0a30-4601-bb8b-07b2f655bdfen%40googlegroups.com.

[tw5] Re: Is it possible to apply conditional styling to links?

[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

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 
> ?
>
>

-- 
You received this message because you are subscribed to the Google Groups 
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/tiddlywiki/a3d01b09-629c-4302-a91e-cde00a451428n%40googlegroups.com.