Change icon coulour and text based on value

[JeroenG]

Hi,

I created adevice which shows we the air quality index (LKI), which varies from 1 to 11.

Depending on the value I want the icon and text to change colour. I added the following in custom.js:

Code: Select all

function getStatus_Luchtkwaliteit(block) {
    var device=block.device;
    if(device['Data']<4) {
        block.addClass='alertnormal';
    }
    else if (device['Data']<6) {
        block.addClass='alertlight';
    }
    else if (device['Data']<8) {
        block.addClass='alertmedium';
    }
    else if (device['Data']<10) {
        block.addClass='alerthigh';
    }
     else {
        block.addClass='alertcritical';
    }
}

In the custom.css I added:

Code: Select all

.alertnormal .col-icon {
    color: green !important;
}
.alertlight .col-icon {
    color: yellow !important;
}
.alertmedium .col-icon {
    color: orange !important;
}
.alerthigh .col-icon {
    color: orangered !important;
}
.alertcritical .col-icon {
    color: red !important;
}

2022-01-22 17_38_18-Dashticz.png (18.14 KiB) Viewed 718 times

This works great, but I don't want only the icon to change, but also the colour of the text on the button when level medium of higher. CSS is not my strongest point, please point me into the right direction.

Jeroen

[Vomera]

You can try with

Code: Select all

.alertnormal .title {
    color: green !important;
}

or

Code: Select all

.alertnormal .value {
    color: green !important;
}