Dashticz beta: set colors.

[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?????

[ArthurNL]

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}

[Lokonli]

Try the following:
.fa-male.on {color: green}
.fa-male.off {color: red}
.fa-female.on {color: green}
.fa-female.off {color: red}

[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?

[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?

[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}

[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

[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.

[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?

[Lokonli]

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;}

[Minglarn]

Thanks for the help.. Now it works...