change one selector box

[pvklink]

Hi,

How do i change one selector switch (menu type)?

I have a very small text box under the icon with the different selector items.
I like to have the box after the icon, bigger and larger font, is that possible?

[Lokonli]

An example for a device with domoticz id 545. Add the following to custom/custom.css:

Code: Select all

/*To change the title size*/
.block_545 .title {
  font-size : 20px;
}

/*For a selector device with a drop down selection box*/
.block_545 select {
  font-size : 20px;
}

/*For a selector device with buttons*/
.block_545 .btn {
  font-size : 20px !important;
}

[pvklink]

thanks, is perfect!
Is t also possible to change the selected button for one button selector device and to set the selected rectangualr to a color and to set the text to a color ?

[Lokonli]

thanks, is perfect!
Is t also possible to change the selected button for one button selector device and to set the selected rectangualr to a color and to set the text to a color ?

To give the selected button yellow text on a black background, add the following:

Code: Select all

.block_545 .btn.active {
  color: yellow;
  background-color: black;
}

[pvklink]

mmm, does not work for my selector switch 1049 (it has three buttons)
i placed it at the bottom of my css file

.block_1049 .btn.active {
color: white;
background-color: yellow;
}

blocks[1049] = {}
blocks[1049]['title'] = 'Zolder default heating';
blocks[1049]['hide_data'] = true;
blocks[1049]['icon'] = 'fas fa-fire';
blocks[1049]['width'] = 6;
blocks[1049]['speak'] = 'Zolder verwarming aangepast';

[pvklink]

WIth RGB colors it does work!
.block_1190 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1191 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1192 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1268 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}

[pvklink]

Becomes great ! thanks @lokonli!
do you know how to change the color of a blocktitle (color of letters and backround ?)

blocks['0'] = {}
blocks['0']['type'] = 'blocktitle';
blocks['0']['title'] = 'Observatie';

[Lokonli]

WIth RGB colors it does work!
.block_1190 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1191 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1192 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}
.block_1268 .btn.active {color: white;background-color: rgba(51,0,255,1) !important;}

The !important addition probably does the trick.

[Lokonli]

Becomes great ! thanks @lokonli!
do you know how to change the color of a blocktitle (color of letters and backround ?)

blocks['0'] = {}
blocks['0']['type'] = 'blocktitle';
blocks['0']['title'] = 'Observatie';

Check https://dashticz-v2.readthedocs.io/en/l ... ock-titles

[pvklink]

Looks great!
And yes, is was the important setting, so i will change it to your colordefinition, that is easier to read!

Do you know how to change the color of a specific blocktitle, block '1a' (color of letters and backround ?) too?
Then my dashboard is finished!

[Lokonli]

Looks great!
And yes, is was the important setting, so i will change it to your colordefinition, that is easier to read!

Do you know how to change the color of a specific blocktitle, block '1a' (color of letters and backround ?) too?
Then my dashboard is finished!

A dashboard never is finished

Is this the same question as the previous one?

[pvklink]

yes and yes

[pvklink]

I found it myself!
forgot that there was a newer dashticz documentation!

https://dashticz-v2.readthedocs.io/en/l ... icz-switch

solution:
.titlegroups[data-id='1a'] {background-color: gray !important;}

[Lokonli]

Then the answer is the same:
https://dashticz-v2.readthedocs.io/en/l ... ock-titles

Code: Select all

.titlegroups[data-id='1a'] {
   background-color: gray !important;
}

.titlegroups[data-id='1a'] h3 {
  color: red !important;
}

[pvklink]

When i place all the items in one rule, h3 dos not seem to work...

.titlegroups[data-id='1a'] h3 {background-color: teal; color: white !important;}

or

.titlegroups[data-id='1a'] h3 {background-color: teal; h3; color: white !important;}

[Lokonli]

When i place all the items in one rule, h3 dos not seem to work...

.titlegroups[data-id='1a'] h3 {background-color: teal; color: white !important;}

or

.titlegroups[data-id='1a'] h3 {background-color: teal; h3; color: white !important;}

The second one doesn't work. Maybe the first one works when you add !important to background-color. (I did not test)

Code: Select all

.titlegroups[data-id='1a'] h3 {
	background-color: teal !important;
	color: white !important;
}

[pvklink]

thanks! it works!

[pvklink]

Almost there, 50 devices are perfect!
I have still two i cant find in the documentation

1) I like to make the default selected item in a selector switch(scroll menu not buttons) color:teal, and also the hoover over the items, is that also possible?

2) Last device is my blinds (roller shutter). I like to have them gold when closed and white when open
I cant find the icon name to change this, where can i find this to solve it myself ?

i tried
.fa-blinds.on {color: gold;}
.fa-print.off {color: white;}

[Lokonli]

Almost there, 50 devices are perfect!
I have still two i cant find in the documentation

1) I like to make the default selected item in a selector switch(scroll menu not buttons) color:teal, and also the hoover over the items, is that also possible?

2) Last device is my blinds (roller shutter). I like to have them gold when closed and white when open
I cant find the icon name to change this, where can i find this to solve it myself ?

i tried
.fa-blinds.on {color: gold;}
.fa-print.off {color: white;}

For the blinds no icons, but images are used. You could create a new image with the right color from the images in the img/ folder.

or:
changing the color of the image via a filter might work:
https://stackoverflow.com/questions/741 ... ge-via-css

[pvklink]

OK, changed the colors of the images in the folder! thanks!