Dynamic and Conditional Stylesheet

[Mohammad]

This may be useful!

 Dynamic and Conditional Stylesheets

How create CSS dynamically in Tiddlywiki?

Use TW scrippting elements to generate a stylesheet dynamically!

Example

Assume you have some tiddlers contains CSS but NOT tagged with $:/tags/Stylesheet. It is also possible to add more tiddlers (for example those added by users), you can create a stylesheet by dynamic populating CSS from those tiddlers.

As an example, we have three diffent tiddlers each have some CSS and tagged with exmp64 , to create a dynamic stylesheet create a tiddler as below

• title: what you want
• tag: $:/tags/Stylesheet
• text:

<$list filter="[tag[exmp64]]">
<$transclude/>
</$list>

Will be available in TW-Scripts

[PMario]

Hi, you should add this at the top of your dyn stylesheet.

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock

<$list filter="[tag[exmp64]]">
<$transclude/>
</$list>

It will help you avoid problems with unwanted wikitext elements in the resulting CSS.

-mario

[Mohammad]

Many thanks Mario!
I file this in TW-Scripts.

One more question:

Using this parame does it allow to put extra text/wikitext in the stylesheet tiddler?

How about the transcluded tiddlers?

--Mohammad

[PMario]

uups I was wrong. It needs to be like this:

• title: what you want
• tag: $:/tags/Stylesheet
• text:

<$list filter="[tag[exmp64]]">
<$transclude/>
</$list>

And the tiddler that contains the CSS code needs the pragma. ... Have a look at the added "prettylink" rule

\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock prettylink

/*
[[Link to the docs]]
*/

.test-style {
color: red;
}

The above is valid CSS and the prettylink will be active.

-mario

[PMario]

Hi,

Including additional rules, that are wikified is difficult. .. You need to be sure, that it doesn't accidentally wikify CSS code. Since the browser CSS parser will silently fail.

-m

[PMario]

On Monday, July 1, 2019 at 11:36:19 AM UTC+2, PMario wrote:

 

Including additional rules, that are wikified is difficult. .. You need to be sure, that it doesn't accidentally wikify CSS code. Since the browser CSS parser will silently fail.

Eg: A link like this will fool the brower css parser: [[test */]]

-m

[Mohammad]

Thanks Mario!

Can we also apply CSS to a tiddler through viewtemplate?

For example I want to apply certain CSS (like red border, special fonts) for tiddlers tagged with myTag and modified within last week!

--Mohammad

[TonyM]

Mohammad,

In a similar way to Dynamic and Conditional Stylesheets I recently made some buttons that use css to reveal content.

See here https://groups.google.com/forum/?hl=en#!searchin/tiddlywikidev/button%7Csort:date/tiddlywikidev/0wOyn6oSJWY/C4oLQ-scCAAJ

The point is however, I used a list filter to determine if some css was active. Even although the css is invisible to the user

<$list filter="[<button-state>] -[[false]]" variable=nul>
     <$button tooltip="Toggle field $buttonname$ to false">
         <$action-setfield $field=<<button-state-field>> $value="false"/>
         <<button-true-label>>
     </$button>
     <style>
        #$buttonname$-true { display: block; }
        #$buttonname$-false { display: none; }
      </style>
</$list>

So this is also conditional css

<<button-here local-show Show Hide>> 
<section id=local-show-true> I am on true </section>

Regards

TRony

[PMario]

On Monday, July 1, 2019 at 11:48:54 AM UTC+2, Mohammad wrote:

Can we also apply CSS to a tiddler through viewtemplate?

For example I want to apply certain CSS (like red border, special fonts) for tiddlers tagged with myTag and modified within last week!

Follow the link for more "custom CSS".

have fun!

mario

[Mohammad]

Mario,

 Those solution uses CSS attribute selector! Here I need to add filters for example to filter tiddlers modified within last week!

/Mohammad

[Mohammad]

Hi Tony!
 This is great solution! I file this!

Thank you

[PMario]

On Monday, July 1, 2019 at 12:47:28 PM UTC+2, Mohammad wrote:

Mario,

 Those solution uses CSS attribute selector! Here I need to add filters for example to filter tiddlers modified within last week!

Have a closer look at: https://tiddlywiki.com/#Q%3A%20How%20can%20I%20use%20a%20custom%20field%20to%20style%20a%20tiddler%3F

-m

[PMario]

The example should be like:

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

The difference is the format=text attribute, which should also avoid problems with special tiddler titles.

have fun!
mario

[Mat]

IMO this is basically how native TW should create (aggregate) stylesheets, i.e from multiple tiddlers that individually define specific style defs. One stylesheet for "the tiddler", another for "the sidebar" - or maybe these are also aggreagtions of smaller/more specific ones (...the tiddler control buttons, the sidebar segments etc).

Caution: CSS is "last called wins" so you should probably control the order in the list filter. If you use "[tag[foo]]" then one idea could be to check if foo has a list field, i.e since foo is a tag you can access it's children with <<tag foo>> and easily manipulate the order in its list field. 

<:-)

[PMario]

On Monday, July 1, 2019 at 1:31:43 PM UTC+2, Mat wrote:

IMO this is basically how native TW should create (aggregate) stylesheets,

This is the way, how TW stylesheet handling works. ... But be aware. ... Nothing is for free: "The more single tiddlers you have, the longer it will need to process them."

Dynamically generated styles have to be re-calculated everytime you change something.

