A Notebox Example ii: A Little More WikText and CSS

Tips & Tricks
,
#1

If you like Use RGB with Alpha Channel in TiddlyWiki: A Notebox Example - Tips & Tricks - Talk TW, then the below example shows an improved version of notebox in Tiddlywiki.

With light palettes

img_251_msedge
img_251_msedge774×745 29.3 KB

With dark palettes

img_252_msedge
img_252_msedge765×740 29.1 KB

To give a try

  1. Download kk-notebox-bundle.json (4.7 KB)
  2. Open https://tiddlywiki.com and drag and drop kk-notebox-bundle.json from step 1
  3. Open Test Note Box
  4. Change the color palettes in TiddlyWiki and see how it works with dark/light palettes.

Remarks

  • The stylesheet is a dynamic one
  • The background and foreground colors of textbox is determined from the color-scheme field of palette in use
  • The svg icons are provided using simple macros (you can change them)
  • The main macro (note) is similar to Shiraz alert, so if you are familiar with Shiraz, using note is quite simple.

Reference

Edited: See @tw-FRed hack below for simplifying macro call and creating custom notebox on top of the note.

5 Likes
#2

Hi @Mohammad

Thanks for sharing :slightly_smiling_face:
I like the look of these notes very much, and I find the way you embedded the icons as macros very inspiring!

May I suggest to change the order of the note macro parameters like this:

\define note(src:"", title:"Note", type:"info" )

Then, one could use it with default title and/or default icon like this:

<<note """My quick note with only 1 parameter""">>
<<note """A quick tip...""" "Tip of the day">>

I often reuse your code examples, and I like to add some specialized macros dedicated to a subset of the original macro capacities:

\define wnote(src:"" title:"WARNING")
<$macrocall $name="note" src=<<__src__>> type="warning" title=<<__title__>>/>
\end

And use them like this:

<<wnote """Your attention please!""">>
<<wnote """Watch out!""" "DANGER">>

Fred

1 Like
#3

Hi Fred,
Thank you for comments. Yes, the main input parameter here is the src or the content, so it makes sense to change the header as you proposed.
I just followed the Shiraz alert boxes.

I like your wnote, this way one can have several macros with one parameter like inote, qnote, …