Hello forum,
is it possible to manipulate a tiddler with CSS based on conditional syntax within a macro?
eg. When tiddler tilte contains “Jahr (2024)”, than
icon with value “cherry”like:
%if [contains:[[Jahr (2024)]]] %>
color: red;
margin-left: 1em;
*...add the field and value*
<% endif %>
tagged $:/tags/Macro
Thanks, Stefan
A viewtemplate might be what you’re looking for, rather than a macro… can you tell us a little more about your usecase?
The CSS is straightforward. I’d have to think a bit more about the icon.
title: My stylesheet
tags: $:/tags/Stylesheet
[data-tiddler-title*="Jahr (2024)"] .tc-tiddler-body {
color: red;
margin-left: 1em;
}
Or if you want your styles to apply to the whole tiddler and not just its body, remove .tc-tiddler-body from the rule.
Hi @well-noted,
I’ll like to add automatically an image to certain tiddlers matching the conditions eg. “Jahr 2024” and will address the issue hovering the image - see Zoom image in titlebar as a “popup”
Hi @Scott_Sauyet,
thanks for feedback.
I’ll like to add automatically an image to certain tiddlers matching the conditions eg. “Jahr 2024” and will address the issue hovering the image - see Zoom image in titlebar as a “popup”
I don’t know if this is exactly what you’re looking for @StS, but this is the code I use to conditionally render icons in my titles, derived from Soren’s Zettellkasten
<!-- Source -->
<$list filter="[all[current]tag[Source]]" variable=_>
<i class="fas fa-book-open" style="font-size: 80%; position: relative; top: 0.2em; transform: translateY(-50%); margin-right: 0.1em;"/>
</$list>
<$list filter="[all[current]tag[Sink]]" variable=_>
<i class="fas fa-pen-fancy" style="font-size: 80%; position: relative; top: 0.2em; transform: translateY(-50%); margin-right: 0.0em;"/>
</$list>
<!-- Idea -->
<$list filter="[all[current]tag[Idea]]" variable=_>
<i class="far fa-lightbulb" style="font-size: 80%; position: relative; top: 0.2em; transform: translateY(-50%); margin-right: 0.1em;"/>
</$list>
<!-- Praxis -->
<$list filter="[all[current]tag[Praxis]]" variable=_>
<i class="far fa-solidarity" style="font-size: 80%; position: relative; top: 0.2em; transform: translateY(-50%); margin-right: 0.1em;"/>
</$list>
<!-- Journal -->
<$list filter="[all[current]tag[Journal]]" variable=_>
<$button class="tc-btn-invisible" tooltip="Copy diary value">
<$action-sendmessage $message="tm-copy-to-clipboard" $param={{!!diary}}/>
<i class="far fa-calendar-alt" style="font-size: 80%; position: relative; top: 0.2em; transform: translateY(-50%); margin-right: 0.1em; cursor: pointer;"/>
</$button>
</$list>
That is transcluded within $:/core/ui/ViewTemplate/title
And the result is, for example, Journal tiddlers automatically have an icon next to their title:
For the “add field” part, you need an <$action-setfield .../> triggered by a widget like $button.
This seems to do what you’re looking for regarding the icon:
title: TiddlerIconFilters/jahr-2024
tags: $:/tags/TiddlerIconFilter
list-after: $:/config/TiddlerIconFilters/icon-field
[regexp[Jahr \(2024\)]then[cherry]]
Note that unlike the CSS, where we used “Jahr (2024)” directly ( [data-tiddler-title*="Jahr (2024)"] ), here we need to escape characters with special meaning in regexes, here the parentheses ( regexp[Jahr \(2024\)] ). Other than that, it’s pretty simple… once you learn that the icon cascade exists. Note that I used list-after: $:/config/TiddlerIconFilters/icon-field. That means that if the tiddler has an icon field, it will be used instead of this. If you want this to appear even if there is an icon field, then switch to list-before instead.
You can test this by downloading this and dragging it to any wiki:
Jahr2024.json (3.3 KB)
Thank you for the question. I didn’t realize there was a cascade available for the icon name.
That’s what I thought at first reading too, but now I think that’s not really the question. Please correct me if I’m wrong, @StS, but I believe the idea is to have the icon show up before the title—as it would with an icon field— not specifically to add such a field.