[FIXED] Dashticz CSS icons not doing anything.
Posted: Sunday 03 January 2021 16:34
Hey guys,
I'm back with another question..
I followed a (Dutch) blog of someone who made an awesome Dashboard he had a presence thing going on.
Now I want my icons on those blocks to have a green color (for being home) and a red one (for being away)
So these are the parts of the configs:
Now this works and looks like this:
However when the state is ON (cause it's a dummy switch) it should be green and when off it should be red.
This is my CSS so far (I'll add 2 different versions I tried):
And this is what was in the original code from that Blog Guy:
Somehow none of the colors for any icons change. I almost feel like I need to set something in the CONFIG.js about use_custom_css = true;
Since none of my css is doing ANYTHING..
Hope you guys can help me, I'm sorry if I missed something simple and stupid. I'm not too familiar with CSS nor JavaScript..
Ooh and just a Disclaimer: YES I went through ALL of the documantation of Dashticz, tried different things but nothing happened.
Greetings:
Thursten
I'm back with another question..
I followed a (Dutch) blog of someone who made an awesome Dashboard he had a presence thing going on.
Now I want my icons on those blocks to have a green color (for being home) and a red one (for being away)
So these are the parts of the configs:
Code: Select all
var phone_thur = 46;
var blocks = {}
blocks[phone_thur] = {}
blocks[phone_thur]['title'] = 'Thur';
blocks[phone_thur]['icon'] = 'fas fa-male';
blocks[phone_thur]['width'] = 3;
blocks[phone_thur]['show_lastupdate'] = true;
blocks[phone_thur]['protected'] = true;
blocks[phone_thur]['hide_data'] = false;
This is my CSS so far (I'll add 2 different versions I tried):
Code: Select all
.far,.fas,.wi {
font-size:64px !important;
}
/* Change color of 'male' depending on state (on/off) */
.fas fa-male.on {
color: #00FF00 !important;
}
.fas fa-male.off {
color: #FF0000 !important;
}
/* Change color of 'female' depending on state (on/off) */
.fas.fa-female .on {
color: #00FF00;
}
.fas.fa-female .off {
color: #FF0000;
}
.block_46 .icon {
color: #00FF00 !important;
}
Code: Select all
// Colors from blog: #aaa9a9 #8c8989
*/
/* Change colors of pop-up graph */
#graphoutput {
background: black;
color: white;
}
/* Change colors of pop-up graph */
.graphpopup {
background: black;
color: white;
}
/* Change color of buttons */
.btn {
background-color: #aaa9a9;
color: black;
border: 1px solid black;
}
/* Large & Heavy Blocks Titles */
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin-left: 15px;
font-weight: 900;
font-size: 200%;
foreground: blue;
}
/* Different color for Block Titles */
h3 {
color: white;
font-weight: 900;
}
/* Different fontsize & color for Text inside Block */
.title {
color: #8c8989 !important;
font-size: 16px !important;
}
.css_woonkamer {
}
/* Different color for Value inside Block */
.value {
color: white !important;
}
/* #8c8989 */
/* Title blocks (Height) */
div.mh.titlegroups {
height: 60px !important; /* default height=75px */
padding-top: 3px; /* center text for new height */
color: white;
}
/* Space between blocks */
.transbg
{
border-width: 5px !important;
}
/* Change spacing between borders, background and rounded corners */
.transbg.col-xs-1,
.transbg.col-xs-2,
.transbg.col-xs-3,
.transbg.col-xs-4,
.transbg.col-xs-5,
.transbg.col-xs-6,
.transbg.col-xs-7,
.transbg.col-xs-8,
.transbg.col-xs-9,
.transbg.col-xs-10,
.transbg.col-xs-11,
.transbg.col-xs-12 {
padding-top:15px;
padding-bottom:15px;
border: 7px solid rgba(255,255,255,0); /* spacing between borders 7px */
background: rgba(0,0,0, 0.4); /* transparancy of 0.4 (larger is darker) */
background-clip: padding-box;
border-radius: 20px; /* rounded corners */
}
/* Change background of scene block (350=movies, 351=voetbal, 352=ontspanning*/
.block_350.transbg,
.block_350.transbg {
background-color: rgba(255, 0, 0, 0.3) !important;
}
.block_351.transbg,
.block_351.transbg {
background-color: rgba(0, 255, 0, 0.3) !important;
}
.block_352.transbg,
.block_352.transbg {
background-color: rgba(255, 235, 59, 0.3) !important;
}
/* Larger 'power-off' icon */
.fa.fa-power-off {
font-size: 36px
}
/* Larger 'plug' icon */
.fa.fa-plug {
font-size: 36px
}
/* Larger 'check-square' icon */
.fa.fa-check-square {
font-size: 36px
}
/* Larger 'column' icon */
.fa.fa-columns {
font-size: 36px
}
/* Larger 'male' icon */
.fa.fa-male {
font-size: 36px
}
/* Larger 'female' icon */
.fa.fa-female {
font-size: 36px
}
/* Larger 'microchip' icon */
.fa.fa-microchip {
font-size: 36px
}
/* Larger 'lock' icon */
.fa.fa-lock {
font-size: 36px
}
/* Larger 'fire' icon */
.fa.fa-fire {
font-size: 36px
}
/* Larger 'bath' icon */
.fa.fa-bath {
font-size: 36px
}
/* Change color of 'lightbulb' depending on state (on/off) */
.fas.fa-lightbulb {
color:#F1C300;
}
.far.fa-lightbulb {
color:#fff;
}
/* Change color of 'power-off' depending on state (on/off) */
.fa.fa-power-off.on {
color:#00FF00;
}
.fa.fa-power-off.off {
color:#FF0000;
}
/* Change color of 'plug' depending on state (on/off) */
.fa.fa-plug.on {
color:#00FF00;
}
.fa.fa-plug.off {
color:#FF0000;
}
/* Change color of 'check-square' depending on state (on/off) */
.fa.fa-check-square.on {
color:#00FF00;
}
.fa.fa-check-square.off {
color:#FF0000;
}
/* Change color of 'male' depending on state (on/off) */
.fa.fa-male.on {
color:#00FF00;
}
.fa.fa-male.off {
color:#FF0000;
}
/* Change color of 'female' depending on state (on/off) */
.fa.fa-female.on {
color:#00FF00;
}
.fa.fa-female.off {
color:#FF0000;
}
/* Change color of 'fa-door' depending on state (on/off) */
.fa.fa-lock.on {
color:#FF0000;
}
.fa.fa-lock.off{
color:#00FF00;
}
/* Change color of 'fa-fire' depending on state (on/off) */
.fa.fa-fire.on {
color:#FF0000;
}
.fa.fa-fire.off{
color:#00FF00;
}
/* Change color of 'fa-bath' depending on state (on/off) */
.fa.fa-bath.on {
color:#FF0000;
}
.fa.fa-bath.off{
color:#00FF00;
}
/* Blocks name: 15px */
.title {
font-size:17px;
color:white;
}
.block_48 img {
align:center !important;
}
Somehow none of the colors for any icons change. I almost feel like I need to set something in the CONFIG.js about use_custom_css = true;
Since none of my css is doing ANYTHING..

Hope you guys can help me, I'm sorry if I missed something simple and stupid. I'm not too familiar with CSS nor JavaScript..
Ooh and just a Disclaimer: YES I went through ALL of the documantation of Dashticz, tried different things but nothing happened.
Greetings:
Thursten