New version of the Notebook theme available

806 views
Skip to first unread message

Nicolas Petton

unread,
Dec 13, 2020, 4:44:28 PM12/13/20
to tiddl...@googlegroups.com
Hi,

I've been working lately on a new version of my Notebook theme.

The theme has evolved quite a bit, and is now available with 2 colour
palettes. While it hasn't reached v1.0 yet, I would consider it stable
enough for general usage.

A demo and installation instructions can be found here:

https://nicolas.petton.fr/tw/notebook.html

If you find a bug or missing feature, contributions are welcome!
The theme is released under MIT, and is hosted on GitHub at

https://github.com/NicolasPetton/notebook

Cheers,
Nico
signature.asc

Mohammad

unread,
Dec 14, 2020, 12:20:43 AM12/14/20
to TiddlyWiki
Hi Nico,

Many thanks for your contribution. Notebook is an amazing theme. The words clean and uncluttered theme best describe it.
On mobile and small screen I think the is the only theme makes TW like an app and its lower menu and action on sidebar item selection is very useful.

Best wishes
Mohammad

Nicolas Petton

unread,
Dec 14, 2020, 4:03:01 AM12/14/20
to Mohammad, TiddlyWiki
Mohammad <mohammad...@gmail.com> writes:

Hi Mohammad,

> Many thanks for your contribution. Notebook is an amazing theme. The words
> clean and uncluttered theme best describe it.
> On mobile and small screen I think the is the only theme makes TW like an
> app and its lower menu and action on sidebar item selection is very
> useful.

Thank you, I'm glad you like it! If you find any issue with it, feel
free to report it.

Cheers,
Nico
signature.asc

odin...@gmail.com

unread,
Dec 14, 2020, 5:08:35 AM12/14/20
to TiddlyWiki
Hi Nicolas!

Thank you for sharing this theme. Your design is really well done. In order for TiddlyWiki to appeal to a wider audience, it is IMO essential to have a clean design available. It is good to see people are working on those designs!

You wrote that it hasn't reached V1.0 yet. What are some things you want to implement/change for a full release?

Op maandag 14 december 2020 om 10:03:01 UTC+1 schreef Nicolas Petton:

odin...@gmail.com

unread,
Dec 14, 2020, 5:21:28 AM12/14/20
to TiddlyWiki
I am running into a problem. I can't seem to import the whole plugin. After importing the plugin, the list of tiddlers are showing in italics. Only $:/core/ui/PageTemplate/sidebar is imported, the rest are missing.

How to recreate: Go to tiddlywiki.com and drag and drop the theme into TiddlyWiki. I also tried this using TiddlyDesktop.


Op maandag 14 december 2020 om 11:08:35 UTC+1 schreef odin...@gmail.com:

Nicolas Petton

unread,
Dec 14, 2020, 8:20:27 AM12/14/20
to odin...@gmail.com, TiddlyWiki
"odin...@gmail.com" <odin...@gmail.com> writes:

> Hi Nicolas!

Hi Odin,


> Thank you for sharing this theme. Your design is really well done. In order
> for TiddlyWiki to appeal to a wider audience, it is IMO essential to have a
> clean design available. It is good to see people are working on those
> designs!

Thanks :)

> You wrote that it hasn't reached V1.0 yet. What are some things you want to
> implement/change for a full release?

Further testing needs to be done. In particular, I haven't tested
Notebook on tablets (or any IOS device). I also have some bugs to fix
for the upcoming TiddlyWiki release.

Cheers,
Nico
signature.asc

Nicolas Petton

unread,
Dec 14, 2020, 8:24:31 AM12/14/20
to odin...@gmail.com, TiddlyWiki
"odin...@gmail.com" <odin...@gmail.com> writes:

Hi Odin,

> I am running into a problem. I can't seem to import the whole plugin. After
> importing the plugin, the list of tiddlers are showing in italics. Only
> $:/core/ui/PageTemplate/sidebar
> <https://tiddlywiki.com/#%24%3A%2Fcore%2Fui%2FPageTemplate%2Fsidebar> is
> imported, the rest are missing.

You're right, something wrong, I'll have a look.

