Style change with macro/variable

[Marcus]

Hi everybody.

I like to change the colors with a button.

I tried for example:

\define color(name:"red") $name$


@@.tc-tiddler-frame
@@background-color:<<color>>;
@@width:800px;
text text
@@

and also this:

@@.tc-tiddler-frame
@@background-color:<$macrocall $name="color"/>;
@@width:800px;
text text
@@
 

But this doesn't work.
Is there any idea?


By the way: is there also an idea how I can change the the font with a button?

Thanks in advance.

[BJ]

you can switch a style defintion:

<$reveal type="nomatch" state="$:/state/1" text="show">

<$button set="$:/state/1" setTo="show">to green </$button>
<style>
.background {
background-color:red;
</style>
</$reveal>
<$reveal type="match" state="$:/state/1" text="show">

<$button set="$:/state/1" setTo="hide">to red</$button>
<style>
.background {
background-color:green;
</style>


</$reveal>


@@.tc-tiddler-frame
@@.background

@@width:800px;
text text

@@

@@
@@

all the best

BJ

[Marcus]

Hi, thanks a lot for your answer.
I modified it with <$select> and it worked well with all tiddlers, as long as the tiddler with the code is open.
Here my example for changing the tiddler-frame-color, font and fontsize:

Color change:
<$select tiddler='$:/temp/tag2'>
<option value='lightblue'>lightblue</option>
<option value='rgb(137, 243, 183)'>lightgreen</option>
<option value='lightgrey'>lightgrey</option>
<option value='white'>white</option>
</$select>

<style>
.background {
background-color:{{$:/temp/tag2}};
</style>


Font change:
<$select tiddler='$:/temp/tagfont'>
<option value='Arial'>Standard</option>
<option value='Times New Roman'>Times</option>
</$select>

<style>
 body {font-family: {{$:/temp/tagfont}}}
</style>

Fontsize change:
<$select tiddler='$:/temp/tagfontsize'>
<option value='12px'>sehr klein</option>
<option value='16px'>klein</option>
<option value='20px'>mittel</option>
<option value='25px'>groß</option>
</$select>

<style>
p { font-size: {{$:/temp/tagfontsize}} }
</style>



Best regards

[coda coder]

Marcus,

Quote: To make a macro available to all tiddlers, define it in a tiddler that has the tag $:/tags/Macro

More here:  https://tiddlywiki.com/#Macro%20Definitions%20in%20WikiText

[Eric Shulman]

On Wednesday, December 27, 2017 at 1:31:16 PM UTC-8, coda coder wrote:

Quote: To make a macro available to all tiddlers, define it in a tiddler that has the tag $:/tags/Macro
More here:  https://tiddlywiki.com/#Macro%20Definitions%20in%20WikiText

That only applies to *macro definitions* (i.e., variables).  This is because $:/core/ui/PageTemplate contains this line:

<$importvariables filter="[[$:/core/ui/PageMacros]] [all[shadows+tiddlers]tag[$:/tags/Macro]!has[draft.of]]">

which references "...[tag[$/Tags/Macro]...", which explicitly pulls in macro definitions from tiddlers tagged that way.

To set global *styles*, there is a different tag to use: "$:/tags/Stylesheet"

To properly achieve your desired result:

1) Create a stylesheet tiddler (e.g., "MyStyles") and tag it with "$:/tags/Stylesheet".  Note that this tiddler should NOT have the "<style>" and "</style> HTML syntax nor any other non-CSS content (i.e, NO <$select> widgets)...  just the CSS declarations by themselves, like this:

.tc-tiddler-frame { background-color:{{$:/temp/tag2}}; }

body {font-family: {{$:/temp/tagfont}}}

p { font-size: {{$:/temp/tagfontsize}} }

Note: in your posted style definitions, you used ".background" as a classname.  However, the actual classname to use to control the tiddler background color is .tc-tiddler-frame (which you correctly referenced in your original post)

Next, put the <$select> widgets into another tiddler (e.g., "SetMyStyles"), like this:

Color change:
<$select tiddler='$:/temp/tag2'>
<option value='lightblue'>lightblue</option>
<option value='rgb(137, 243, 183)'>lightgreen</option>
<option value='lightgrey'>lightgrey</option>
<option value='white'>white</option>
<

/$select>

Font change:
<$select tiddler='$:/

temp/tagfont'>
<option value='Arial'>Standard</option>
<option value='Times New Roman'>Times</option>
</$select>

Fontsize change:
<$select tiddler='$:/temp/tagfontsize'>
<option value='12px'>sehr klein</option>
<option value='16px'>klein</option>
<option value='20px'>mittel</option>
<option value='25px'>groß</option>
</$select>

When you view that tiddler and make your selections from the droplist controls that are shown, your choices are stored in "$:/temp/..." tiddlers containing the desired CSS attribute values, which are then automatically referenced from the stylesheet you created.  Note that these choices will persist even when the tiddler containing the <$select> widgets is not displayed since the values you choose are stored separately.

Q.E.D.

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[Marcus]

Hi Eric,

thanks a lot, that is great and works 100%.