Dashticz V2 - CSS
User CSS Modifications
There are a lot of creative users on the Domoticz Forum, that modify the CSS.
It is possible to overrule the default CSS with your own modifications.
Place these modifications in the CUSTOM.CSS, located in the /domoticz/www/<dashticz v2 folder>/custom folder.
This sections has some examples of CSS that can be placed in the custom.css, so you can create your own look and feel.
Blocks
Blocks title: Large & Heavy
h1, h2, h3, h4, h5, h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
margin: 0px;
margin-left: 15px;
font-weight: 900;
font-size: 300%;
}
Blocks name: 15px
.title {
font-size:15px;
}
Space between blocks smaller
.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: 3px solid rgba(255,255,255,0); /* border: 7px -> 3px - Smaller space between blocks */
background: rgba(0,0,0,0.2);
background-clip: padding-box;
}
Add rounded corners to blocks
.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)
background: rgba(0,0,0,0.2);
background-clip: padding-box;
border-radius: 20px; /* Rounded corners */
}
Smaller Title blocks (Height)
div.mh.titlegroups {
height: 60px !important; /* default height=75px */
padding-top: 3px; /* center text for new height */
}
Icons
Larger (Bulb) icons
.fa-lightbulb-o:before {
font-size: 24px;
}
All Icons on the Dashboard Larger
To make ALL ICONS on the Dashboard larger in one move, just simple add (choose font-size wisely!!)
.fa,.wi {
font-size:24px !important;
}
Larger Logitech Media Server buttons
.fa.fa-arrow-circle-left.fa-small {
font-size: 50px !important;
}
.fa.fa-stop-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-play-circle.fa-small {
font-size: 50px !important;
}
.fa.fa-arrow-circle-right.fa-small {
font-size: 50px !important;
}
.fa.fa-pause-circle.fa-small {
font-size: 50px !important;
}
Fonts & Text Size
Change font size of 1 specific (text) device
Every block has an unique identifier-classname, which look something like .block_xxx (where xxx is the idx of your choice) that can be used in css. Example:
.block_233 {
font-size:120px !important;
color:red !important;
}
Of course, change 233 to the idx of your choice ;)
Change font size of public transport module
.publictransport div {
font-size: 13px;
}
Text Mediaplayer smaller
.h4.h4 {
font-size:12px;
}
Fontsize Trashcan Module
.trash .state div.trashrow {
font-size: 12px;
}
.trash .state div.trashtoday {
font-size: 16px;
}
.trash .state div.trashtomorrow {
font-size: 14px;
}
Color & Transparancy
Transparent Buttons Thermostat
/* Transparent background for buttons Thermostat */
.input-groupBtn .btn-number {
opacity: 0.5;
color: white;
background-color: rgb(34, 34, 34);
border-radius: 0px;
padding: 6px 10px 6px 10px;
line-height: 20px;
background-color: transparent;
}
Colored Lightbulbs
It is possible to use colors for the bulb-icons. In custom.css add something like:
/*
CUSTOM CSS FILE
*/
.fa.fa-lightbulb-o.on {
color:#F1C300;
}
.fa.fa-lightbulb-o.off {
color:#fff;
}
Result:
文件:Customcode bulb.jpg
Lightbulbs color & Opacity
- Color: green
- Opacity: 0.4
.fa.fa-lightbulb-o.on {
color: rgba(0,255,0,0.4)
}
Dashticz V2.0 Main Page | Tips, Tricks & Customization |