Creating customized tag-pill

[Juuso Tuunanen]

Hi.

I have been trying to find a way to create custom tag-pill, but I am currently having no progress.

I am planning to create a study wiki for myself, which covers books and possible other ideas/concepts relating to all of those books.

This is my current situation:

My first problem is that I would like to use caption for the names in tag-pill drop-down. For example, instead of "Introduction - Book B", I would like to use just "Introduction".
The other problem I face is that I would like to hide some of the list items. For example "Love" is part of "Themes - Book B", but I also would like to tag that Tiddler with "Book B", so I can always relate all of the "child Tiddlers" to the topmost Tiddler.

So the result I would like to have replacing current tag-pill drop-down is the following structure:

• Book B
• Introduction
• Themes

If it is possible to create a custom JavaScript module to do that, I would be more than happy to do it myself, because I'm very familiar with JavaScript. The markup language used to define macros is bit weird for me.

Also, if anyone has a better solution to handle the presented problem, I am happy to hear another way of structuring my Tiddlers and tags.
My main goal is to link all child Tiddlers to topmost Tiddler and to create easy to read table of contents to quickly see structure of a book.

I really like TiddlyWiki, but I am still hesitant to start using it heavily, unless I can solve this problem.

Thanks.

[Mark S.]

Two of your goals, making a hierarchical tag structure, and using captions can be accomplished by using a table of contents macro:

https://tiddlywiki.com/#Table-of-Contents%20Macros

This doesn't use tag-pills, but it's own tree. You can chose several styles. Hmm ... maybe by applying the right class it will present as tag-pills, if that's important.

You can present this tree in a sidebar:

https://tiddlywiki.com/#Adding%20a%20table%20of%20contents%20to%20the%20sidebar

Or make it appear in tiddlers only when you want:

https://groups.google.com/d/msg/tiddlywiki/YEgHhQ0ZcFo/8oS__hRhnLIJ

HTH

[A Gloom]

I duplicated the core Tag Template --iirc-- along with some associated templates to create a second style of tag pills for my RagTag (Jeremy forgive me : P ) top bar menu's.  The code (modified tag template) below shows the filters used for the tag drop down listings and changing the default title use for captions.

<span class="tc-tag-list-item">
<$set name="transclusion" value=<<currentTiddler>>>
<$macrocall $name="tag-pill-body" tag=<<currentTiddler>> icon={{!!icon}} colour={{!!color}} palette={{$:/palette}} element-tag="""$button""" element-attributes="""popup=<<qualify "$:/state/popup/tag">> dragFilter='[all[current]tagging[]]' tag='span'"""/>
<$reveal state=<<qualify "$:/state/popup/tag">> type="popup" position="below" animate="yes" class="tc-drop-down">
<$transclude tiddler="$:/.ragsui/TagMenuListItemTemplate"/>
<$list filter="[all[shadows+tiddlers]tag[$:/tags/TagDropdown]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>
<hr>
<$list filter="[all[current]tagging[]sort[sortorder]]">
<$link to={{!!title}}>{{!!caption}}</$link>
</$list>
</$reveal>
</$set>
</span>
<!-- above hr render by ragsui tagmenulistitem, title linkd caption, below hr by last list   -->

[Thomas Elmiger]

Hi Juuso,

Maybe my (still somewhat experimental) plugin could do what you want:

https://tid.li/tw5/plugins.html#%24%3A%2Fplugins%2Ftelmiger%2Fx-tag

Make a backup and check it out!

All the best,

Thomas

[Eric Kofoid]

Hi A Gloom,

I'm very much a novice at TW5 customization. How do you implement your style code? I'm not sure where you put it or what tiddlers you modify. Where does the code pick up the value for !!color, which seems to be some kind of global variable?

I have made a top menu, courtesy of Ton Gerner, and have customized certain aspects of the pills using his plugins and the controls pallete tab. However, nothing I do has any permanent effect on text color. I would like the pills to be black with red text -- right now, they are black with white text. I can temporarily change them by manipulating the color value in the browser web inspector, but this has no lasting effect on any style sheet.

I'm attaching two images, one showing what I want, and the other, what I have.

Any help you can give me would be very welcome.

Cheers,

Eric

[A Gloom]

Eric,

Sorry about the delay, I missed your post.

I have made a top menu, courtesy of Ton Gerner, and have customized certain aspects of the pills using his plugins and the controls pallete tab. However, nothing I do has any permanent effect on text color. I would like the pills to be black with red text -- right now, they are black with white text. I can temporarily change them by manipulating the color value in the browser web inspector, but this has no lasting effect on any style sheet.

The colors are defined in the wiki theme files.  Look for these 2 files with Advanced Search, I'm sending this right before retiring for the day so I don't have the class names used for tag pills colors handy.

$:/themes/tiddlywiki/snowwhite/base
$:/themes/tiddlywiki/vanilla/base

pick the one you have selected in Control Panel, Appearance
Use caution if editing these, do a web search for tiddlywiki theme editing customizing and you should find plenty of info about editing the theme colors as well as the risks and precautions.