Cheers,
Nico
signature.asc

Michael Arndt

unread,
Dec 14, 2020, 12:07:11 PM12/14/20
to tiddl...@googlegroups.com
Very nice theme, if I find some time I'll take a look how to make it compatible with sq/Stories to have a second column on desktop :) 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/87r1nswmf6.fsf%40petton.fr.

Nicolas Petton

unread,
Dec 14, 2020, 2:47:55 PM12/14/20
to Michael Arndt, tiddl...@googlegroups.com
Michael Arndt <ar...@menedev.de> writes:

> Very nice theme, if I find some time I'll take a look how to make it
> compatible with sq/Stories to have a second column on desktop :)

That would be great!

Nico
signature.asc

Keelan Cook

unread,
Dec 16, 2020, 5:27:02 PM12/16/20
to TiddlyWiki
I was coming here specifically to bring up Saq's Stories and Streams plugins. Glad that's already on the table.

Nicolas, your Notebook theme is probably my favorite for overall style. It looks great. I just wish I could extend to two stories to make it real productive for writing and research. I use TW more for that goal than project management.

Great work!

Keelan

Ibby (parc6502)

unread,
Jan 13, 2021, 8:27:46 PM1/13/21
to TiddlyWiki
Regarding stories compatibility, I was playing around with this today and came up with something. It's pretty hacky, as I don't really understand what I'm doing.

The main thing it's missing is scrolling on the right column. The behaviour I have is that everything will look the same unless there is a tiddler in the second column. Here's the code I used, and I've attached an HTML to demonstrate.
notebookStoriesPluginCompatibility.html

Sapphireslinger

unread,
Jan 14, 2021, 2:14:38 AM1/14/21
to TiddlyWiki
Tried your theme today. I have a tiddler that doesn't get transcluded properly when I tag it into the sidebar.

I have a tiddler titled "Classes" with this content:

1. {{transcluded tiddler}}

2. {{transcuded tiddler 2}}

3. text sentence

4. bullet list

5. student-tab student-tab student-tab student-tab student-tab (this is a horizontal menu) (each tab has further paragraphs along with vertical tab menus within each)

6. list links list

7. a link

1, 2, 3, and 4 lose their formatting in the sidebar, all jumbled together in one paragraph.

5, 6, 7 are fine. The tab menu and all its child(?) transclusions and their tab menus and transclusions as far in as I drill down are rendered perfectly. It's only that area before the first tab menu that doesn't seem to have gotten the mode=block memo. Even the (6) bullet list and (7) link I have up on the first level but AFTER the tab menu renders fine.

Sapphireslinger

unread,
Jan 14, 2021, 2:35:54 AM1/14/21
to TiddlyWiki
Some titles and captions don't make the translation into the sidebar:

1. a transcluded image as part of the caption field
2. a strange character as part of the title field

I have a tiddler titled "Classes"
The caption field reads {{$:/images/fa5/solid/book-reader}} Classes
It shows as "(icon) Classes" in sidebar tabs in Vanilla theme.
But the icon shows as text ... {{$:/images/fa5/solid/book-reader}} Classes ... just like that in the sidebar tab under Notebook theme.

Even worse if I have a special character in the title like

✝️ Bible Study

Its sidebar tab is completely blank under notebook theme. The tab is still clickable but it's blank.

ludwa6

unread,
Jan 14, 2021, 4:30:55 AM1/14/21
to TiddlyWiki
I've got what might be a niche UseCase & related need -but who knows, there's usually others out there with needs not so different, as it happens.

Case is essentially this: I came upon Notebook theme (thanks to @Nico for that) as a solution to the problem of having a minimalist theme for mobile use -via Quine2 app on iPhone in my case- and for such use, the mobile should serve strictly as a productivity tool to support GTD workflow... And this workflow involves focusing primarily on the Projectify UI, with all other distractions filtered out. 

So I've set up MyDashboard tiddler in Projectify to be the sole Default Tiddler that opens on startup or Home, and that puts everything i need (Inbox, Projects and Schedule for today & upcoming) right where i want, with essentially nothing else (in Notebook theme) but Toolbar and Search widget to distract.  Perfect for mobile GTD!

