tiddler conditional style without tc-tagged?

[Erwan]

Hi everyone,

I would like to apply some specific style rules to tiddlers which
satisfy a given condition (e.g. [has[my-field]]), and (to make things
harder) I would like to be able to use the "color" field of the current
tiddler. For example, with the following CSS rules every tiddler should
have a thick border colored according to its "color" field:

<style>
.tc-tiddler-frame {
border-style: solid none none solid;
border-width: 5px;
border-color: {{!!color}};
}
</style>

Is this possible?

Regards
Erwan

[Eric Shulman]

When the CSS content is evaluated, it isn't in the context of a specific tiddler, but rather, in the context of the stylesheet tiddler, so the reference to {{!!color}} would only pick up the color value from a field on the stylesheet tiddler itself (i.e., {{currentTiddler!!color}}.  In addition, the CSS rule for .tc-tiddler-frame is applied to all tiddlers, not just the current one.  That is why Jeremy automatically generates the ".tc-tagged-SomeTag" class attributes for tiddlers.  It provides a way to differentiate between tiddlers so that CSS rules can be selectively applied simply by adding a tag.

Without using tagging, the problem is a bit more complicated.  You need to modify the core's ViewTemplate definition so that you can add your tiddler-specific custom classes to the tiddler frame directly.  Something like this:

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$ $(tiddlerCustomClass)$
\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>>
<$set name="tiddlerCustomClass" value={{!!class}}><!--ADDED-->
<div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$set><!--ADDED-->
</$tiddler></$set></$set>

1) added <$set name="tiddlerCustomClass" ...> to fetch the value of the "class" field from the current tiddler

2) added $(tiddlerCustomClass)$ to frameclasses macro definition

With this in place, you can then apply custom CSS classes on a per tiddler basis simply by adding a "class" field to that tiddler.

enjoy,

-e

[Erwan]

Hi Eric,

Thank you for your answer. I see now why this is tricky... Unfortunately I have two problems with your solution:

- As far as I understand, I still need to define my tiddler custom classes in a stylesheet tiddler, where I cannot use the tiddler-specific color, is that correct?

- when I tested this solution I found that modifying $:/core/ui/ViewTemplate apparently caused a bug in the navigation: when clicking on a link from the "open" or "recent" tab, the browser doesn't take me to the tiddler as it should. I tested with Firefox and Chrome on a TW version 5.1.8 (does that matter?).

Do you see something to do about that? if it's too complicated it's ok, I can probably live without my custom colored borders! ;-)

Cheers,
Erwan

[Eric Shulman]

On Sunday, January 3, 2016 at 9:27:10 AM UTC-8, Erwan wrote:

Thank you for your answer. I see now why this is tricky... Unfortunately I have two problems with your solution:

- As far as I understand, I still need to define my tiddler custom classes in a stylesheet tiddler, where I cannot use the tiddler-specific color, is that correct?

As a general principle, you should define CSS rules in a stylesheet, and then enter the CSS classname(s) into the custom "class" field in the desired filter.

If you want to apply custom styles *without defining classnames*, then this ViewTemplate is what you want:

\define frame-classes()
tc-tiddler-frame tc-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$

\end
<$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>>

<div class=<<frame-classes>> style={{!!styles}}><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
</div>
</$tiddler></$set></$set>

Note how this is very similar to using a custom class, but the syntax is even simpler.  Just add "style={{!!styles}}" to the attributes of the tiddler frame.  Then create a custom "styles" field in a tiddler and enter your CSS attribute definitions there.

- when I tested this solution I found that modifying $:/core/ui/ViewTemplate apparently caused a bug in the navigation: when clicking on a link from the "open" or "recent" tab, the browser doesn't take me to the tiddler as it should. I tested with Firefox and Chrome on a TW version 5.1.8 (does that matter?).

I tested this directly on http://tiddlywiki.com, and didn't see the problem you describe.  Perhaps you broke something during editing?

HTH,

enjoy,

-e

[Mat]

#1913 should be of interest for anyone interested in this matter:

<:-)

[Tobias Beer]

Hi Eric, Erwan,

 

- when I tested this solution I found that modifying $:/core/ui/ViewTemplate apparently caused a bug in the navigation: when clicking on a link from the "open" or "recent" tab, the browser doesn't take me to the tiddler as it should. I tested with Firefox and Chrome on a TW version 5.1.8 (does that matter?).

I tested this directly on http://tiddlywiki.com, and didn't see the problem you describe.  Perhaps you broke something during editing?

I can confirm the broken navigation behavior as well on both tiddlywiki.com and prerelease in Chrome / Win10.

The address bar appears to update but no scrolling is taking place.

Best wishes,

Tobias.

[Erwan]

Hi Eric,

The modification in $:/core/ui/ViewTemplate still seems to cause a navigation bug. I tested a bit more on tiddlywiki.com: apparently it does not appear all the time when opening a (previously closed) tiddler, but it's always visible (to the extent of my tests) if you click on a tiddler title from the "open" tab (i.e. when the tiddler was already open): in this case the browser doesn't navigate at all to the tiddler.

Also your explanations helped me understand how CSS style is applied in TW, and with that understanding I now think my original idea isn't so good after all: first I'm a bit reluctant to modify ViewTemplate for that, and as discussed in a recent thread it's not very good practice to have small pieces of CSS scattered everywhere. So I'll just leave it at that for the moment, maybe I'll find a better idea later.

Thank you for your help!

Erwan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/1ec6f527-fb2b-497b-bbea-538d8722cc8b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.