-m

[Mat]

PMario wrote:

<$list filter= ... format=text 

Very good stuff, Mario. IMO this bit about format should be in the docs.

<:-)

[PMario]

With V5.1.20 ... new tag-index handling ... this should be improved. ...

Just to be sure, we are not talking about 10 tiddlers. We are talking about several 100. ... But anyway. Users tend to bend the borders ;)

-m

[Mat]

PMario wrote:

Nothing is for free: "The more single tiddlers you have, the longer it will need to process them."

Good point. I wonder how much time are we talking about though. 

Dynamically generated styles have to be re-calculated everytime you change something. 

Does "everytime I change something" mean "change anything" or does it mean only when I change tiddlers involved in the dynamic listing of them, i.e the stylesheets themselves?

<:-)

[PMario]

On Monday, July 1, 2019 at 1:43:51 PM UTC+2, Mat wrote:

PMario wrote:

Nothing is for free: "The more single tiddlers you have, the longer it will need to process them."

Good point. I wonder how much time are we talking about though. 

I think atm it's about 30-80ms ... So we don't recognise it.

 

Dynamically generated styles have to be re-calculated everytime you change something. 

Does "everytime I change something" mean "change anything" or does it mean only when I change tiddlers involved in the dynamic listing of them, i.e the stylesheets themselves?

As far as I can remember, it's part of the refresh cycle. So really everytime the UI refreshes anything.

-m

[Mat]

PMario wrote:

Dynamically generated styles have to be re-calculated everytime you change something. 

Does "everytime I change something" mean "change anything" or does it mean only when I change tiddlers involved in the dynamic listing of them, i.e the stylesheets themselves?

As far as I can remember, it's part of the refresh cycle. So really everytime the UI refreshes anything. 

Is it possible to specify that a tiddler should not be part of the refresh cycle but only when it is are open?

<:-)

[Mohammad]

Many Thanks Mario!

 I got the point and will note to the performance as you advised!

-- Mohammad

[Mohammad]

Good note Mat!
Thanks

[Mohammad]

Based on the discussion here, I have created a test case at: http://dynastyle.tiddlyspot.com/

The test case is as described below. I appreciate to give me your feedback. I gonna to use it in Tiddlyshow to have different style for different slideshow! Right now the whole wiki has to use one theme at a time.

How is it possible to conditionally and dynamically apply CSS to a tiddler? Assume you have a child tiddler and you want to style it based on a theme filed value from parent.

The mechanism is as described below

1. Generate a dynamic Stylesheet (a tiddler tagged with $:/tags/Stylesheet)
   • The stylesheet is generated from some tiddlers containing conditional css
   • There are several css tiddlers are populated conditionally
2. A test example uses the dynamic stylesheet as below
   • The example has several tiddlers tagged with slideshow
   • The slideshow tiddler has a field called theme!
   • Each slideshow tiddler has several child tiddlers (those tagged with slide + slideshow tiddler as parent)
   • The dynamic stylesheet applies conditionally css rules to child slides based on the theme field value. Here a theme is to style a tiddler with colored border.

[Mohammad]

One point I like to understand is, if I have 20 parent each have 10 child tiddlers, the dynamic stylesheet will generate 20 line of CSS and 200 tiddlers will be affected! I dont know is there any performance effect or not? I doubt a user have all 200 tiddlers opened on the screen!

[Mat]

Mohammad wrote:

How is it possible to conditionally and dynamically apply CSS to a tiddler? Assume you have a child tiddler and you want to style it based on a theme filed value from parent.

Read https://tiddlywiki.com/prerelease/#Custom%20styles%20by%20data-tiddler-title

[data-tiddler-title="the child"] {
  {{fieldfromparent}}
}

<:-)

[Mohammad]

Mat, I did not get the point!

Do you mean this way we can have fewer line in dynamic stylesheet?

[Mohammad]

Mat,

 Note that we may have few parent like 20 ~ 50 parent tiddlers

 but hundreds of child tiddlers (if any parent has 25 child tiddlers then we may have 1250 ). In my solution dynamic stylesheet will produce 25 line if each theme has 30 line then the stylesheet will grow up to 750 line!

too many!

On Monday, July 1, 2019 at 7:10:24 PM UTC+4:30, Mat wrote:

[Mat]

Mohammad wrote:

Mat, I did not get the point!

Do you mean this way we can have fewer line in dynamic stylesheet?

Fewer lines, I have no idea. I just addressed what you asked in bold text in your message. 

If you're worried about too many iterations, then maybe you'll have to make a big aggreated static copy of all the smaller parts. I don't know.

<:-)

[Mohammad]

Thanks Mat,

 I am thinking  if I can use template instead of conditional stylesheets.

--Mohammad

[PMario]

On Monday, July 1, 2019 at 4:14:40 PM UTC+2, Mohammad wrote:

...

The slideshow tiddler has a field called theme!

If you want to create themes. .. Why don't you use themes. ...

A theme in TW is like a plugin. But themes can be switched on the fly. I think, this would be much more efficient and less complicated.

-m

[Mohammad]

Mario,

 That's correct! The problem is one may have several slideshow in the same wiki and each use their own themes!

So, what I tried and not successful yet, is how can I have different theme for different slideshow at the same time!

One solution based on your suggestion may be to switch theme when click on the slideshow dashboard and set it for presentation

but then if I use TW theme it will apply it to the whole tiddlers.

/Mohammad