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

[Sobriety]

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

@Mohammad

I use something like this (put it in a tiddler tagged with $:/tags/Stylesheet and type is unset or is Tiddlywiki 5 (text/vnd.tiddlywiki)

\define assign-css()
\rules only
[data-tiddler-title="$(currentTiddler)$"] .tc-tiddler-body { color:red; }
\end
<$list filter="[all[tiddlers]has:field[job]]">
<<assign-css>><br>
</$list>

The issue here is, you may have a very big styles tiddler! but it works fine!

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.

[Charlie_Veniot]

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

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

[EricShulman]

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

[Sobriety]

Brilliant, thank you so much!