Lighten tags editor by only showing "add new tag" on hover

Simple edit of stylesheet to make an edit form look a bit “lighter” by:

  1. Hiding the border on the edit tags row
  2. Removing the shadow on the edit tags row
  3. Only showing the “add new tag” element when mouse over the edit tags row

Helped me building an app with heavily customised tiddlers, but not unpleasant for general use.

Edit form - original:

Edit form - after:

Edit form - after (hovering over tags row):

$:/my/Styles
(or any tiddler tagged $:/tags/Stylesheet)

.tc-edit-tags {
	box-shadow:none;
	border: none;
}

.tc-edit-add-tag {
	visibility: hidden;
}

.tc-edit-tags:hover .tc-edit-add-tag {
	visibility: visible;
}
6 Likes

Nice modification one can adopt with a meer stylesheet. Nice stuff.

I too have some ideas for improving the tag editor but perhaps it’s time to add a little customisability.

  • Like you I think this can be achieved with an optional add on eg alternate tags editor and hide the default.

eg; Clear all tags button, add tag from list determined via a filter and more.

Thanks for the inspiration

1 Like