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.
Thanks @well-noted,
good information, but not exact that what I mean.
Hi @Scott_Sauyet,
adding an icon depending of the content of the title - this is exact what I was looking for - thanks.
With the CSS I don’t want to address the tiddler body.
When hover the icon, it will be zoomed. In this case, CSS is needed not to move the title to the left side.
Thanks, Stefan
You should be able to address whatever parts of the rendered tiddler you like. The structure will be something like this:
div.tc-tiddler-frame.tc-tiddler-view-frame.tc-tiddler-exists.tc-tagged-Foo.tc-tagged-Bar
div.tc-tiddler-title
div.tc-titlebar
span.tc-tiddler-controls
(... buttons contain svgs here ...)
span
span.tc-tiddler-title-icon
svg.tc-image-originals-cherry.tc-image-button
h2.tc-title
div.tc-tiddler-info.tc-popup-handle.tc-reveal (hidden="true")
div.tc-reveal
div.tc-subtitle
a.tc-tiddlylink.tc-tiddlylink-missing
(... date/time/creator ...)
div.tc-reveal
div.tc-tags-wrapper
span.tc-tag-list-item
span.tc-tag-label.tc-btn-invisible
span.tc-tag-exists (or tc-tag-missing)
(... more tags ...)
div.tc-tiddler-body.tc-reveal
( ... all your beautiful rendered markup ...)
You can focus on whatever you like in there. For instance, if you were to do this:
[data-tiddler-title*="Jahr (2024)"] {
span:has(span.tc-tiddler-title-icon) {background-color: yellow;}
.tc-titlebar {border: 2px solid red; padding: 2px;}
h2.tc-title {border: 2px solid blue;}
.tc-tiddler-title-icon {padding: 5px; background-color: lime;}
}
It would render something like this:
I’m not sure, if I understand you correct, @Scott_Sauyet …
CSS of title etc. is fine…
The issue is: overlapping of the icon and the title, when hover the icon:
[data-tiddler-title*="HelloThere"] {
span:has(span.tc-tiddler-title-icon) {background-color: yellow;}
.tc-titlebar {border: 2px solid red; padding: 2px;}
h2.tc-title {border: 2px solid blue;}
.tc-tiddler-title-icon {padding: 5px; background-color: lime;}
}
.tc-tiddler-title-icon:hover {
transform: scale(2);
position: absolute;
transition: all 0.3s ease-out;
}
At the end (hover), it should look like this:
Thanks, Stefan
I wasn’t trying to help you with your hover issue, just demonstrate how you can address the various parts of the tiddler with CSS. I haven’t looked at the hover issue, although I saw it when you posted it. I thought this thread was about how to conditionally use CSS based on the tiddler title. That’s all I was addressing here.
No problem - everything is fine.
I appreciate your help regarding my intial question.
Thanks, Stefan
If you use this CSS it should do the trick. But do not use position: absolute.
The “jumpy” change IMO does not look good. So you should use an animation.
But I do not really see the value of that size change. What do you try to achieve?
.tc-tiddler-title-icon:hover .tc-image-button {
width: 3em;
height: 3em;
}
I use it to assign an image of the author of the tiddler article.
With the hover effect I enlarge the small image. Thats it.
If it is not working as expected, than it is, as it is - no big issue.
Thanks to @Scott_Sauyet who gave me the solution to add the proper icon depending of the content of the title.
BTW: the code does it not.
Thanks to all, who investigated.
Stefan