Problem is: My TiddlyDesktop UI is a more complex thing (2 column-display w/ Contents outline is essential) built upon a different theme... And the nature of my work has me making abrupt transitions between desktop and mobile modalities, which results in my opening up a tool very often with the wrong UI for that particular modality. 

SO: What's needed is a theme-switching affordance that is as agile as the context-switching dynamic of my work/life-style.  Drilling down thru Control Panel / Appearance tab/ Theme menu/ Theme select is a PITA on desktop, and an absolute non-starter on mobile.  Ideally, i would have a one-click way to switch from one theme to the other, ideally via nice fat toolbar button.

I don't know enough to be sure, but i'm guessing this would involve some tweak in the theme, which could either be a built-in affordance (if there's enough people besides just me that wants), or else something i could implement in a clone of the theme (? i know how to clone a Palette & have done, but i don't know if the same works for themes) that i might easily maintain.  

Am i barking up the right tree here? and if so, can anyone offer a boost?  :-)

/walt

Nicolas Petton

unread,
Jan 14, 2021, 2:57:57 PM1/14/21
to Sapphireslinger, TiddlyWiki
Sapphireslinger <sapphir...@gmail.com> writes:

Hi!

> Tried your theme today. I have a tiddler that doesn't get transcluded
> properly when I tag it into the sidebar.

Could you try with the newly released v1.3.3?

The sidebar has been improved to use core tiddlers for sections (with
the tag $:/tags/SideBar).

Cheers,
Nico
signature.asc

Nicolas Petton

unread,
Jan 14, 2021, 3:18:46 PM1/14/21
to ludwa6, TiddlyWiki
ludwa6 <wlud...@gmail.com> writes:

Hi!

> SO: What's needed is a theme-switching affordance that is as agile as the
> context-switching dynamic of my work/life-style. Drilling down thru
> Control Panel / Appearance tab/ Theme menu/ Theme select is a PITA on
> desktop, and an absolute non-starter on mobile. Ideally, i would have a
> one-click way to switch from one theme to the other, ideally via nice fat
> toolbar button.

You could try something like the following (admittedly hackish) tiddler
for switching the theme on startup based on the width of the viewport.

I've set the breakpoint to 960px in the example below, and the "desktop"
theme to snowwhite, but you can change those values (do not forget to
set the Type field to "application/javascript").

/*\
title: $:/hacks/startup/setup-mobile-theme.js
type: application/javascript
module-type: startup
\*/

/*global $tw: false */
(function() {
exports.name = "setup-mobile-theme";
exports.platforms = ["browser"];
exports.after = ["startup"];

var mobileTheme = "$:/themes/nico/notebook";
var desktopTheme = "$:/themes/tiddlywiki/snowwhite";

var breakpoint = 960;

exports.startup = function() {
var theme, palette;
if (document.documentElement.clientWidth <= breakpoint) {
theme = mobileTheme;
} else {
theme = desktopTheme;
}

setup(theme);
};

function setup(theme, palette) {
$tw.wiki.addTiddler({title: "$:/theme", text: theme});
}
})();
signature.asc

ludwa6

unread,
Jan 15, 2021, 5:12:41 AM1/15/21
to TiddlyWiki
Brilliant solution, @Nico!  But: how do i get the script to run? 

