[TW5] How to use $list filter in css stylesheet?

[magev958]

I have tried to use $list filter in an stylesheet tiddler as per this https://groups.google.com/d/msg/tiddlywiki/BN2lJiDKSNE/AVrsbrHkCgAJ but the resulting css applies to all tiddler, not only to the ones in the filter results. Anyone using this?

/Magnus

TW 5.1.14

[Mark S.]

Any styles you generate will be available everywhere that the selectors match. If you only want them to match certain tiddlers, you might incorporate the special tag prefix (tc-tagged-) into the selectors. Each tiddler with tags has a matching class name. For instance, a tiddler tagged "Magnus" will have an assigned class of "tc-tagged-Magnus"

HTH
Mark

[magev958]

Actually I tried to use fields as limiter, to have the stylesheet only apply to tiddler with the field "Field_1".

[Mat]

If you post the code, it's much easier to help you. I'm pretty experienced with TW and CSS so I can hopefully help. (Incidentally I'm just now struggling with the same problem but in a very complex TW project that I'll hopefully present soon.)

<:-)

[Mark S.]

The problem is that there are no naturally occurring classes associated with fields like there are with tags. What you could do is to modify the view template in order to assign classes based on field values. Then your stylesheet could be more or less static.

Mark

[magev958]

I have tried this code in my stylesheet, but it affects all tiddlers. My stylesheet is tagged $:/tags/Stylesheet but the type is text/vnd.tiddlywiki instead of text/css. 

<$list filter="[rank[species]]">

/* Columns */

body.tc-body .tc-tiddler-frame .tc-tiddler-body {

    display: block;

    column-count: 2;

    -moz-column-count: 2;

    -webkit-column-count: 2;

}

</$list>

[magev958]

My field is "rank" with the text "species" for the tiddlers I would like to be affected

[PMario]

Hmmm, Good idea, but CSS doesn't work that way. ...

At the moment, we only have the tag attribute, that's assigned to the rendered tiddler in a way, that browsers can understand it. ... BUT there is a problem with that approach. Tags can have names, that are not valid in CSS eg: spaces ...

So I did prepare a pull request [1] to fix the tag-name problem. ... It wouldn't solve your usecase, because you need some extra levels of flexibility. ...

Danielo and Tobias brought up the idea of having a special field, that could hold different CSS attributes [2]. I wasn't happy with that solution, since I think it isn't generic enough, to cover all usecases. ... And since it doesn't work with yours, we have to do better :/

I'll need to think about that again  ....

regards
mario
PS: Reading Siniy-Kit's post I had an idea, that may help you. .. But I need some testing. I'll post something, when I know more.

[1] https://github.com/Jermolene/TiddlyWiki5/pull/2737
[2] https://github.com/Jermolene/TiddlyWiki5/pull/2737#issuecomment-276042733

[Mat]

OK, this works

Conditional viewtemplate:

tag: $:/tags/ViewTemplate
text:
<$list filter="[all[current]has[rank]rank[species]]">
<div class="mycolumns">
<$transclude mode="block"/>
</div>
</$list>

Stylesheet:

tag: $:/tags/Stylesheet
text:
.mycolumns {

    display: block;
    column-count: 2;
    -moz-column-count: 2;
    -webkit-column-count: 2;

   font-size:110%;
}
.mycolumns p {margin:0;}

Modify $:/core/ui/ViewTemplate/body shadow tid

...
<$list filter="[all[current]!has[plugin-type]!field:hide-body[yes]!has[rank]]">
...

<:-)

On Wednesday, July 12, 2017 at 5:24:05 AM UTC+2, magev958 wrote:

[PMario]

Hi magev958,

I did add some more info to the pull request: see: https://github.com/Jermolene/TiddlyWiki5/pull/2737#issuecomment-314855978

If you get the content from this ViewTemplate: http://2737.tiddlyspot.com/#%24%3A%2Fcore%2Fui%2FViewTemplate, which is part of the PR, you can use the mechanism now.

You just have to create a Stylesheet tiddler like this:

<$list filter="[rank[species]]"> 
[data-title^="<$view field=title/>"] .tc-tiddler-body {
    column-count: 2;
}
</$list> 

Which should do, exactly what you want. Your initial idea was right. Just your code needed to be changed. 

According to caniuse http://caniuse.com/#search=column-count ... 
column-count don't need -moz and -webkit prefixes anymore and div's are already "block" elements. 

have fun!
mario

[magev958]

Thanks, that worked perfekt! I was almost sure it was one of them "sorry, can't be done"-questions :)