CSS to change TAG color

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.


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

Something like this.


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.


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

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

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.