How can I keep the style I defined by data-tags even in the editor?

#1

I don’t know if I’m explaining myself well in the title, but basically I have this piece of code in a stylesheet tiddler:

[data-tag-title^="#"] .tc-tag-label {
   border-radius: 3px;
}

This causes all tags prefixed with “#” to have a different border-radius property than the default. (Custom styles by data-tags).

But this doesn’t persist if I go to the tiddler editor tagged with the tag prefixed with “#”.
How can I make the custom style persist also in the tiddler editor?

#2

By using the browser inspect you can see the .tc-tag-label class in use when in view mode. But I expect you need something else when displaying the tag pills in edit mode as there a different element.

#3

Edit: I did look at the wrong element. … There is a data-tag-title but it’s not active in the edit-template. That’s why it’s not working

Hi Sobriety, There is no data-tag-title … The following CSS code works for me

[data-tags^="#"] .tc-tag-label {
   border-radius: 3px;
}

There is a data-tiddler-title and data-tags that should be used for styling. The first one contains the tiddler title in plain text and the second one contains all tags in plain text

#4

This seems to change all tags not only those with the prefix #

#5

uups I was wrong. There is a data-tag-title assigned to the tag element in the view-template. It seems it’s not assigned in the edit-template.

I’ll create an issue at GitHub

1 Like
#6

Here’s the issue: [BUG] data-tag-title is not active in edit-mode · Issue #7528 · Jermolene/TiddlyWiki5 · GitHub I’ll have a closer look soon

2 Likes
#7

Here’s the PR Add data tag title where needed by pmario · Pull Request #7530 · Jermolene/TiddlyWiki5 · GitHub which should have a Vercel preview link in a view minutes. The PR also contains a new docs tiddler with the CSS code needed to catch all tag-pills.

Important There is a screenshot with the tag-pills I know. If you know more and it does not work, please comment at GitHub or here.

have fun!
mario

#8

Thanks, @pmario! I struggled with this for a while yesterday, using the browser’s inspector tool and tinkering with stylesheet to target that single tag in edit mode. I coudn’t figure out why it wasn’t working, and concluded I must not understand css well enough. :grimacing: