Change the font-style in sidebar with a specific tag

#1

Hi guys,

Its possible to change the font-style of a determined item in the toc sidebar when a specific tag is used? For example, i will tag some tiddler with HangOut and want the texto to be italic.

Thanks in advance

#2

The TOC sidebar is driven by the TOC macros, and iterates the whole tree. This seems to me, this means you need to use a feature of the TOC macro unless you use some smart CSS data- see https://tiddlywiki.com/#Custom%20styles%20by%20data-tags or build your own toc macro that applies CSS to the list item.

Mario was working on a revised and enhanced set of TOC macros that would allow a specific tiddler to specify a template, and that template could apply the css. I did something similar in the past and simply underlined a title.

1 Like
#3

For a pure CSS solution, you can try adding the following to a stylesheet tiddler. Note that this tiddler should not have type: text/css, or the dynamically generated code won’t work!

.toc-item .tc-tiddlylink:is(<$list filter="[tag[HangOut]] +[encodeuricomponent[]]" join=",">[href="#{{!!title}}"]</$list>) {
	font-style: italic;
}

You can replace [tag[HangOut]] with any number of filter runs describing the tiddler titles you want to be affected. The $list widget will be wikified before the stylesheet is applied, generating something like this (tested on TW-com with [tag[HelloThere]]):

.toc-item .tc-tiddlylink:is([href="#A%20Gentle%20Guide%20to%20TiddlyWiki"],[href="#Discover%20TiddlyWiki"],[href="#Some%20of%20the%20things%20you%20can%20do%20with%20TiddlyWiki"],[href="#Ten%20reasons%20to%20switch%20to%20TiddlyWiki"],[href="#What%20happened%20to%20the%20original%20TiddlyWiki%3F"],[href="#Funding%20TiddlyWiki"],[href="#Open%20Collective"]) {
	font-style: italic;
}
2 Likes
#4

@etardiff i can reproduce in TW-com but not in my wiki.

I uploaded it in the Tiddlyhost for test this https://gurps3ed.tiddlyhost.com

#5

It took a bit of digging, but I believe the issue is that you have an unterminated style at the end of $:/GURPS/Stylesheet, which is preventing subsequent stylesheet tiddlers from being parsed correctly.

I deleted the following…

:is([data-tiddler-title^=prefix],[data-tiddler-title$=suffix],[data-tiddler-title*=elloThe] 
) div{ 
...

and it started working as expected.

1 Like
#6

Wow! You are right! I will star to note what any code means to avoid this type of error. Thank you @etardiff !

1 Like