Per-tiddler (and tag) CSS styling with fields

Tips & Tricks
#1

I have a useful tool in my wiki for styling tags and individual tiddlers with CSS.

Using Custom styles by data-tiddler-title and How to apply custom styles by tag, it’s easy to write a stylesheet that lets you style a tiddler or tag with simple CSS.

Here’s $:/phajas/stylesheets/tiddler, which I have tagged $:/tags/Stylesheet:

\whitespace trim
<$list filter="[is[tiddler]]">

<$list filter="[<currentTiddler>fields[]prefix[css]!suffix[css]]" variable="field">
<$let
CSSPROP={{{ [<field>search-replace[css-],[]] }}}
VALUE={{{ [<currentTiddler>get<field>] }}}
>

[data-tiddler-title="<<currentTiddler>>"] {
  <<CSSPROP>> : <<VALUE>>;
}

.tc-tagged-<<currentTiddler>> {
  <<CSSPROP>> : <<VALUE>>;
}

</$let>
</$list>

</$list>

Hopefully this is useful to someone! I found it nice to style my tiddlers. It’s convenient that it’s applied to draft tiddlers, as you can live-iterate on it.

3 Likes