Dashticz V2 - CSS

From Domoticz
Jump to: navigation, search

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

Block title.jpg

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

Block name.jpg

.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

Bulb large.jpg

.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

Lmslargebuttons.jpg

.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

Bulb rgba.jpg

  • Color: green
  • Opacity: 0.4


.fa.fa-lightbulb-o.on {
    color: rgba(0,255,0,0.4)
}




Dv2-home.png Dv2-tricks.png
Dashticz V2.0 Main Page Tips, Tricks & Customization