CSS to change TAG color

Ask for Help
1

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.

2

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

3

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

4

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.

5

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

6

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
7

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

8

image
image1920×1022 96.1 KB

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.

8 Likes
9

Thanks @ThinhDinh . This is the one.

1 Like
10

Is there any way to change colors conditionally?

11

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

Something like this:

1 Like
12

How can this set up when having more tan one in line list? is it possible to apply that config to all of them?

image
image1094×713 92.1 KB

13

You just duplicate that "div[id*]…] part and change the nth-of-type number accordingly (based on the order of the components on the screen). That’s assuming you want different configurations for each inline list.