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

文件: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)
}

---

Dashticz V2.0 Main Page

Tips, Tricks & Customization