Selective coloring of TOC entries based on field

[Damon Pritchett]

Hello all of you helpful folks,

I have another question for ya'll. Is it possible to color certain table of contents entries based on a tiddler field? If so, does this also apply to the tocP macro? Here's my scenario. I have a collection of images. Some of these images are only downloaded and some of them I own hard copies of. Each image has its own tiddler with a lengthy description. I want to have the images I own show up as a different color in my table of contents.

Thanks once again for any help.

Cheers!

Damon

[Eric Shulman]

On Friday, January 17, 2020 at 10:33:12 AM UTC-8, Damon Pritchett wrote:

I have another question for ya'll. Is it possible to color certain table of contents entries based on a tiddler field? If so, does this also apply to the tocP macro? Here's my scenario. I have a collection of images. Some of these images are only downloaded and some of them I own hard copies of. Each image has its own tiddler with a lengthy description. I want to have the images I own show up as a different color in my table of contents.

Yes, it is possible.  Here's how:

By default, the items in a TOC display use the *title* of each tiddler.  However, if you define a *caption* field for a tiddler, the TOC will use that text instead.  This is most often used to bypass the CamelCase name of the tiddler (e..g, "Hello there", instead of "HelloThere") or to provide a longer, more prosaic alternative (e.g, "Greetings and Felicitations!").

However, the caption text can also contain other wiki syntax, such as the "@@" styling syntax, which lets you specify CSS classnames or inline styles.  For example, suppose you want a TOC item to be displayed using red text.  To do this, you could write the following in the caption field for that tiddler:

@@color:red; Text goes here@@

Alternatively, for more "global" control over the appearance, you could use a CSS classname (e.g., "myTOC"), like this:

1) First, define a stylesheet tiddler (tagged with $:/tags/Stylesheet), containing

.myTOC { color:red; }

2) Then, in the caption field of the desired TOC item, write:

@@.myTOC Text goes here@@

The advantage of the classname method is that you then have centralized control over the styling for *all* similar TOC items, without having to separately re-edit the caption entries of each item.  Thus, if you decide to change the color, or add other CSS attributes, you only have to change the stylesheet tiddler.  For example:

.myTOC { color:green; font-size:150%; border:1px solid; }

enjoy,

-e

Eric Shulman

TiddlyTools: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki - http://www.TiddlyTools.com/InsideTW

[Damon Pritchett]

Thanks, Eric!

That worked beautifully and just as I wanted! I had no idea you could do that. Is that the only field where that could work?

Thanks,

Damon

[TonyM]

Damon,

Eric solution makes use of the existing TOC macos. Personally however I would encourage people consider building there own TOC and develop and understanding of Recursive macros. Because once you learn these building custom TOC processes are much easier.

For example computing other information about each member in the TOC, getting icons and color from the default fields programmatically rather than needing to edit the caption field for every member.

I will share a single tiddler example soon, in a new thread. 

Regards

Tony

[Damon Pritchett]

Thanks Tony. Good advice. That's definitely something I've been wanting to consider to help me learn.

I look forward to your example.

Damon

[Mohammad]

Nice hack!

Added to TW-Scripts

[Mohammad]

I agree!

[TonyM]

See the new toc thread https://groups.google.com/forum/m/#!topic/tiddlywiki/RTzc2MGT__Y

I have yet to publish a color version. A color for each level, but honor the color field if present.

Regards
Tony