查看“Dashticz V2 - CSS”的源代码

==User CSS Modifications==
There are a lot of creative users on the Domoticz Forum, that modify the CSS.<br>
It is possible to overrule the default CSS with your own modifications.<br>
Place these modifications in the '''CUSTOM.CSS''', located in the '''/domoticz/www/<dashticz v2 folder>/custom''' folder.<br>
This sections has some examples of CSS that can be placed in the custom.css, so you can create your own look and feel.<br>
<br>

== Blocks ==
===Blocks title: Large & Heavy===
[[File:block_title.jpg]]
<syntaxhighlight lang="css" line='line'">
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%;
}
</syntaxhighlight>
<br>
----

===Blocks name: 15px===
[[File:block_name.jpg]]
<syntaxhighlight lang="css" line='line'">
.title { 
    font-size:15px;
}
</syntaxhighlight>
<br>
----

=== Space between blocks smaller ===
<syntaxhighlight lang="css" line='line'">
.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;
}
</syntaxhighlight>
<br>
----
=== Add rounded corners to blocks===
<syntaxhighlight lang="css" line='line'">
.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 */
}
</syntaxhighlight>
<br>
----

=== Smaller Title blocks (Height) ===
<syntaxhighlight lang="css" line='line'">
div.mh.titlegroups {
    height: 60px !important;		/* default height=75px */
    padding-top: 3px;			/* center text for new height */
}
</syntaxhighlight>
<br>

== Icons==
===Larger (Bulb) icons===
[[File:bulb_large.jpg]]
<syntaxhighlight lang="css" line='line'">
.fa-lightbulb-o:before { 
    font-size: 24px;
}
</syntaxhighlight>
<br>
----

=== All Icons on the Dashboard Larger ===
To make ALL ICONS on the Dashboard larger in one move, just simple add (choose font-size wisely!!)
<br><br>
<syntaxhighlight lang="css" line='line'">
.fa,.wi {
   font-size:24px !important;
}
</syntaxhighlight>
<br>
----

===Larger Logitech Media Server buttons===
[[File:Lmslargebuttons.jpg]]
<syntaxhighlight lang="css" line='line'">
.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;
}
</syntaxhighlight>
<br>
----

== 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: <br>

<syntaxhighlight lang="css" line='line'">
.block_233 {
   font-size:120px !important;
   color:red !important;
}
</syntaxhighlight>

Of course, change 233 to the idx of your choice ;)
<br><br>
----
=== Change font size of public transport module ===
<syntaxhighlight lang="css" line='line'">
.publictransport div {
    font-size: 13px; 
}
</syntaxhighlight>
<br><br>
----
=== Text Mediaplayer smaller ===
<syntaxhighlight lang="css" line='line'">
.h4.h4 {
   font-size:12px;
}
</syntaxhighlight>
<br>
----
=== Fontsize Trashcan Module ===
<syntaxhighlight lang="css" line='line'">
.trash .state div.trashrow {
    font-size: 12px;
}
.trash .state div.trashtoday {
    font-size: 16px;
}
.trash .state div.trashtomorrow {
    font-size: 14px;
}
</syntaxhighlight>
<br>

== Color & Transparancy ==
=== Transparent Buttons Thermostat ===
<syntaxhighlight lang="css" line='line'">
/* 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;
}
</syntaxhighlight>
<br><br>
----

=== Colored Lightbulbs ===
It is possible to use colors for the bulb-icons.
In custom.css add something like:

<syntaxhighlight lang="css" line='line'">
/*
CUSTOM CSS FILE
*/

.fa.fa-lightbulb-o.on {
    color:#F1C300;
}
.fa.fa-lightbulb-o.off {
    color:#fff;
}
</syntaxhighlight>

'''Result:<br>'''
[[File:Customcode bulb.jpg]]
<br><br><br>
----

===Lightbulbs color & Opacity===
[[File:bulb_rgba.jpg]]
* Color: green
* Opacity: 0.4
<br>
<syntaxhighlight lang="css" line='line'">
.fa.fa-lightbulb-o.on {
    color: rgba(0,255,0,0.4)
}
</syntaxhighlight>
<br><br>
----
{| width="40%"
|- valign="top"
| width="16.6%" align="center" | [[file:dv2-home.png|link=Dashticz_V2]]
| width="16.6%" align="center" | [[file:dv2-tricks.png|link=Dashticz V2 - Tips, Tricks & Customization]]
|}
{| width="40%"
|- valign="top"
| width="16.6%" align="center" | '''Dashticz V2.0 Main Page'''
| width="16.6%" align="center" | '''Tips, Tricks & Customization'''
|}

[[Category:Domoticz]]
[[Category:Customization]]