Colored Tags in TiddlyWiki

#1

I am experimenting with Twine / An open-source tool for telling interactive, nonlinear stories (twinery.org)

This is a note in Twine.

image
image914×240 14.9 KB

I like the tags! I want to know how I can use a simple stylesheet and update my tag styles in Tiddlywiki with something like this:

  1. There are six main tags. They are colorful (pale color)
  2. The text , border and button here drop down in TW close button are colorful
1 Like
#2

I think we can learn from this clean UI for our TW tiddler UI.

#3

You can easily color your tags and even set custom icons.

In the sidebar click on More → Tags → Tag Manager

There you customize colors and icons of your tags.

image
image616×618 75 KB

There are other ways too. But this is the easiest.

#4

This is equivalent to adding color field to the tag tiddler.

#5

These are some of colors used in Twinery

:root {
    --black: #000;
    --off-white: #f2f2f2;
    --white: #fafafa;
    --white-translucent: hsla(0,0%,100%,0.7);
    --dark-gray-translucent: rgba(0,0,0,0.7);
    --dark-gray: #4d4d4d;
    --gray: #999;
    --light-gray: #d9d9d9;
    --light-gray-translucent: hsla(0,0%,60%,0.25);
    --faint-gray: #e6e6e6;
    --dark-red: #c2100a;
    --faint-red: #fee8e7;
    --red: #f5433d;
    --light-red: #fcd0cf;
    --light-red-translucent: rgba(246,91,85,0.25);
    --dark-orange: #c26c0a;
    --faint-orange: #fef3e7;
    --orange: #f59f3d;
    --light-orange: #fce7cf;
    --light-orange-translucent: rgba(246,171,85,0.25);
    --dark-yellow: #bcc20a;
    --faint-yellow: #fdfee7;
    --yellow: #eff53d;
    --light-yellow: #fbfccf;
    --light-yellow-translucent: rgba(241,246,85,0.25);
    --dark-green: #0ac216;
    --green: #3df549;
    --faint-green: #e7fee8;
    --light-green: #cffcd2;
    --light-green-translucent: rgba(85,246,96,0.25);
    --dark-blue: #0a60c2;
    --blue: #3d93f5;
    --faint-blue: #e7f1fe;
    --light-blue: #cfe4fc;
    --light-blue-translucent: rgba(85,160,246,0.25);
    --dark-purple: #6c0ac2;
    --faint-purple: #f3e7fe;
    --faint-purple-translucent: rgba(219,182,251,0.25);
    --purple: #9f3df5;
    --light-purple: #e7cffc;
    --light-purple-translucent: rgba(171,85,246,0.25);
}
3 Likes
#6

I create a new page button with dropdown menu to create new tiddlers. These tiddlers have prefilled color and icons.

image

See examples for all tags with color and icon.

image
image1274×164 11 KB

The attached json file is the page button configuration without the template tiddlers.

$__bangyou_ui_button_new-tiddlers.json (4.5 KB)

4 Likes
#7

Great! You have not included the color and icons, so I cannot reproduce what I see in the screenshot! I think those tags shall be included in the JSON for colors.

Sidenot: If you don’t mind would you please share the the structure of your meeting tiddler (I see in your screenshot) here on Meetings: Tiddlywiki Tools, Plugins, Editions - Discussion - Talk TW

#8

Thank you all!

I was able to create colorful tags with pale colors as Twinery!

#9

Hi, It would be nice, if you could share your solution, so others don’t have to invent the wheel in the future again.