Hello everybody,
I have a fast growing wiki with many tiddlers tagged “draft”. I would like to make this status visible in the TOC by giving them another style rule e.g. opacity: 0.5 or sth. like that.
Is it possible to filter the TOC entries and add such a rule? How could I accomplish this? Thanks for any advice!
The appearance of each TOC item is controlled by the toc-caption() macro definition which is found in the $:/core/macros/toc TWCore shadow tiddler:
\define toc-caption()
\whitespace trim
<span class="tc-toc-caption tc-tiny-gap-left">
<$set name="tv-wikilinks" value="no">
<$transclude field="caption">
<$view field="title"/>
</$transclude>
</$set>
</span>
\end
To change this definition, you do NOT need to modify the TWCore shadow tiddler. Instead, just paste the above macro definition into a new tiddler (e.g., “MyTOCCaption”), and tag that tiddler with $:/tags/Global.
Then, to add your desired CSS style rule, you can modify that copy of the macro definition by changing this line:
<span class="tc-toc-caption tc-tiny-gap-left">
to this:
<span class="tc-toc-caption tc-tiny-gap-left"
style={{{ [<currentTiddler>tag[draft]then[opacity:0.5]] }}}>
Notes:
currentTiddler variable is used to refer to each TOC item being renderedstyle=... attribute uses a “filtered transclusion” (the triple curly syntax) to see if the currentTiddler is tagged with “draft” and, if it is, it applies the opacity:0.5 style to the TOC item output.enjoy,
-e
Eric beats me to it again!
My solution was very similar, except that I add a class name rather than a style tag:
<span class=`tc-toc-caption ${ [<currentTiddler>tag[draft]then[draft ]] }$tc-tiny-gap-left`>
And then I would add to a existing stylesheet, or create a new one, with whatever rules I choose for such spans:
title: toc-draft-styles
tags: $:/tags/Stylesheet
span.tc-toc-caption.draft {
opacity:.5;
background: #ffc;
&::after { content: "✎" }
}
You can test by downloading the following and dragging the resulting file onto your wiki: toc-draft-caption.json (656 Bytes)
This works like a charm, thank you!
Thank you, Scott, I’ve tried your solution but couldn’t get it to work. Double-checked everything but the styles are not applied. Neither is the class when I look it up in the inspector window. I’d prefer styling this way because I already have a stylesheet in my wiki for extra styling. Do you have any idea what could be wrong?
Did you follow the rest of @Eric’s suggestion, making sure that the tiddler with the new toc-caption code has the tag $:/tags/Global?
Did you try my attachment? You should be able to click on it to download and simply drag the file onto your wiki. But note that this one and the one from Eric are not compatible. If they’re both there, then his might override mine, which might be the issue.
Also, what version of TW are you using? If it’s older than 5.3.0, then the Substituted Attribute Values syntax wouldn’t be available.
If none of those answers the question, do you have a public wiki we could try this on?
Sorry, it was the simple quotation marks in the <span>. I had changed them to double ones … Now it works! Many thanks 
It’s not quite the TOC, but feels aligned to the original request nonetheless - for making the Draft tids (actual being-edited drafts, not tagged drafts) stand out in the ‘Open’ list, this thread offers a pure CSS solution: Making Drafts stand out in the Open sidebar - #3 by nemo
regarding tagged stuff - I use a “TODO” tag which feels aligned to OP’s use of ‘draft’, and for that I have a tid which generates a TOC just for that tag:
TOC from <<tag TODO>>
<div class="tc-table-of-contents">
<$macrocall $name="toc-selective-expandable" tag=TODO />
</div>
and then that tid is tagged $:/tags/SideBar. Along with a caption field set to ‘TODO TOC’, my sidebar gets this tab:
