CSS to change TAG color

Hi,
I am looking for CSS to change TAG color for images. Different images on the same screen I would like the ability to change TAG color.
Much appreciated.
Thank you.

Do you have multiple image components on the same screen? Do you have a rule on how they would be colored?

Yes @ThinhDinh . Multiple images and ability to control individual colors on those TAGs

Do your screen contain visibility conditions for images? It would be very hard in that case since we have to target specific components and have to know their position.

No screen visibility conditions for this page. I understand what you mean :rofl:

Have you tried using this?

[data-test="app-tag-overlay"] {
    background-color: #COLOR;
    color: #COLOR;
}

This would change all the tags on the screen. But if you want a different color for different things… then this wouldnt work.

2 Likes

thanks @Joe_Gabriele . Would like to change for different pictures.

Something like this.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) [data-test="app-tag-overlay"] {
    background-color: black;
    color: white;
}

div[id*='screenScrollView'] > div > :nth-of-type(2) [data-test="app-tag-overlay"] {
    background-color: #FFD700;
    color: black;
}

div[id*='screenScrollView'] > div > :nth-of-type(3) [data-test="app-tag-overlay"] {
    background-color: green;
    color: white;
}

Please change the number in the nth-of-type part accordingly.

6 Likes

Thanks @ThinhDinh . This is the one.

1 Like

Is there any way to change colors conditionally?

I would define the conditions in if then else columns then point the rich text to the ITE columns.

Something like this:

1 Like