How to apply custom styles by field value ("type" field)

1

I found the possibility of applying personalized styles to tiddlers very interesting. Apply custom styles
I recently discovered how to use the “class” field and have also defined many personal styles based on tags. But I was wondering, is it possible to do the same with a field?

I would like to distinguish the appearance of the tiddlers based on their “type” field using css.
I’d want to have all tiddlers with type: application/x-tiddler-dictionary appear in a certain way.

Like if application/x-tiddler-dictionary was a tag I could simply do it like this:

[data-tags*="application/x-tiddler-dictionary"] {
  border: 3px solid #ffff66;
}

Is there a simple way to do this?

P.S.
I’ve seen this possible solution: Custom Styles Based of a Field of Tiddler - #2 by Mohammad

But if possible I would like not to have a very big styles tiddler. So I was wondering if other methods have been developed in the meantime to do this.

2

Hi, give this a spin at TiddlyWiki.com (code below image):

image
image702×786 45.2 KB

<$list filter="[type[text/plain]]">
[data-tiddler-title="<<currentTiddler>>"] {
  border: 5px solid blue;
}
</$list>
3

Try this:

First, edit the TWCore shadow tiddler $:/core/ui/ViewTemplate to change this:

<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} class=...

to

<div data-tiddler-title=<<currentTiddler>> data-tags={{!!tags}} data-type={{!!type}} class=

i.e, add data-type={{!!type}}. This makes the value in each tiddler’s type field available as the data-type attribute of the tiddler’s “wrapper” DIV. Once this is done, you can then create a tiddler tagged with $:/tags/Stylesheet, containing this CSS rule:

[data-type="application/x-tiddler-dictionary"] {
  border: 3px solid #ffff66;
}

enjoy,
-e

4

Brilliant, thank you so much! :medal_sports: