non-tiddlywiki look-and-feel for tiddlywiki

[Michael Mahemoff]

I just wrote about a little experiment I made:
http://mini.softwareas.com/silly-video-portal-an-experiment-using-tiddly

The experiment is here:
http://tiddlywiki.mahemoff.com/video.html

The point is to explore how one can make tiddlywiki's that look like
tiddlywiki - basically, how do you make a TiddlyWiki wth your own HTML
and CSS. I'd welcome any feedback and examples of similar efforts.
Cecily is one such effort, although I don't think it uses the theme
mechanism.

I think it would be interesting to build some common components here,
e.g. a plugin to hijack swtichTheme(), applying an optional CSS reset.

[Eric Shulman]

> I think it would be interesting to build some common components here,
> e.g. a plugin to hijack swtichTheme(), applying an optional CSS reset.

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

* renders a droplist of themes, and/or individual 'switch to theme'
links to quickly switch to any theme
* adds 'randomize' feature to pick a theme for you (unless tagged with
'excludeTheme'), as well as a 'random theme on startup' option
checkbox.
* extends theme handling via "Check", "Init", and "Reset" slices that
provide hooks for the key theme switching events, so custom javascript
code can be bound to specific themes without writing additional core
hijacks.

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios

[Eric Shulman]

> The point is to explore how one can make tiddlywiki's that don't look like

> tiddlywiki - basically, how do you make a TiddlyWiki wth your own HTML
> and CSS.

Rather than eliminating some of the underlying elements, it's easy
enough to simply hide them (and leave the default shadow content in
place). This allows any assumptions about key TW DOM elements to be
preserved, even though those elements will not be visible.

For example, this theme:
http://www.TiddlyTools.com/#TotallyTiddlers
hides all elements except for the tiddler content itself. No header,
no sidebars, no tiddler titles, and no tiddler toolbar. All
navigation is assumed to be done via links from tiddler to tiddler.

Combined with SinglePageModePlugin, the above theme lets you create a
complete presentation that looks entirely unlike a TW document.

> Cecily is one such effort, although I don't think it uses the theme
> mechanism.

http://www.TiddlyTools.com/quickstart/moveable.html
uses two plugins (MoveablePanelPlugin and PanelManagerPlugin) to
provide a Cecily-like 'windowed' display (without the 'zooming'
ability) defined by custom templates and stylesheets applied on top of
a standard TW document.

Although it's not set up for theme switching, you can use the 'dock
all panels' command from the PanelManager popup menu to return all
elements to their default locations and appearances (while retaining
their 'moveability').

Of course, because the moveable.html layout is based on templates/
stylesheets, it should be a very simple matter to add theme switching
to the mix (using SwitchThemePlugin), allowing for multiple
alternatives, including the standard TW layout.

enjoy,
-e

[Paul Downey]

G'Day Mike!

> I'd welcome any feedback and examples of similar efforts.
> Cecily is one such effort, although I don't think it uses the theme
> mechanism.

TiddlyPocketBook uses a theme to present a constrained TiddlyWiki, but
it's still a TiddlyWiki. What's missing here is I'd like to be able to
select a PrintStyleSheet for different paper sizes:

http://tiddlypocketbook.com

TiddlyResume uses a theme to change the way the resume (the
tiddlerDisplay) is styled:

http://tiddlyresume.com

This uses a small plugin to force a refresh on a theme switch:

http://whatfettle.com/2008/07/ThemeSwitchRefreshPlugin/

We used a theme to switch to flip between author an presenter modes in
TiddlySlidy using:

http://whatfettle.com/2008/07/ThemeButtonPlugin/

which I've expanded with "mini-themes" for styling individual slides:

http://whatfettle.com/2008/07/ThemedTiddlerPlugin/

This is still very much a work in progress:

http://tiddlyslidy.com

> I think it would be interesting to build some common components here,
> e.g. a plugin to hijack swtichTheme(), applying an optional CSS reset.

Maybe a "reset" stylesheet would be good enough to add to a StyleSheet
tiddler, but I think you're also asking for a theme to be able to
assert the whole page's HTML, not just the PageTemplate? That could be
a small plugin, for people who really know what they're doing.

However, I guess I need to better understand the issue, but whilst it
might be nice to clear out all TiddlyWiki-shness when styling the
non-TiddlyWiki view for an application such as scrumptious, the value
for me of such verticals is when you lift the covers and see it's just
a tiddlerDisplay with tiddlers restyled.

--
Paul (psd)
http://blog.whatfettle.com

[Michael Mahemoff]

On Sat, Dec 19, 2009 at 9:17 PM, Eric Shulman <elsd...@gmail.com> wrote:
>> The point is to explore how one can make tiddlywiki's that don't look like
>> tiddlywiki - basically, how do you make a TiddlyWiki wth your own HTML
>> and CSS.
>
> Rather than eliminating some of the underlying elements, it's easy
> enough to simply hide them (and leave the default shadow content in
> place).  This allows any assumptions about key TW DOM elements to be
> preserved, even though those elements will not be visible.
>
> For example, this theme:
>   http://www.TiddlyTools.com/#TotallyTiddlers
> hides all elements except for the tiddler content itself.  No header,
> no sidebars, no tiddler titles, and no tiddler toolbar.  All
> navigation is assumed to be done via links from tiddler to tiddler.
>

Representing the whole page as a tiddler is an interesting idea, I'll
have to try it out and think over the implications. Is there a
standalone demo for that plugin?

One interesting issues is that it still leaves the issue of resetting
CSS and indeed, might make the reset effort slightly more work as more
specific rules apply to the tiddler in addition to the overall
document.

> Combined with SinglePageModePlugin, the above theme lets you create a
> complete presentation that looks entirely unlike a TW document.
>
>> Cecily is one such effort, although I don't think it uses the theme
>> mechanism.
>
>   http://www.TiddlyTools.com/quickstart/moveable.html
> uses two plugins (MoveablePanelPlugin and PanelManagerPlugin) to
> provide a Cecily-like 'windowed' display (without the 'zooming'
> ability) defined by custom templates and stylesheets applied on top of
> a standard TW document.
>
> Although it's not set up for theme switching, you can use the 'dock
> all panels' command from the PanelManager popup menu to return all
> elements to their default locations and appearances (while retaining
> their 'moveability').
>
> Of course, because the moveable.html layout is based on templates/
> stylesheets, it should be a very simple matter to add theme switching
> to the mix (using SwitchThemePlugin), allowing for multiple
> alternatives, including the standard TW layout.

Thanks Eric - Cecily like panning (and zooming) is another interesting
option for representing the flip between a custom UI and a standard
tiddlywiki.

[FND]

> a "reset" stylesheet

Since TiddlyWiki defines a fairly large number of rule sets with varying
specificity, this might become very tricky.
The easiest approach would be to blank the StyleSheet* shadow tiddlers
with a simple plugin:
config.shadowTiddlers.StyleSheetColors = "";
config.shadowTiddlers.StyleSheetLayout = "";
config.shadowTiddlers.StyleSheetLocale = "";
config.shadowTiddlers.StyleSheetPrint = "";

> the value for me of such verticals is when you lift the covers and
> see it's just a tiddlerDisplay with tiddlers restyled

Agreed.
Obviously the above approach doesn't play very well with
theme-switching. However, it should be possible to hook into that
mechanism to restore default styles.

-- F.

[Michael Mahemoff]

On Sun, Dec 20, 2009 at 7:27 PM, FND <FN...@gmx.net> wrote:
>> a "reset" stylesheet
>
> Since TiddlyWiki defines a fairly large number of rule sets with varying
> specificity, this might become very tricky.
> The easiest approach would be to blank the StyleSheet* shadow tiddlers
> with a simple plugin:
>     config.shadowTiddlers.StyleSheetColors = "";
>     config.shadowTiddlers.StyleSheetLayout = "";
>     config.shadowTiddlers.StyleSheetLocale = "";
>     config.shadowTiddlers.StyleSheetPrint = "";
>

Thanks Fred - that's not quite the approach I'm looking for though,
because I don't want to do away with TiddlyWiki. Which takes me to ...

>> the value for me of such verticals is when you lift the covers and
>> see it's just a tiddlerDisplay with tiddlers restyled

Absolutely agree Paul - as mentioned in the linked blog post, I am
more interested in flipping between a custom UI and an underlying
TiddlyWiki, which I see as the TW equivalent of Rails' scaffolding or
naked objects.

As far as resetting stylesheet, I've thought further and experimented,
and I realise the solution is a lot simpler: just remove all <style>
elements. It works in all browsers, with some minor IE headaches that
I think can be overcome. I haven't tried it with TiddlyWiki, but it
should be straightforward.

[FND]

> As far as resetting stylesheet, I've thought further and
> experimented, and I realise the solution is a lot simpler: just
> remove all <style> elements.

I like!
However, doesn't this pose a similar problem to temporarily blanking the
StyleSheet* shadow tiddlers, since you have to re-enable those elements
when switching to a regular theme?

-- F.

[Michael Mahemoff]

Yes, you'd have to save them before you blat them.

[Michael Mahemoff]

I've done a more fleshed-out proof-of-concept for this now:

http://trail.scrumptious.tv/TrailPlayer.html

explained in a rambling post here:

http://mini.softwareas.com/trails-player-in-tiddlywiki

[Måns]

Hi Michael

These are very beautiful and effective verticals and proof of concept
btw..
Can ordinary users (like myself, - endusers on the TiddlyWiki group)
hope to see an overlay/trails-plugin to use with a standard TiddlyWiki
in a not to far away future? - I'd love to use trailplayer with
comments even if it's not for a serverside multiuser environment - it
would be great for tutorials and almost any educational setting.
The idea of using TW doing the administrative stuff in the background
is very appealing.
First time I saw this kind of approach was Bidix's News vertical,
where he uses 3 different themes: Reader, Author and Default...

Regards Måns Mårtensson

[Michael Mahemoff]

On Sun, Jan 10, 2010 at 12:01 AM, Måns <huma...@gmail.com> wrote:
> Hi Michael
>
> These are very beautiful and effective verticals and proof of concept
> btw..
> Can ordinary users (like myself, - endusers on the TiddlyWiki group)
> hope to see an overlay/trails-plugin to use with a standard TiddlyWiki
> in a not to far away future? - I'd love to use trailplayer with
> comments even if it's not for a serverside multiuser environment - it
> would be great for tutorials and almost any educational setting.
> The idea of using TW doing the administrative stuff in the background
> is very appealing.

Thanks Måns. It's certainly the plan that you'll be able to do that in
a multi-user environment as well a standalone TiddlyWiki. Indeed, it's
already working in a standard TiddlyWiki; it's just three plugins
(Overlay for the general overlay mechanism; TrailPlugin for the trail
data structure and TiddlyWiki UI; and TrailPlayer building on those
two for the player UI). The TiddlyWiki and player UIs still need to be
fleshed out though, and I'll build a vertical to wrap everything
together.

I definitely plan to embed the comments plugin, at first into the
TiddlyWiki interface and eventually into the player too.

> First time I saw this kind of approach was Bidix's News vertical,
> where he uses 3 different themes: Reader, Author and Default...

I'm glad to hear it as I've struggled to find examples for this kind
of thing. (I think Cecily is somewhat another example.)