I copy/pasted this script verbatim- i.e. from /*\ to })(); -into a new tiddler of type:application/javascript, titled "ThemeSwitch"... but i guess that's not going to run by itself unless it gets activated somehow.  Do i need to make that into a system tiddler, or shadow or some such ( all those  $:/_ prefixes on all those "meta" tiddlers are greek to me still :-(

/walt

Maarten

unread,
Jan 15, 2021, 5:51:12 AM1/15/21
to TiddlyWiki
nice work Nico,

in the demo the text of the buttons is very large but when I make the font size smaller the menu becomes unreadable. How can I change the font size of the buttons

Maarten

Nicolas Petton

unread,
Jan 15, 2021, 9:21:54 AM1/15/21
to ludwa6, TiddlyWiki
ludwa6 <wlud...@gmail.com> writes:

> Brilliant solution, @Nico! But: how do i get the script to run?

Save the tiddler as $:/hacks/startup/setup-mobile-theme.js, with the
type field set to application/javascript, and the script should run on
startup.

Cheers,
Nico
signature.asc

Nicolas Petton

unread,
Jan 15, 2021, 9:24:35 AM1/15/21
to Maarten, TiddlyWiki
Maarten <mdr.in...@gmail.com> writes:

Hi Maarten,

> in the demo the text of the buttons is very large but when I make the font
> size smaller the menu becomes unreadable.

Low large, could you post a screenshot? They're supposed to be using the
same font size as the other parts of the page.

Cheers,
Nico
signature.asc

Maarten

unread,
Jan 15, 2021, 11:28:54 AM1/15/21
to TiddlyWiki

default font size:
Screenshot_2021-01-15 Notebook theme — A clean, uncluttered TiddlyWiki theme.png

font size 10px (acceptable button text size but menu becomes quite difficult to read on larger screens):
Screenshot_2021-01-15 Notebook theme — A clean, uncluttered TiddlyWiki theme(1).png

ludwa6

unread,
Jan 15, 2021, 12:58:16 PM1/15/21
to TiddlyWiki
Sounds good,, @NIco -so i renamed that tiddler i'd already created to hold the script you provided (type is application/javascript) with the name:

> $:/hacks/startup/setup-mobile-theme.js

- at first TiddlyDesktop choked on this (wanted to rename it something else), so then i created a file in my text editor to hold the script, tried to save w/ the above name -and my Mac choked on it (substituted a hyphen for the colon)... Still, having nothing else for it, i just imported that file into TiddlyDesktop, which created 3 different $:/import files all having for content just the word "yes"... -It didn't work so i had to throw them out and start over...

Finally i went back to the "ThemeSwitch" tiddler i'd originally created w/ the script, and this time was able to rename as above (no idea why what didn't work before now does)... And now my installation looks correct in the TiddlyDesktop Explorer, with the above named tiddler of type application/javascript and content of the given script, file being nested under/hacks/startup/ ...

Yet: no joy - i'm always getting the same theme (my default: Vanilla basic) on startup, on iPhone as well as desktop.

Is there anything else i can try, anything you might suggest?

/walt

Sylvain Naudin

unread,
Jan 15, 2021, 2:17:49 PM1/15/21
to TiddlyWiki
Hi Walt,

I just try for curiosity Nico hack.
Tested with success if you set module-type: startup correctly in field of tiddler $:/hacks/startup/setup-mobile-theme.js

(add module-type field with startup).


Regards,
Sylvain

Nicolas Petton

unread,
Jan 15, 2021, 4:03:52 PM1/15/21
to Sylvain Naudin, TiddlyWiki
Sylvain Naudin <sil...@gmail.com> writes:

> I just try for curiosity Nico hack.
> Tested with success if you set module-type: startup correctly in field of
> tiddler $:/hacks/startup/setup-mobile-theme.js

Right, I forgot to mention that! Thanks Sylvain :)

Cheers,
Nico
signature.asc

Nicolas Petton

unread,
Jan 15, 2021, 4:05:18 PM1/15/21
to Maarten, TiddlyWiki
Maarten <mdr.in...@gmail.com> writes:

> font size 10px (acceptable button text size but menu becomes quite
> difficult to read on larger screens):

Oh, right, I get it now! You're displaying the toolbar button labels.

I haven't really worked on that yet as I always keep it off, but I just
added to todo for that for the next release.

Cheers,
Nico
signature.asc

ludwa6

unread,
Jan 16, 2021, 1:59:59 AM1/16/21
to TiddlyWiki
Bingo!  That's got it working; thanks a heap, @Sylvain & @Nico.  This is a brilliant solution to the problem of cross-platform usability, IMHO.

Walt

Jon

unread,
Mar 3, 2022, 2:19:38 AM3/3/22
to TiddlyWiki
Hi Nico, 

this is very nice and ideal for a new wiki of mine.

It would be perfect if I could include a background image.

Is that possible? It's not in the theme tweaks - so presumably not?

Regards
Jon

Reply all
Reply to author
Forward
0 new messages