TW quick change stylesheets

[skye riquelme]

 Hi Again....been quietly lurking here for some time. Still playing with  the old TW

And cant figure out how to quickly swap stylesheets.

For example, PageTemplate creates an element (say smallMenu), that StyleSheet defines (color, position, size, borders....).....now I want to be able make it visible or hidden. Soa link might hit a tiddler that defines "#smallMenu{visibility:visible;}" so that the contents of the associated tiddler (SmallMenu) becomes visible. Another link triggers a tiddler which includes "#smallMenu {visibility:hidden;}"...and the smallMenu div disappears...

Cant get it to work though!!!! How to do this?

Thanks
Skye

[skye riquelme]

Hi Again.....no reply...guess my question was not sufficiently clear....

I want to be able to dynamically change the StyleSheet....the idea is turn on and off )their visibility) varios divs.....

Let me give some examples of what I have tried...-

the StyleSheet defines #smallMenu {...colors, borders, position and "background-color:transparente;" and the includes [[tiddlerNo]]
and in tiddlerNo the script -
<script>var css="#smallMenu {background-color:red;}";
return css;
</script>........... so that the StyleSheet should turn smallMenu red.....

alternatively I tried...
in the StyleSheet
<<wikify {{"<<tiddler Red>"+">"}}>> .... where tiddler Red contains the text...#smallMenu {background-color:red;}... again hoping that the StyleSheet turns the smallmenu div red.

Neither of these options worked?

Whats the right way to do this?

Thanks in advance
Skye

[Leo Staley]

Wish I could help. I'm just a novice end user myself, and this sounds like a very interesting idea. I might recommend http://paintr.tiddlyspace.com and see  if that can do what you're trying to do.

Cheers!
-Leo

[PMario]

You could use the SelectThemePlugin [1] from MPTW Monkey Pirate TiddlyWiki.

It uses "theme tiddlers" that are tagged systemTheme and look like this.
eg:
tiddler: MyTheme
tag: systemTheme

|Name|MyTheme|
|Description|Some description about the theme. |
|ViewTemplate|ViewTemplate|
|EditTemplate|EditTemplate|
|PageTemplate|##PageTemplate|
|StyleSheet|##StyleSheet|

!PageTemplate
<!--{{{--->

your page template comes here.

<!--}}}--->

!StyleSheet
/*{{{*/

/* theme specific CSS definitions. Global changes should be done in the StyleShee tiddler */


[[StyleSheet]]   /* this line calls the user defined StyleSheet, which should contain global changes. */
/*}}}*/


Have a look at: http://mptw.tiddlyspot.com  and search for "theme" there.

have fun!
mario

[1] http://mptw.tiddlyspot.com/#SelectThemePlugin

[PMario]

I forgot:

in a tiddler eg: zzConfig    tagged: systemConfig
add the following line to automatically activate your theme.

//{{{

config.options.txtTheme = 'MyTheme';
//}}}

-m

[skye riquelme]

Hi Again

Thanks PMario for the help....it almost gets to what I want.

With SelectThemePlugin......setting config.options,txtTheme at opening the TW (xxConfig) sets the default theme. With the Plugin I can use <<applyTheme otherTheme>> to create a button which will switch to the definition contained in "otherTheme".

But I want is that these theme changes happen as a result of javascript commands, not user selecting a button. For example a user clicks a link that opens a wide iframe to read a document...so the javascript under that click needs to activate the "wideIframe" theme, and them open the selected document. Later the user may select a research topic, so the javascript opens the "researchTheme" (which has a main topic and a side list of references) and then opens the selected topic....etc.

I have tried a few vaiations on
<script>config.options.txtTheme="researchTheme";story.refreshAll();</script>.... ou.refreshDisplay()......but cant trigger the theme switch.

Any ideas on how to trigger theme changes from inside javascript?

Thanks in Advance

Skye


Em quinta-feira, 6 de março de 2014 20h54min15s UTC-3, skye riquelme escreveu:

[Eric Shulman]

On Friday, March 14, 2014 8:01:56 PM UTC-7, skye riquelme wrote:

But I want is that these theme changes happen as a result of javascript commands, not user selecting a button. For example a user clicks a link that opens a wide iframe to read a document...so the javascript under that click needs to activate the "wideIframe" theme, and them open the selected document. Later the user may select a research topic, so the javascript opens the "researchTheme" (which has a main topic and a side list of references) and then opens the selected topic....etc.

Even without any plugin, you can use the TWCore function, story.switchTheme(), to set the theme AND automatically trigger a refresh:

   <script>story.switchTheme("NameOfTheme");</script>

enjoy,

-e

Eric Shulman

TiddlyTools / ELS Design Studios

YOUR DONATIONS ARE VERY IMPORTANT!

HELP ME TO HELP YOU - MAKE A CONTRIBUTION TO MY "TIP JAR"...

   http://TiddlyTools.github.com/fundraising.html#MakeADonation

Professional TiddlyWiki Consulting Services...

Analysis, Design, and Custom Solutions:

   http://www.TiddlyTools.com/#Contact

[Anton Aylward]

That sounds more like Eric's "slider"
http://www.tiddlytools.com/#NestedSlidersPluginInfo

On Thursday, March 6, 2014 6:54:15 PM UTC-5, skye riquelme wrote:

 

   [...] For example, [..." so that the contents of the associated tiddler (SmallMenu) becomes visible.

[skye riquelme]

Thanks Eric...thats it!!!!!  I didnt know of the stiory.swithTheme class....eactly what I was trying to do...and it exists already!!!!! Now to have some fun.

Thanks

Skye

Em quinta-feira, 6 de março de 2014 20h54min15s UTC-3, skye riquelme escreveu:

[skye riquelme]

Hi Again
...OK, thats to Erics explanation of the story.switchTheme class, I have been having fun presenting information in different themes on my education site....BUT...when the TW loads there is no theme set...so the page is strangely disformed.....until I ht one of the links that includes a theme switch command.

SO, how to define a default, inicial theme?

I have tried putting something like <script>story.switchTheme("smallMenu")..... in the default tiddler...but it does not activate the smallMenu theme....
In the default tiddler I tried including <<tiddler ZZZ>> where tiddler ZZZ contains the switchTheme command...and again it doesn't activate...

How to set the default theme, that shows on newly opening the TW?

Thanks
Skye

[Eric Shulman]

On Wednesday, March 19, 2014 5:28:01 PM UTC-7, skye riquelme wrote:

How to set the default theme, that shows on newly opening the TW?

Three methods:

1) use <<option txtTheme>> to set the theme interactively.  The setting is saved in a browser-based cookie

OR

2) create a tiddler, tagged with systemConfig, containing:

   config.options.txtTheme="NameOfTheme";

OR

3) use a URL param like this: .../twfilename.html#txtTheme:NameOfTheme

notes:

* method (1) does not set the *initial* default theme, but once set, it will be applied in later sessions automatically, assuming that your browser stores local cookie values (some browsers do not).

* method (2) sets the theme during startup, and will always use the same theme, regardless of any alternative theme chosen later

* method (3) overrides any stored cookie value for txtTheme, but only for the current session.  It does not alter the stored cookie value and, if the URL param is later  omitted, the previously stored cookie value (if any) is applied.

[PMario]

https://groups.google.com/d/msg/tiddlywiki/ye0PPhcNrkU/vo9OpDZ8HLkJ
-m

[skye riquelme]

Sorry Guys...I am obviously missing something very basic, cos I cant get it to work.....

firstly ..I understood from Erics response that I dont need the SwitchThemePlugin installed, I can do it with javascript...right?

in that case.....I have a tiddler named "setSmallMenu"....which contains the code -
/***
|Name|setSmallMenu|
|StyleSheet|setSmallMenu|
***/
[[StyleSheet]]
/*{{{*/
#wideMenu {visibility:hidden;}
#leftMenu {visibility:hidden;}
#rightMenu {visibility:hidden;}
#smallMenu {visibility:visible;}
#bottomMenu {visibility:hidden;}
#displayArea {width:1000px;left:50px;}
/*}}}*/
...and is tagged systemTheme......and I have a tiddler called ZZZ, tagged systemConfig, which reads
//{{{
config.options.txtTheme = 'setSmallTheme';
//}}}...

