Tiddlywiki and Semantic Colors

122 views
Skip to first unread message

Mohammad

unread,
Feb 9, 2019, 2:31:09 PM2/9/19
to tiddl...@googlegroups.com
Announcement: Semantic Colors
Date: Feb 10th, 2019
Change log: Twenty new colors were added.


Announcement: Semantic Colors
Date: Feb 9th, 2019




Semantic colors

This is a set of CSS to apply colorful theme to individual tiddlers for categorization purpose. One main use case is learning area. For example you can use different colors for different levels of learning like orange for beginners and blue for advanced learners.

It is possible to define different categories like (basics, macros, widgets) and customize the classes for that purpose. For example all tiddlers tagged with macro uses class Clay and all tiddlers tagged with widget uses class Yale.

Mechanism

The mechanism used here is based on custom styles by data tags. The styles for specified tags defined in tiddlers tagged themselves with $:/tags/Stylesheet. Each tiddler is tagged with such those specified tags will get the customization.

Contents

This wiki contains three groups of semantic colors:

  1. Border Colors
  2. Dark Colors
  3. Light Colors

You can use any approach you like. They colorize partially the left side of tiddlers. The border colors group only apply colors to left border.

Demo

For demonstration, from sidebar, open Contents tab and click on each group you like. You can then open sample cases and see how they look like.

Customization

You can edit the stylesheets (see the installation below) and changes the tags name to meet your requirements. For example concepts, basics, developers, ...

Installation

To install each set, simply drag and drop the stylesheet tiddler into your wiki



Cheers
Mohammad 

HansWobbe

unread,
Feb 9, 2019, 2:37:30 PM2/9/19
to TiddlyWiki
Very nice!  Thanks for sharing.

Regards,

Hans

PMario

unread,
Feb 9, 2019, 5:57:48 PM2/9/19
to TiddlyWiki
Hi Mohammad,

I'd be ok with this example, but with the colours "toned down" a little bit. The other examples are way to aggressive for my taste.

just my 2 cents

have fun!
mario

Dave Gifford - http://www.giffmex.org/

unread,
Feb 9, 2019, 7:27:29 PM2/9/19
to TiddlyWiki
Nice! Added to Toolmap in the "Layout/UI - Tiddler modifications" category

Mohammad

unread,
Feb 10, 2019, 5:27:56 AM2/10/19
to TiddlyWiki
Hans, Mario, David

Thank you for your feedback.

TIddlywiki Semantic colors has two objectives
  1. How it simply possible to apply theme to single tiddler
  2. Use semantic colors for categorization
Usecases
  1. Learning materials (each topic, category can have dedicated semantic color, like learning a foreign language)
  2. Slideshow (section divider)
  3. Books and tutorials (chapters, specific subjects, like example tiddlers)
  4. Visual tags (instead of looking for tag bar and see to what category this subject (tiddler) belong, you can identify it by semantic colors)
Regarding the taste, yes, different people have different taste. For long readings, smooth low tone and higher tint colors are better.
But I left this to the user to create or select among existing tags their color of choice.

The last word!
Tiddlywiki is an amazing tool. With little efforts you can create such visual elements.


Cheers
Mohammad

Mohammad

unread,
Feb 10, 2019, 5:37:12 AM2/10/19
to TiddlyWiki
Semantic colors updated

Twenty background colors are added.

Watt

unread,
Feb 10, 2019, 6:51:41 AM2/10/19
to TiddlyWiki
Great stuff, thanks Mohammad. You're producing some really helpful tools.

Mohammad

unread,
Feb 10, 2019, 7:03:31 AM2/10/19
to TiddlyWiki
Hello Watt,
 I am glad you found them useful.

Cheers
Mohammad

@TiddlyTweeter

unread,
Feb 10, 2019, 7:13:56 AM2/10/19
to TiddlyWiki
Nice piece of work ... ! I like how easy your tools are to use.

You might be interested to look at Thomas Elmiger's approach to palettes (a big part of why his sites look good)


Josiah
Reply all
Reply to author
Forward
0 new messages