Style Tiddler Titles from "Color" Field

#1

For tiddlers where the color field is set — how could I get that value on a per-tiddler basis and style .tc-title so that my tiddler titles match the tiddler color?

I was hoping to do it purely with a stylesheet tiddler, but it looks like I may need to tinker with $:/core/ui/ViewTemplate/title also. I can see that tiddler changes the color of SVG icons by wrapping them in a span with a fill property — but given all the text styling, it’s a little trickier (at least for me) to style the text transclusion itself.

Anyone done this before?

#2

Shiraz already has this.

https://kookma.github.io/TW-Shiraz/#demo%2Fstyle-tiddler%2Ftiddler-title-color:demo%2Fstyle-tiddler%2Ftiddler-title-color%20demo%2Ftiddler-title-color-danger%20demo%2Ftiddler-title-color-info%20demo%2Ftiddler-title-color-primary

You can also have simple solution to display a tiddler background in dimmed / light color.

2 Likes
#3

In a tiddler with the tag $:/tags/Stylesheet and the type text/vnd.tiddlywiki (default):

<$list filter="[each:list-item[color]]" variable="color">
:is(<$list filter="[<color>listed[color]]">[data-tiddler-title="{{!!title}}"],</$list>) .tc-title {color:<<color>>;}
</$list>

Alternative: Create a custom viewtemplate for the title if the tiddler has a color field.

In a tiddler with the tag $:/tags/ViewTemplateTitleFilter and the list-before field set to empty:

[has[color]then[ViewTemplate/title/color]]

In a tiddler named “ViewTemplate/title/color” :

<span style.color={{!!color}}>{{||$:/core/ui/ViewTemplate/title/default}}</span>
4 Likes
#4

So I am trying to extract from this more general knowledge how tiddlywiki sets the various tc-classnames

So looking at @Mohammad’s solution you set the tiddlers class field to
title-primary then his stylesheet says;

.title-primary .tc-title {
  color: #007bff;
}

This is according to W3Schools an example of
.class1 .class2 OR .name1 .name2 Selects all elements with name2 that is a descendant of an element with name1

  • From this we can deduce the “class field in tiddlers” sets a class for which tc-title is a descendant of.
  • I am now looking at recording the full heirachy of tc-classnames so I can learn how to write similar css overrides via the class field.
1 Like
#5

Right on! Could be real useful.
The Tiddler “class:” field is one of the neatest features in TW.

TT

1 Like
#6

If you want to help documenting the doc, you might want to look at this GitHub discussion: Improving Tiddlywiki’s CSS: Documentation for the css classes used by the core #6980

For the class field, the filter constructing the class of a tiddler is the following:

$:/core/ui/ViewTemplate

...
<div 
data-tiddler-title=<<currentTiddler>> 
data-tags={{!!tags}} 
class={{{ 
tc-tiddler-frame 
tc-tiddler-view-frame 
[<currentTiddler>is[tiddler]then[tc-tiddler-exists]]
[<currentTiddler>is[missing]!is[shadow]then[tc-tiddler-missing]]
[<currentTiddler>is[shadow]then[tc-tiddler-exists tc-tiddler-shadow]]
[<currentTiddler>is[shadow]is[tiddler]then[tc-tiddler-overridden-shadow]]
[<currentTiddler>is[system]then[tc-tiddler-system]] 
[{!!class}]
[<currentTiddler>tags[]encodeuricomponent[]addprefix[tc-tagged-]] +[join[ ]] }}}
role="article">
...
</div>

As you can see, the field class is mentioned with the filter run [{!!class}]

2 Likes
#7

thanks, great minds think alike.

Snag_1218fa5b
Snag_1218fa5b1143×1006 81.3 KB

example of my progress

1 Like
#8

You guys are the BEST!
Sorry I dropped off the radar so long; it’s been a crazy couple of weeks, and I’m just now getting back the TiddlyProjects I left lying around. :frowning:

@Mohammad, I remembered seeing this in Shiraz and was trying to decipher just how you were were going about it. :stuck_out_tongue: This is one of a couple of things I’ve tried to reverse-engineer from your beautiful plugin in an effort to improve my own wikis and my understanding of how they work.

What I did not realize is that you were leveraging the class field from the TiddlyWiki core , which @TW_Tones and @TiddlyTitch zeroed in on right away. I was too focused on $:/core/ui/ViewTemplate/title and too fixated on the need for a $:/tags/Stylesheet tiddler to do what I wanted.

That’s why I started with @telumire’s filter-based solution. But as I struggled to grasp how it was applying its logic to tiddler titles, what he was saying about the ViewTemplate title template began to dawn on me — and that solution is closer to how I view my wikis and have them organized, so that’s the approach I took.