but on reloading the TW...no theme coding, no CSS just icons and text on a blanck (white) page (my page is colored)...

I am sure it something real obvious....to you guys...

Skye

Em quinta-feira, 20 de março de 2014 16h24min07s UTC-3, PMario escreveu:

https://groups.google.com/d/msg/tiddlywiki/ye0PPhcNrkU/vo9OpDZ8HLkJ
-m

[Eric Shulman]

On Thursday, March 20, 2014 7:20:53 PM UTC-7, skye riquelme wrote:

Sorry Guys...I am obviously missing something very basic, cos I cant get it to work.....

in that case.....I have a tiddler named "setSmallMenu"....which contains the code -

...and is tagged systemTheme......and I have a tiddler called ZZZ, tagged systemConfig, which reads

//{{{
config.options.txtTheme = 'setSmallTheme';
//}}}...

I am sure it something real obvious....to you guys...

"setSmallMenu" vs. "setSmallTheme" ???

(the option value has to match the tiddler title of the theme)

-e

[PMario]

second post. did delete the first one, because of typo.

try this

/***
|Name|setSmallMenu|
|ViewTemplate|ViewTemplate|
|EditTemplate|EditTemplate|
|PageTemplate|PageTemplate|
|StyleSheet|setSmallMenu|
***/

On Friday, March 21, 2014 3:20:53 AM UTC+1, skye riquelme wrote:

firstly ..I understood from Erics response that I dont need the SwitchThemePlugin installed, I can do it with javascript...right?

yes

...and is tagged systemTheme......and I have a tiddler called ZZZ, tagged systemConfig, which reads

systemConfig plugins are started in alphabetical order by the core.
so  uppercase comes before lowercase

that's why I did suggest the name zzConfig. In most TW settings this will be the last plugin, that is started. So settings made there should always win.

-m

[Eric Shulman]

On Friday, March 21, 2014 4:05:27 AM UTC-7, PMario wrote:

/***
|Name|setSmallMenu|
|ViewTemplate|ViewTemplate|
|EditTemplate|EditTemplate|
|PageTemplate|PageTemplate|
|StyleSheet|setSmallMenu|
***/

Theme slices are only needed to specify non-default values.  If a specific slice name is not present in the theme, then story.switchTheme() applies the TWCore defaults (ViewTemplate, EditTemplate, and PageTemplate) so adding these slices will have no net effect.

...and is tagged systemTheme......and I have a tiddler called ZZZ, tagged systemConfig, which reads

systemConfig plugins are started in alphabetical order by the core.
so  uppercase comes before lowercase
that's why I did suggest the name zzConfig. In most TW settings this will be the last plugin, that is started. So settings made there should always win.

The order of processing won't matter unless another plugin is setting config.options.txtTheme as part of it's startup/init code (which is not really all that likely).

-e

[skye riquelme]

 Again!!!

Sorry about the mistyping in the message...the config.options.txtTheme in ZZZ is correct...its "setSmallMenu".....I typed it wrong when I wrote the response...but its correct in the TW.

I have change ZZZ to zzConfig, AND installed SwitchThemePlugin..AND put "config.options.txtTheme="setSmallMenu" in the default tiddler...and still get a white page on start-up.

I also created a tiddler that reports txtTheme..... when I open this....with the page still unformated...it correctly shows "setSmallMenu".....so the cookie is correct, but still the theme does not show.

In my case I am making small changes to the themes......for example "setSmallMenu".... simply sets #smallMenu to visible and hiddens two other "themes"...other than that I am not messing with the basic StyleSheet....yet the whole StyleSheet settings arent being displayed!!!

Thanks
Skye

[Anton Aylward]

On 21/03/14 10:52 AM, skye riquelme wrote:
>
> I have change ZZZ to zzConfig, AND installed SwitchThemePlugin..AND put
> "config.options.txtTheme="setSmallMenu" in the default tiddler...and
> still get a white page on start-up.

As a consultant in another field, I often find myself asking people
"What are you trying to achieve" when they tell me about what they are
trying to DO.

I posted a while back that you should ignore the matter of stylesheets
and do what you are trying to ACHIEVE using sliders.

Go back to your original post and look at what you were asking:

<quote>
... Now I want to be able make it visible or hidden. So a link might hit

a tiddler that defines "#smallMenu{visibility:visible;}" so that the
contents of the associated tiddler (SmallMenu) becomes visible

</quote>

Why not use a slider?

Look at the examples on Eric's page

http://www.tiddlytools.com/#NestedSlidersPluginInfo

and the shorter examples at

http://www.tiddlytools.com/#ToggleSliders

Eric makes use of a much more involved example on his menu in the top
right corner of each of those pages.
Click on any of
goto search file edit view options calendar contents
to see the slider plus a tiddler in action. Take a look 'under the
hood' how he does that.

One of the adages of Larry Wall is "there's more than one way to do
things". If one way doens't work, try another.

--
Whoever is careless with the truth in small matters cannot be trusted
with the important matters.
- Albert Einstein

[skye riquelme]

Hi Anton
Thanks for your comments. I am well aware of sliders and us ethem extensively in my work. However what I am trying to acheive is something very different. Its not just display hide the contents of a tiddler. Depending on a students selection I need to change the format of the page, to suit the way that selection needs to display information and continue reacting with the student. Note that I am not playing with stylesheets to make pretty colorful changes to the appearance, like youth changing the skin on there cellular every second day.

For example, when discussing and planning their projects students need the full width of their display to present the information..... when researching a new topic they need a part page that can display notes and images AND a column display of the previously referenced articles on the relevant topic.....when selecting a new line of study, they are presented with a widish display of options, a "popup" that shows simple definitions of that area (that part could be a slider!!!) AND a column list of relevant references AND a second column of contacts within the course of related researches.....

I cant imagine how sliders can do all that....but simple changes to stylesheets can do it easily....except that the default stylesheet is not displaying when the TW opens,

Thnaks for your suggestion...I hadnt disconsidered it....I just feel you didnt understand what I am actually trying to acheive.

Skye

[Anton Aylward]

On 22/03/14 05:59 PM, skye riquelme wrote:
> I cant imagine how sliders can do all that....but simple changes to
> stylesheets can do it easily....except that the default stylesheet is
> not displaying when the TW opens,

Whereas I can imagine. Without changing stylesheets.

The thing is to have the stylesheet with the transform already there
under a different #ID and then activate it.

Or make the entries conditional, like this

div[tags~="StudentAnswer"].tiddler .viewer {display: visible; }

<<<
I've done something like this in my story writing tiddlywiki when I need
to 'pop-up' the character details and/or append to them
<<<

Then use sliders and the HideWhenPlugin.

The HideWhen is misnamed as it is really "show when".
It is a VERY powerful plugin. VERY!

The other incredibly powerful plug is TagglyTags.
Well, OK, that shifts some of the matter to defined templates, but it
sounds as if you should be using those anyway, with forms and
FormTiddlerPlugin & DataTiddlerPlugin.

I recall Eric also has a plugin which can handle both in-band and
out-of-band notes but I forget its name.

I can see no reason whatever why you should be changing stylehseets.
As far as I can see the limit of what you should be doing is "enabling"
parts of the more comprehensive stylesheet.

As for the rest, there are macros which hides/unhides ("Toggle") the the
sidebar and menubar. If you think about it, the right indent of the
centre panel is defined in the layout stylesheet, so when the right hand
panel vanishes and the centre panel expands to the right, its as if a
new style sheet has been loaded. Only it hasn't. Very ingenious!


--
In organizations, real power and energy is generated through
relationships. The patterns of relationships and the capacities to form
them are more important than tasks, functions, roles, and positions.
-- Margaret Wheatly Leadership and the New Science

[Eric Shulman]

On Saturday, March 22, 2014 2:59:50 PM UTC-7, skye riquelme wrote:

the default stylesheet is not displaying when the TW opens...

