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

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?

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.

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

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

Try this:

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

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


<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;



Brilliant, thank you so much! :medal_sports: