Domoticz

Hi all,

Slowly my dashticz gets its shape.

I am struggling with two items:
On the picture below you see a part of my page, showing the solarpanels production. With this I have 2 questions:
1. The font-size of the "zon totaal" is too big so it does not fit. I changed custom.css (it is IDX number 6), but this has no effect.
2. The data shows 3 digit's. Is it possible to change the format to 0 or 1 digit?

I hope someone can help me.


my custom.css
/*
CUSTOM CSS FILE
*/

.sunrise { font-size: 25px; font-size: 1vw; color: yellow;}
.wi-sunrise:before { color: yellow; font-size: 25px; font-size: 1vw;}
.sunset { font-size: 25px; font-size: 1vw; color: orange;}
.wi-sunset:before { color: orange; font-size: 25px; font-size: 1vw;}


.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: 1px solid rgba(255,255,255,0)
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 20px; /* Rounded corners */
}

.transbg.col-xs-1.hover:hover,
.transbg.col-xs-2.hover:hover,
.transbg.col-xs-3.hover:hover,
.transbg.col-xs-4.hover:hover,
.transbg.col-xs-5.hover:hover,
.transbg.col-xs-6.hover:hover,
.transbg.col-xs-7.hover:hover,
.transbg.col-xs-8.hover:hover,
.transbg.col-xs-9.hover:hover,
.transbg.col-xs-10.hover:hover,
.transbg.col-xs-11.hover:hover,
.transbg.col-xs-12.hover:hover {padding-top:15px; padding-bottom:15px; border: 3px solid rgba(0,0,0,0); background: rgba(100,100,100,0.3); background-clip: padding-box; border-radius: 0px; cursor:pointer; height:auto}



/* icon size
.fa,.wi {
font-size:20px !important;
}
.block_6_3 {
font-size:12px ;
}

.col-xs-12.items {
font-size: 15px;
}
*/
/* icons color */
.fas.fa-lightbulb {color:yellow}
.far.fa-lightbulb {color: white}
.fas.fa-home {color: green}
.far.fa-home {color: red}
.fas.fa-male.on {color: green}
.fas.fa-male.off {color: red}
.fas.fa-female.on {color: green}
.fas.fa-female.off {color: red}
.fa-fire-extinguisher {color: red}
.fa-fire-extinguisher {color: green}
.fas.fa-bed {Color: green}
.far.fa-bed {color: red}
.fas.fa-circle.on {Color: green}
.fas.fa-circle.off {color: red}
.fas.fa-windows {color: white}
.far.fa-windows {color:white}
.fas.fa-sun {color: yellow}
.fas.fa-music {color: white}
.far.fa-music {color: white}

.title {
font-size:20px;
}

.swiper-pagination-bullet {
width: 40px !important;
height: 40px !important;
}

.swiper-pagination {
text-align: right !important;
}

Can you try to add .block_6_3 .value { font-size:12px ; } or .block_6_3 .title { font-size:12px ; } at the end of your css nd see if that works for you.

Thanks HansieNL,

The second option works.