CSS - Change specific block backround color depending on block state Topic is solved

[sammyke007]

Hi

One of my million questions...
I would like to change a specific block background color (or title color) depending on the state it is in.
I have a block that tells me the Domoticz alarm state (Armed Home / Armed Away or Disarmed).

I know that it's possible to change styling, but I don't have enough CSS skills to do it myself.
Maybe the solution would be a nice extra for the wiki!

If block240 tells me "Disarmed", change that block background color, elseif ... but obviuously, that's the wrong language

I was thinking about something like this:

Code: Select all

function getStatus_240(block) {
     var status = block.device.data;
     if (status = 'Disarmed') {
         block.background-color = red !important;
     } 
 }

or something like this:

Code: Select all

function afterGetDevices() {

     var devices = Domoticz.getAllDevices();
     var device1=devices[240];
     var value1=(device1.Data); 
     var newClass = '';
     if (value1=Disarmed) newClass = 'danger';
     Dashticz.setBlock('custom', { title: diff, addClass: newClass} );
 }

[sammyke007]

After a lot of headache...

custom.js:

Code: Select all

function afterGetDevices(){
    if (alldevices[240].Data == 'Disarmed') {
		$("div.block_240").addClass('warninggreen');
	}
	if (alldevices[240].Data == 'Armed Home') {
		$("div.block_240").addClass('warningorange');
	}
	if (alldevices[240].Data == 'Armed Away') {
		$("div.block_240").addClass('warningred');
	}
}

custom.css:

Code: Select all

.warningred {
  background-color: red !important;
}
.warningorange {
  background-color: orange !important;
}
.warninggreen {
  background-color: green !important;
}

[toro]

Yes, that will work.
But the function afterGetDevices is triggered everytime a Domoticz device changes. So whatever device changes, this function runs.
I think it's better to run your script only if the device itself changes.

Therefor you could use

Code: Select all

function getStatus_240(block){
	if (block.device.Data == 'Disarmed') {
		block.addClass = 'warninggreen';
	}
	else if (block.device.Data == 'Armed Home') {
		block.addClass = 'warningorange';
	}
	else {
		block.addClass = 'warningred';
	}
}

[clinkadink]

Same as Toro, but using ternary syntax

Code: Select all

function getStatus_240(block) {
  var c = block.device.Data === 'Disarmed' ?
      'warninggreen' :
      block.device.Data == 'Armed Home' ?
      'warningorange' :
      'warningred';
  block.addClass = c;
}

[sammyke007]

Tnx everyone!
It's working great. The problem is that I can understand what every line does in a script, but writing it myself... It's the same as with my French