[tw5] Question about styling tags

Google Group (Read Only)
#1

So, just a few questions, first one being is, how could I change the x for removing a tag to match the font color of the text inside the tag?

Using a white tag makes it more or less invisible, and while incredibly hard to click, does look a bit odd.

Also, would it be possible to add a border around the tags with the same color as the tag itself, but with say, 50% opacity, so the background would make the border darker or lighter to prevent the tag from blending in with the tiddler background?

If so, what exactly would I have to add to my own stylesheet to tinker with this? I’m still learning the more complex parts of tw5, so any help is greatly appreciated!

#2

Whoops, meant to put “and while not incredibly hard to click”

#3

So, just a few questions, first one being is, how could I change the x for removing a tag to match the font color of the text inside the tag?

Try this in a tiddler tagged $:/tags/Stylesheet:

svg.tc-image-close-button {
fill: <>;
}

(Note: there’s a color in the palette called tag-foreground, but it doesn’t appear to actually be used for the tag foreground, rather foreground is. The <> macro retrieves the hex code of a color by name from the current palette; go to $:/PaletteManager to see the list of colors.)

Also, would it be possible to add a border around the tags with the same color as the tag itself, but with say, 50% opacity, so the background would make the border darker or lighter to prevent the tag from blending in with the tiddler background?

I don’t know enough CSS to know how to do this kind of border off the top of my head, but you would apply a similar styling rule to the class of the tag. I would start with tc-tag-label. The trick is to open your browser’s devtools and click on the thing you want to style on the “Elements” tab, and you should be able to poke around from there to figure out what to style. Then it’s just any tiddler tagged $:/tags/Stylesheet to get it included in the global stylesheet for the page.

#4

Hi, Soren! (I was just reading your book, in hopes of figuring this out haha)

I tried using svg.tc-image-close-button {fill: <>;} Like you suggested, however it only changed the X to match the overall font, while I’m aiming to have it match the font color used for the font inside the tagpills, but I’m not sure what causes the tagpills to change from white font color to black font color and vice versa when selecting a color for the tag.

As far as the CSS border part i was curious about, I was planning to use the rgba() function in css to apply the opacity effect, but I don’t know where the CSS that’s used for the tagpill is stored at.