Link Style: Use Color and Icon for Links

1

If a tiddler has color and icon, then they will be shown in tag pill. I am looking for a simple stylesheet to show links to such tiddler using the color and icon if they are existed, so

  • if a tiddler has color field, that color will be used as color link (text color)
  • if a tiddler has icon field, that field will be used as icon in front of link

Links can be displayed everywhere: in tiddler text, in sidebar, …

What solution do you propose? Please note to not overwrite the core tiddlers.

2

I’m afraid I don’t have the time to look closer at this right now, but I’d think you can get something from looking at https://linkstyle.tiddlyspot.com/

3

Wow! Thank you @twMat
This is what exactly I was looking for!

4

This is a nifty solution form @telumire It allows to use icon with external links!

https://demos.tiddlyhost.com/#External%20links%20icon%2FDemo

Thank you @telumire

5

You’re welcome ! Note that my solution is intentionally aimed for svg icon for external links but it can also be used for internal links with some tweaking, let me know if you need help with that :slight_smile:

6

Thank you!

What is the minimum change if one wants to use this solution for Wikitext links?

7

If you look at: https://tiddlywiki.com/#%24%3A%2Fcore%2Fmacros%2Ftag

<$macrocall $name="tag-pill-body" 
 tag=<<__tag__>> 
 icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}} 
 colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
 palette={{$:/palette}} element-tag="""$element-tag$""" 
 element-attributes="""$element-attributes$""" 
actions="""$actions$"""/>

This code uses cascade filter prefix run to get the icon and color of a tiddler or use the Cascades from TW settings.

I think using your approach it is possible to apply color and icons to wikitext links.

8

I created a wiki with a modified version to include internal links : Icons for links — internal & externals

This do not take into account the icon field, instead it will display an icon on tiddlers whose name match the domain field set on image tiddlers. I can add support for that if you want but it will take a bit of time

9

Much appreciated!

I play with the new code, I will ask you if I need further help.

10

Note that I removed the styling for tags, I had negative feedback about it so I thinks it’s best to keep it separated

EDIT: updated the code to support space in tiddler title (encodeuri operator)

11

Something is wrong! I cannot see any icons even with external links! Would you mind having a look?
See for example $:/Libro/ExternalLinksIcon/Settings/HowTo

12

You need to reload the wiki in order for the style to be generated, did you try it ? You can send me your wiki and I will take a look. Unless you are talking about the demo ? Everything works on my end, what browser do you use ?

E.g:

image
image698×706 29.5 KB

13

I am working on the online demo you sent!

14

I see, it works on firefox but not on chrome, I’m investigating the issue

EDIT: found the issue, change display: inline list-item to inline-block

15

Yes, I use Edge/Chrome 108 on Win10.

16

I updated the demo, can you check if it works on your end ?

17

Works now! Thank you :grinning:

18

Hello @telumire ! I am also having some challenges making the stylesheets work in a new TiddlyWiki; what are the steps to bring over the necessary tiddlers into a fresh notebook (followed by a notebook refresh if I followed well)

I tried starting from Demos — Q&A and tools for tiddlywiki or https://link-icons.tiddlyhost.com/ and bringing across various tiddlers and stylesheets, but so far, not having much success.

Cheers!

19

If you are using the latest prerelease then the issue come from the new parameters for the core icons, so to fix this you can either import the old icons in your wiki, or use a wikify to get the final svg output, then use this for the background image. I plan to update my code when I’ve finished my exams.