Buttons to toggle between two stylesheets?

[David Gifford]

Hi all

I am seeing I need to have two stylesheets, one for publishing on the web and one for printing.

I would like to click on a web button to add the stylesheet tag to the webcss tiddler and remove it from the printcss tiddler, and another button to do the opposite. Of course tiddlywiki.com did not have an easy example, and a search in Google docs only turned up one that requires four buttons!

Any ideas? This should be basic documentation. Blessings, Dave

[Birthe C]

Hi David,

For adding and removing tag $:/tags/Stylesheet I think you can follow the examples https://tiddlywiki.com/#FieldMangler%20Widget%20(Examples)

 

Birthe

[Mark S.]

Since Birthe was able to find examples, and since I needed a stylesheet swapper to work with Hubert's

suggested CSS for fonts, I came up with the attached.

You just specify the two stylesheets that you want to swap between

<<swapper StyleSheet-Edit-Normal StyleSheet-Edit-Large>>

and it gives you a button accordingly. If you have two buttons, that means you currently

have two sheets tagged as stylesheets. Just pick the button that you want to enforce.

[David Gifford]

Thanks Birthe and Mark! Got it working.

Dave

[Surya]

Funny,

just 3 days before asked the same question...

That's exactly what I am looking for :-)

I tried it: When I click the button it switches the style :-)

But then the button is not visible anymore.

I tried it on my wiki but also on an empty wiki (Version 5.1.21), freshly downloaded.

The code:

\define SwapActiveStyle(style1,style2)
<$fieldmangler tiddler="$style1$">
<$action-sendmessage $message="tm-add-tag" $param="$:/tags/Stylesheet"/>
</$fieldmangler>
<$fieldmangler tiddler="$style2$">
<$action-sendmessage $message="tm-remove-tag" $param="$:/tags/Stylesheet"/>
</$fieldmangler>
\end

\define swapper(style1,style2)
<$vars sheet="$:/tags/Stylesheet">
<$list filter="[[$style1$]tag<sheet>]">
<$button><$text text="""<"""/>
<<SwapActiveStyle """$style2$""" """$style1$""">>
</$button>
</$list>
<$list filter="[[$style2$]tag<sheet>]">
<$button><$text text=""">"""/>
<<SwapActiveStyle """$style1$""" """$style2$""">>
</$button>
</$list>
</$vars>
\end

<<swapper $style1$ $style2$>>

Why does it disappear, what am I doing wrong?

Thanks for your help!

Surya

[Mark S.]

May I see how you are invoking your style changes?

Also, is there anything in your stylesheets that might hide a button? So that when

you change the style, you also hide the button that will bring it back?

It might help if you post your stylesheets.

Good luck!

[Mark S.]

Never mind. I just read to the bottom of your code. When you invoke the macro, you need to specify your two stylesheets. Like

<<swapper "MyFavoriteStyleSheet" "MyNotFavoriteStyleSheet">>

In your example, you're trying to invoke the variables $style1$ and $style2$. I don't understand that.

Good luck!

[Surya]

Hi Mark,

now it works :-) And: It works and looks fantastic- that was exactly my dream :-)

Why I wrote it like before: I thought The <$fieldmangler tiddler="$style1$"> means, that I have to title the Stylesheet-tiddlers like that.

Surya

[Mohammad]

Added to TW-Scripts.

[pedruchini]

Hi all

Here is the method I use:

I have two stylesheets:

• One for a "dark mode" → $:/DARK
• Another one for a "sepia mode" → $:/SEPIA

In the sidebar tab more > system $:/SEPIA must be placed after $:/DARK. Then, in a tiddler, ...

<$radio  tiddler="$:/SEPIA" field="tags" value="">dark mode</$radio>

<$radio  tiddler="$:/SEPIA" field="tags" value="$:/tags/Stylesheet">sepia mode</$radio>

2 Questions:

1. This method works for me for two stylesheets but I don't know how to add a third stylesheet.

2. In both methods (this one and Mark's StyleSwapper), how can I get rid of the annoying message: "This page is asking you to confirm that you want to leave: data you have entered may not be saved".