Keep the CSS style even while Transcluding

[vinvi...@gmail.com]

Hello,

I've modified my styleSheet $:/plugins/kookma/shiraz/styles/ bs/alerts

Part of the CSS style:

/*Was taken from bootstrap 4.1.3*/

.alert {

  position: relative;

  padding: 0.75rem 1.25rem;

  margin-bottom: 1rem;

  border: 1px solid transparent;

  border-radius: 0.25rem;

}

/*BLUE (PRIMARY)*/

[data-tags*="(A)"] .alert- {

  color: #004085;

  background-color: #cce5ff;

  border-color: #b8daff;

}

.alert- hr {

  border-top-color: #9fcdff;

}

/*GREEN (SUCCESS)*/

[data-tags*="(B)"] .alert- {

  color: #155724;

  background-color: #d4edda;

  border-color: #c3e6cb;

}

Works fine, but if I {{Transclude}} or {{||Transclude}} tiddler (B) in Tiddler (A) it automatically reads the tag from Tiddler (A). Which causes it to be misrepresented. (Wrong colors) How can I ensure that the correct colors are retained?

Thank you,

[Mark S.]

The transclusion transcludes the contents of the text field -- it doesn't know anything about the associated tags.

To make it behave as if it were in its original context you would have to wrap with same classes it would have seen in it's original settings:

<$list filter="[tag[(B)]]" >

<div data-tags={{{ [all[current]get[tags]] }}} >

<div class="alert-">

<$transclude />

</div></div>

</$list>

Alternatively, the contents of the original tiddler could wrap themselves in classes in the text. 

<div data-tags="(B)" >

Hello. I am <<currentTiddler>>

</div>

This would require you to write an additional CSS selector rule that would recognize .alert- [attribute selector] as well as the current [attribute selector] .alert .

[data-tags*="(B)"] .alert- , .alert- [data-tags*="(B)"] { ... }

[vinvi...@gmail.com]

Thanks Mark S.,

I've Tiddler1 with tag (B), and the following code in the text-field is displayed correctly:

<$macrocall $name="details" sum="Header title here" src="""

Text here.

""" class="alert-"/>

If I List / Transclude Tiddler1 into Tiddler2 with te following code:

<$list filter="[tag[(B)]]">

<div data-tags={{{ [all[current]get[tags]] }}} >

<div class="alert-">

<$transclude mode="block"/>

</div></div>

</$list>

Then it will not display correctly, only with the correct colors.

(I have added mode="block" which makes it look a little better, but it's still not right.) 

Maybe the other solution you propose will do? 

But it is not completely clear to me. Can you give me some explanation please?

Thank you,

Op woensdag 3 februari 2021 om 19:46:10 UTC+1 schreef Mark S.:

[vinvi...@gmail.com]

I found it .. Thank you, thank you, thank you. Functions perfectly..

Op donderdag 4 februari 2021 om 18:17:12 UTC+1 schreef vinvi...@gmail.com:

[vinvi...@gmail.com]

Hello,

How can I retain the correct colors in this "list-search filter"? :

<<list-search filter:"[all[current]tagging[]]" template:"template/list-search/textfield">>

In textfield of: "template/list-search/textfield" : {{!!text}}

Op donderdag 4 februari 2021 om 18:25:13 UTC+1 schreef vinvi...@gmail.com: