Page 1 of 1
change one selector box
Posted: Sunday 19 May 2019 15:25
by 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?
Re: change one selector box
Posted: Sunday 19 May 2019 15:59
by 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;
}
Re: change one selector box
Posted: Sunday 19 May 2019 16:21
by 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 ?
Re: change one selector box
Posted: Sunday 19 May 2019 16:41
by Lokonli
pvklink wrote: Sunday 19 May 2019 16:21
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;
}
Re: change one selector box
Posted: Sunday 19 May 2019 17:01
by 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';
Re: change one selector box
Posted: Sunday 19 May 2019 17:14
by 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;}
Re: change one selector box
Posted: Sunday 19 May 2019 18:59
by 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';
Re: change one selector box
Posted: Sunday 19 May 2019 19:19
by Lokonli
pvklink wrote: Sunday 19 May 2019 17:14
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.
Re: change one selector box
Posted: Sunday 19 May 2019 19:22
by Lokonli
pvklink wrote: Sunday 19 May 2019 18:59
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
Re: change one selector box
Posted: Sunday 19 May 2019 19:31
by 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!
Re: change one selector box
Posted: Sunday 19 May 2019 20:49
by Lokonli
pvklink wrote: Sunday 19 May 2019 19:31
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?
Re: change one selector box
Posted: Sunday 19 May 2019 20:53
by pvklink
yes and yes
Re: change one selector box
Posted: Sunday 19 May 2019 21:03
by 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;}
Re: change one selector box
Posted: Sunday 19 May 2019 21:06
by 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;
}
Re: change one selector box
Posted: Sunday 19 May 2019 22:45
by 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;}
Re: change one selector box
Posted: Monday 20 May 2019 8:30
by Lokonli
pvklink wrote: Sunday 19 May 2019 22:45
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;
}
Re: change one selector box
Posted: Monday 20 May 2019 19:14
by pvklink
thanks! it works!
Re: change one selector box
Posted: Monday 20 May 2019 20:06
by 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;}
Re: change one selector box
Posted: Tuesday 21 May 2019 8:23
by Lokonli
pvklink wrote: Monday 20 May 2019 20:06
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
Re: change one selector box
Posted: Tuesday 21 May 2019 19:39
by pvklink
OK, changed the colors of the images in the folder! thanks!