Domoticz

Posted: **Saturday 22 January 2022 17:44**

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 720 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

Posted: **Sunday 06 February 2022 12:02**

You can try with

Code: Select all

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

or

Code: Select all

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

Domoticz

Change icon coulour and text based on value

Change icon coulour and text based on value

Re: Change icon coulour and text based on value