Page 1 of 1
Dashticz beta: set colors.
Posted: Monday 15 October 2018 14:52
by retetiba
Hi,
I have upgraded to the latest dashticz beta. This works great, except on the colors of the icons...
in my old configuration I used the fa-male and fa-female icons.
In the CUSTOM.CSS I had the text:
.fa.fa-male.on {color: green}
.fa.fa-male.off {color: red}
.fa.fa-female.on {color: green}
.fa.fa-female.off {color: red}
The beta uses a different icon set, so I had to change the icon to fas fa-male and fas fa-female.
However, text below in CUSTOM.CSS does not color my icons;
.fa.fas fa-male.on {color: green}
.fa.fas fa-male.off {color: red}
.fa.fas fa-female.on {color: green}
.fa.fas fa-female.off {color: red}
ALready tried many other configuration options, as shown in
https://www.domoticz.com/wiki/Dashticz_ ... Lightbulbs
However, also these do not work.
So what happens: The correct icon is shown. The color is white when "on" and grey when "off".
What am I missing?????
Re: Dashticz beta: set colors.
Posted: Monday 15 October 2018 20:20
by ArthurNL
retetiba wrote: ↑Monday 15 October 2018 14:52
However, text below in CUSTOM.CSS does not color my icons;
.fa.fas fa-male.on {color: green}
.fa.fas fa-male.off {color: red}
.fa.fas fa-female.on {color: green}
.fa.fas fa-female.off {color: red}
For e.g. this works for me:
.fas.fa-fire {color: red}
.fas.fa-fire {color: green}
So I think you should change the names to:
.fas-fa-male.on {color: green}
.fas-fa-male.off {color: red}
.fas-fa-female.on {color: green}
.fas-fa-female.off {color: red}
Re: Dashticz beta: set colors.
Posted: Monday 15 October 2018 20:35
by Lokonli
Try the following:
.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}
Re: Dashticz beta: set colors.
Posted: Monday 15 October 2018 20:48
by retetiba
Thanks all for your help... unfortunately both do not work.
To be sure: The file should be CUSTOM.CSS (all in capitals), correct?
any other ideas?
Re: Dashticz beta: set colors.
Posted: Monday 15 October 2018 20:50
by retetiba
It looks like that it does not look at the CUSTOM.CSS file. When I change something, nothing happens.
Also it should in the CUSTOM map, the same as CONFIG.js, correct?
Re: Dashticz beta: set colors.
Posted: Monday 15 October 2018 21:03
by retetiba
Nevermind.... filename should be custom.css.
For support of others, the contents of custom.css should be look a like:
.fas.fa-male.on {color: green}
Re: Dashticz beta: set colors.
Posted: Tuesday 16 October 2018 1:31
by HansieNL
The off lightbulb is .far and the on is .fas. You don't have to use .on or .off anymore for the lightbulb. far = regular and fas = solid.
For an overview of all fonts:
https://fontawesome.com/icons?d=gallery&m=free
Re: Dashticz beta: set colors.
Posted: Saturday 27 October 2018 11:27
by mozo78
Hi, I try to colour my umbrella icon, but it is not working.
config.js:
- Spoiler: show
- blocks[678] = {} //Buienradar (text)
blocks[678]['title'] = '';
blocks[678]['switch'] = false;
blocks[678]['width'] = 3;
blocks[678]['icon'] = 'fas fa-umbrella';
custom.css:
- Spoiler: show
- /* Buienradar */
.block_678 {
height: 100% !important;
}
.fas.fa-umbrella {font-size: 32px !important;
font-weight: bold !important;
.fas.fa-umbrella.on {color: red !important;
}
I tried it with .far.fa-umbrella {color: red !important;} but not worked either.
Re: Dashticz beta: set colors.
Posted: Friday 02 November 2018 9:31
by Minglarn
Did anyone solved this icon issue?
Having the same strange not loading the right icon problem..
Code: Select all
/*
CUSTOM CSS FILE
*/
.fa-power-off.on.icon {font-size: 50px !; color: #00FF00;}
.fa-power-off.off.icon {font-size: 30px !important;color: #FF0000;}
.fa-bell.on.icon {font-size: 50px !; color: #FF0000;}
.fa-bell.icon {font-size: 30px !important;color: #00FF00;}
.fa-user-secret.icon {font-size: 50px !; color: red;}
How should I name the icons so it loads into Dash?
Edit: To early in the morning i guess.
The icons now show up... but i cant change the color..
Code: Select all
.fas fa-power-off {font-size: 50px !; color: #00FF00;}
.far power-off.off {font-size: 30px !important;color: #FF0000;}
.fas fa-bell {font-size: 50px !; color: #FF0000;}
.far fa-bell {font-size: 30px !important;color: #00FF00;}
Any idea?
Re: Dashticz beta: set colors.
Posted: Friday 02 November 2018 11:58
by Lokonli
Minglarn wrote: ↑Friday 02 November 2018 9:31
Did anyone solved this icon issue?
Having the same strange not loading the right icon problem..
Code: Select all
/*
CUSTOM CSS FILE
*/
.fa-power-off.on.icon {font-size: 50px !; color: #00FF00;}
.fa-power-off.off.icon {font-size: 30px !important;color: #FF0000;}
.fa-bell.on.icon {font-size: 50px !; color: #FF0000;}
.fa-bell.icon {font-size: 30px !important;color: #00FF00;}
.fa-user-secret.icon {font-size: 50px !; color: red;}
How should I name the icons so it loads into Dash?
Edit: To early in the morning i guess.
The icons now show up... but i cant change the color..
Code: Select all
.fas fa-power-off {font-size: 50px !; color: #00FF00;}
.far power-off.off {font-size: 30px !important;color: #FF0000;}
.fas fa-bell {font-size: 50px !; color: #FF0000;}
.far fa-bell {font-size: 30px !important;color: #00FF00;}
Any idea?
These are switches for which you selected a custom icon via the blocks[IDX]['icon']='fas fa-power-off' and blocks[IDX]['icon']='fas fa-bell' in CONFIG.js?
And you want to set different colors depending on the on/off state? Let's do the size in a second step.
'fas', 'fa-bell' and 'fa-power-off' are classes which can be used in your custom.css to select the right element. Dashticz add to switches the 'on' or 'off' class depending on the state. If you have an element that you want to select has two classes, you connect them in your custom.css with a '.'
That means a CSS selector for a power-off icon in the off state is: .fa-power-off.off
In the on state: .fa-power-off.on
So I guess the following should be working
Code: Select all
.fa-power-off.on { color: #00FF00;}
.fa-power-off.off {color: #FF0000;}
.fa-bell.on { color: #FF0000;}
.fa-bell.off {color: #00FF00;}
Re: Dashticz beta: set colors.
Posted: Saturday 03 November 2018 7:49
by Minglarn
Thanks for the help.. Now it works...