How to set a color that changes based on the palette

#1

I don’t remember where I found this code to put a summary at the top of a tiddler that transcludes the contents of the “summary” field, but I wanted to change the color of the background so that it follows the selected palette.

<$list filter="[all[tiddlers+shadows]is[current]has[summary]]">

@@background-color: <<???>>;

<div>
@@float:left;
''Summary'':
@@
<$transclude field="summary" mode="block">
</div>
@@
</$list>

How can I make it follow the palette? (For example, so that it takes on the color of the current “dropdown-tab-background” color)

1 Like
#2

I saw this in ZTK from @sobjornstad

#3

Try this:

<$wikify name="bg" text=<<colour dropdown-tab-background>>>
<$list filter="[<currentTiddler>has[summary]]">
   <div style.background-color=<<bg>>>
      @@float:left;''Summary'':@@
      <$transclude field="summary" mode="block">
   </div>
</$list>

Notes:

  • The <<colour>> macro looks up the value of the named palette entry. However, to use this value, it needs to be wikified to resolve any indirect references to other palette entries.
  • The filter syntax can be simplified by replacing all[tiddlers+shadows]is[current] with just <currentTiddler>
  • Since your output is contained within an HTML <div> element, you can specify the desired background-color style there, without needing a separate @@ syntax surrounding it.
  • The TWCore supports a special extended HTML style.attribute="value" syntax that let’s you specifiy the value to apply to a particular CSS attribute.

enjoy,
-e

1 Like
#4

May be, I’ll check (if I find where it comes from, I’ll write it because it would bother me not to give credit to whoever it belongs to)

It works, thanks. Thanks also for the explanation, it will be useful to me on other occasions as well