Question

I want to edit the default “tagging” list in the top left corner of each tiddler to have an horizontal layout and stay out of the way of the tiddlers text.

As I am rather new to tiddlywiki and javascript I do not know where and how I would implement this feature. I guess the best place would be as a plugin in a tiddler itself (not editing the sourcecode).

I realized that I can move the “tagging” list itself using the “ViewTemplate” Shadow-Tiddler. It looks as if the tags were created using the “taggin” macro in there. So i guess I would somehow need to modify that macro?

Thanx for all the answers.

Answer 1

It does not require JavaScript to do what you are asking. Here are a few changes to try:

First, I edited the StyleSheet shadow tiddler, as follows:

/*{{{*/
.tagging li {
  display: inline;
}
/*}}}*/

This causes the li elements to flow horizontally. I also made the following change to the ViewTemplate shadow tiddler:

<div class='tagging' macro='tagging'></div>
<div class='tagClear'></div>
<div class='tagged' macro='tags'></div>

By inserting the tagClear div, I’ve prevented the text from wrapping around the tagging div element.

Finally, you may want to get rid of the "tagging: " label at the start of the list. You can remove (or change it) by creating a configuration tiddler, giving it a systemConfig tag, and adding:

//{{{
  config.macros.tagging.label = "";
//}}}

This tiddler is sometimes given a name like zzConfig or zzUserConfig since the systemConfig tiddlers are executed in alphabetical order.

As an alternative, you may want to combine the effect of editing ViewTemplate with StyleSheet as follows:

/*{{{*/
.tagging { float: none; }
.tagging li { display: inline; }
/*}}}*/

The only thing that remains is to format the div to your liking!