Domoticz

Posted: **Saturday 16 December 2023 20:21**

Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches

Posted: **Saturday 16 December 2023 21:27**

You could make an inverted custom icon for these switches. https://www.domoticz.com/wiki/Custom_ic ... binterface.

Edit: Now I see it is for Dasticz so you probably can ignore my answer.

Posted: **Sunday 17 December 2023 8:29**

madpatrick wrote: Saturday 16 December 2023 20:21 Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches

You can do that via styling in custom.css.

If you have defined your block via:

Code: Select all

blocks[1324] = {
...
}

Then add the following to custom.css:

Code: Select all


[data-id="1324"] .off.icon {
    opacity: 1 !important;
}

[data-id="1324"] .on.icon {
    opacity: 0.2 !important;
}

or, use the addClass block parameter, and define relevant css classes in custom.js

Posted: **Sunday 17 December 2023 8:52**

Yes, its possible if the device supports icon change.

You have to do the icons by yourself and add them via web interface - Setup -> More options -> Custom Icons.

https://domoticz.com/wiki/Custom_icons_for_webinterface - wki

https://drive.google.com/drive/folders/ ... KXRcuCsJWQ - icons pack

Posted: **Sunday 17 December 2023 9:26**

Lokonli wrote: Sunday 17 December 2023 8:29
madpatrick wrote: Saturday 16 December 2023 20:21 Hi,

Is it possible to reverse the status of On / Off?
If the swtich is off then the iconis faded, but i like to have the changed to highlighted for some switches
You can do that via styling in custom.css.

If you have defined your block via:
Code: Select all
blocks[1324] = {
...
}
Then add the following to custom.css:
Code: Select all
[data-id="1324"] .off.icon {
    opacity: 1 !important;
}

[data-id="1324"] .on.icon {
    opacity: 0.2 !important;
}
or, use the addClass block parameter, and define relevant css classes in custom.js

Thanks
This is working fine with an icon.
How cani do it for an img ?

I can change the size for the imange, but on/off is not working

Code: Select all

.block_673 img					{max-width: 60px !important;}
.block_673 .off.img				{opacity: 1 !important;}

Posted: **Sunday 17 December 2023 21:03**

For images (images you use on the position of an icon) you can also just use:

Code: Select all

.block_673 .off.icon {
   opacity: 1 !important
}

Alternative, use addClass, like below:

In your block definition in CONFIG.js, for each block with inverted state styling:

Code: Select all

blocks[673] = {
   addClass: 'invertedstatestyle'
}

And in custom.css, only once:

Code: Select all

.invertedstatestyle .on.icon {
   opacity: 0.4 !important
 }
 
 .invertedstatestyle .off.icon {
   opacity: 1 !important
 }

Posted: **Sunday 17 December 2023 21:28**

Lokonli wrote: Sunday 17 December 2023 21:03 For images (images you use on the position of an icon) you can also just use:
Code: Select all
.block_673 .off.icon {
   opacity: 1 !important
}
Alternative, use addClass, like below:

In your block definition in CONFIG.js, for each block with inverted state styling:
Code: Select all
blocks[673] = {
   addClass: 'invertedstatestyle'
}
[/quote]
This is working.
Not sure why it didn't work earlier

Thanks for the support !

Posted: **Sunday 17 December 2023 21:29**

madpatrick wrote: Sunday 17 December 2023 21:28
Lokonli wrote: Sunday 17 December 2023 21:03 For images (images you use on the position of an icon) you can also just use:
Code: Select all
.block_673 .off.icon {
   opacity: 1 !important
}

This is working.
Not sure why it didn't work earlier

Thanks for the support !

Domoticz

Reverse On/Off icon

Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon

Re: Reverse On/Off icon