Dynamic css and transcluding

[sin...@gmail.com]

Hello. 

I want to use dynamic css (as described here: https://tiddlywiki.com/static/Q%253A%2520How%2520can%2520I%2520use%2520a%2520custom%2520field%2520to%2520style%2520a%2520tiddler%253F.html) to style a tiddler that is transcluded by another tiddler. Unfortunately the transcluded tiddler does not show the style. The same happens if I use data-tags. A minimal example is:

Css

[data-tags*="colorblue"] .tc-tiddler-body  {color:blue;font-style: italic;}

Tiddler A 

{{Tiddler B}}

Tiddler B (tagged colorblue)

This should be blue

Tiddler B shows italic blue text as expected. I would expect Tiddler A to show the same (italic blue), but it does not. What am I missing?

Thanks for any help!

[Mat]

Right, the css needs a specification in order to "know" what to target its styles on. But the specification when you use "data-tags" is the tiddler with a certain tag... which is what you removed the text from, so you lost the specification which was pointing and saying "color this text blue".

Maybe you can use Transclusion with Templates ?

<:-)

[PMario]

On Wednesday, September 9, 2020 at 12:31:51 PM UTC+2, sin...@gmail.com wrote:

 

I want to use dynamic css (as described here: https://tiddlywiki.com/static/Q%253A%2520How%2520can%2520I%2520use%2520a%2520custom%2520field%2520to%2520style%2520a%2520tiddler%253F.html) to style a tiddler that is transcluded by another tiddler. Unfortunately the transcluded tiddler does not show the style. The same happens if I use data-tags. A minimal example is:

Have a closer look at these examples. The dynamic creation of CSS should be the last option. Most of the time the other possibilities are preferable.

https://tiddlywiki.com/#How%20to%20apply%20custom%20styles:%5B%5BHow%20to%20apply%20custom%20styles%5D%5D%20%5B%5BCustom%20styles%20by%20data-tags%5D%5D

 

Css

[data-tags*="colorblue"] .tc-tiddler-body  {color:blue;font-style: italic;}

Tiddler A 

{{Tiddler B}}

Tiddler B (tagged colorblue)

This should be blue

Tiddler B shows italic blue text as expected. I would expect Tiddler A to show the same (italic blue), but it does not. What am I missing?

Thanks for any help!

Transclusion doesn't create any "wrapper" elements. So there is no information in Tiddler A, that Tiddler B has been tagged.

You'd need to create a template.

tiddler: A

{{B||xTemplate}}

xTemplate

<div data-tags={{!!tags}}><$view field=text mode=htmlencoded/></div>

CSS

[data-tags*="colorblue"] {color:blue;font-style: italic;}

See the attached file. You can download and drag & drop import it.

have fun!

mario

[TW Tones]

I think what you are missing is in reality transclude is really only the text field not any other properties of the tiddler.

You could emulate this by making it the current tiddler and using that to display content.

Regards

Tony

[sin...@gmail.com]

Thank you for the helpful answers, now at least I know what I am missing!

What I actually wanted to do is unfortunately more complicated than that. I am using a plugin (Streams - https://saqimtiaz.github.io/sq-tw/streams.html) that uses a lot of transclusions, and I wanted to style the transcluded tiddlers based on a field (therefore the link to the docs). I did not want to use transclusion with templates because the transclusion happens inside the plugin  I did not want to mess up with the plugin's code. 

Thanks again for all the answers, if anybody has any other ideas, it would be great! :-) But it was already helpful to know what was wrong with my thinking!

Best, 

Valeria

[Saq Imtiaz]

Attached is a customized template for Streams that adds a data-node-title attribute to each node, where the value of the attribute is the title of the transcluded tiddler.

Note that the attribute is called data-node-title and not data-tiddler-title.

If this is helpful and you can explain how you are using it and towards what end, I can consider adding this to the plugin.

Saq

[sin...@gmail.com]

Wow, it must be Christmas! 😀

Thank you for the code (works like a charm!) and even more, thank you for developing the plugin. It is amazing! :-)

I don't think what I wanted to do is of useful to other people, but if you curious: I wanted to change the color of the bullets fast by dragging it into a color palette like this one here:  https://tiddlywiki.com/static/DroppableWidget.html

Maybe something that could be generally useful is to have the possibility of using a custom template to display the nodes (but I am not even sure what I'm saying makes sense). I am also looking forward to the "deep" copy and transclusion.

But your plugin is already awesome! A good outliner tool was something that was missing for Tiddlywiki and now it is not missing anymore 😊

Best, 

Valeria

[amreus]

Mario. This is the greatest example, thanks.

I've made a similar example here.

In short this is customizing the view of a tiddler's fields via a template, and applying a style based on the tiddler's tags. Elegant and powerful 

Internally I have been using the terms "inline template" or (borrowing from Ruby on Rails)  "partial" template because the template is showing just a part of the tiddler. I'm not sure if that's a helpful way to think of it.

But thanks again for the example.

[PMario]

On Sunday, September 13, 2020 at 3:20:50 PM UTC+2, amreus wrote:

Mario. This is the greatest example, thanks.

Cool that you liked it :) It's always a pleasure to see, that other users take those examples and use them in new ways!

 

I've made a similar example here.

Thanks for sharing it!

 

In short this is customizing the view of a tiddler's fields via a template, and applying a style based on the tiddler's tags. Elegant and powerful 

That's right. TiddlyWiki offers a lot of powerful utilities. ... That's what I like!

 

-mario