Hmm.... I'm not sure why it's not working.  Perhaps you could send me a copy of your document so I can do some direct debugging to see what is happening...

-e

[skye riquelme]

Hi Eric..thanks for that offer...tried to find the problem myself...but still no joy. Actually the offending TW is online at
http://www.unigaia-brasil.org/Ligar/ligarIndex.html - its not known to the public yet, but you can access it directly...I´ve temporarily rmeoved a few of the login checks to make it easier for you to see what is happening...

...for me it still open with a white page, while the default tiddler (Inicial) tries to switchThemes...... to see it formated click on say the green keyhole icon. The tabs are under the cog icon to the left of the header.....

Thanks
Skye

[PMario]

Try this:

/***
|Name|setSmallMenu|
|StyleSheet|##myStyleSheet|
***/
! myStyleSheet
/*{{{*/

[[StyleSheet]]

#wideMenu {visibility:hidden;}
#leftMenu {visibility:hidden;}
#rightMenu {visibility:hidden;}

#smallMenu {visibility:visible;z-index:30;left:500px;}

#bottomMenu {visibility:hidden;}
#displayArea {width:1000px;left:50px;}
/*}}}*/

!

[skye riquelme]

Hi..thankls but I am still getting the inicial white page...cant see why the normal StyleSheet is being ignored!

Skye

[PMario]

Hi Skye,

I did some single step debugging in the code, to see what's going on. ... It seems there are several tiddlers visible at page startup, that define a different theme. ..
If you use inline scripts in tiddlers, those scripts are executed, when the tiddler is rendered. ... So at your page startup, you seem to activate setRightMenu, setSmallMenu, setRightMenu, setSmallMenu (I probably missed one :) ... Which in the end seems to mess it up somehow.

---------
Having a closer look to your themes, I could remember an old experiment. ... I did a similar approach, with TaggedTemplateTweak.
at: http://a-pm-experimental.tiddlyspot.com/#WideViewTemplate%20wide%20TaggedTemplateTweak

My WideViewTemplate contains an <html><style>...  section and then calls the default theme ViewTemplate. ....
The tiddler that triggers the change is http://a-pm-experimental.tiddlyspot.com/#TestWide  ... As long as this tiddler is open, wide is active. .. So every tiddler tagged "wide" will trigger the WideViewTemplate ...

I think tagging a tiddler is simpler, than having an inline script in several tiddlers. .... but If you open 2 tiddlers at the same time, the last one will win or you have strange behaviour.

If you show several of them on startup, it may cause a similar problem, you have already :/ .. But you could run a fast test. ...

have fun!
mario

[skye riquelme]

Hi Again

Humm...now I have lots to think about......

Most importantly...I didnt realize that I can put CSS type code into a ViewTemplate...now that really changes things...and opens lots of possibilities......and I see your idea of using tags makes a lot more sense than how I was doing it.......A whole new ball game.....

You mentioned that you did some "single step debugging" - how, what program?

And I dnt understando yo comment that "I already have :/"..... but that tagged ViewTemplate should solve this issue.

Thanks
Skye

[PMario]

On Sunday, March 30, 2014 11:52:33 PM UTC+2, skye riquelme wrote:

You mentioned that you did some "single step debugging" - how, what program?

Chrome dev tools: source - breakpoint at line 9802  near Story.prototype.switchTheme

second bp at: 9833 ... case "StyleSheet":   ... The right window area: Scope Variables ... should tell you, what's going on.

With the breakpoints set, you should be able to say "run" to see the next loop iteration. So you don't need to single step into the functions. ...

If "run" doesn't work anymore, the progam is loaded, you'll need to do a browser reload, to start debugging again. ...

When you can see, what's going on you could "single step into" every function and dig really deep.

I did avoid the deep dive, because I think testing my approach will be less work :)

And I dnt understando yo comment that "I already have :/"..... but that tagged ViewTemplate should solve this issue.

If you try the tagged template tweak, you can just create 2 tiddlers, that activate 2 different ViewTemplates at the same time. ... If this doesn't mess up your theme, I think you are save. .... but imo the last tiddler rendered will win the race.

have fun!
mario