Forum Domoticz en français

Reprenez le contrôle de votre domotique
https://easydomoticz.com/forum/

Theme et Style domoticz

https://easydomoticz.com/forum/viewtopic.php?t=278

Page 1 sur 4

Theme et Style domoticz

Publié : 16 févr. 2015, 23:59
par asem
Bonjour à tous

dans les dernières version de domoticz on peut modifier le thème donc je vous présente mon thème

Image

pour télécharger c'est ici http://www.aseminfoweb.com/domoticz/as_gris_02.zip

deziper le contenu du zip,
copier le dossier "as_gris_02" dans: "/home/pi/domoticz/www/styles/" puis le sélectionner dans "configuration" > "paramètres"

à bientôt...

mise à jour du zip le 22/02/2015 20:50

Edite du 01/10/2015
remplacer le contenu du fichier "custom.css" par ça:

Code : Tout sélectionner

 /* ------- fonts */
@font-face {
   font-family: "OpenSans";
   font-style: normal;
   src: url('fonts/OpenSans.ttf');
   src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
   font-family: "DroidSans";
   font-style: normal;
   src: url('fonts/DroidSans.ttf');
   src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
@font-face {
   font-family: "Digit";
   font-style: normal;
   src: url('fonts/digit.ttf');
   src: local('Digit'), url('fonts/digit.ttf') format('truetype');
}
/* ------- body */
body {
/*background: #000 url(images/imgbg.jpg) repeat center top !important; */
background: black url(images/imgbg.jpg) no-repeat center center fixed ;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
   
}
/* ------- text apres la version */
#appversion:after {
  content: " - as-gris v2";
}
/* ------- text info */
#status, #lastupdate, body table#itemtable tr td:first-child + td + td + td + td + td{color: #bbb;}
/* ------- text avant la valeur */
/* #status:before {
 content: "Val:  " !important;
 font-weight: normal;
} */
/* -------  text avant la date de mise a jour*/
body table#itemtablesmall tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td + td:before{
 content: "" !important;
}
/* -------  text avant type appareil*/
body table#itemtablesmall tbody tr td:first-child + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td:before{
 content: "";
}

body table#itemtablesmall tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtable tbody tr td:first-child + td + td + td + td + td:before ,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td:before,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td:before,
body table#mobileitem tbody tr td:first-child + td + td + td + td + td:before{
 content: "";

}

/* -------  */
.navbar .nav {margin: 0 !important;}
/* -------  bouton haut de page*/
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-radius: 0px !important;
}
/* -------  bouton haut de page*/
#comboroom, #combofloorplan {
   font-family: Open Sans, sans-serif;
   width: 240px;
    height: 20px;
    overflow: hidden;
    background: #888;
    border: 0px solid #000;
   color: #eee;
}
/* -------  */
#room {
font-family: Open Sans, sans-serif;
}
/* ------- copyright */
copyright {
   display: none !important;
}
#copyright a {
   text-decoration: none;
   color: #666;
}

#copyright a:hover {
   text-decoration: none;
   color: #999;
}
/* ------- barre de menu */
.navbar-inverse .navbar-inner {
   padding: 10px !important;
  border: 0px;
   background-color: #111;
  background-image: -moz-linear-gradient(center top , #333, #000);
    -moz-box-shadow: 0px -5px 10px 3px #000;
    -webkit-box-shadow: 0px -5px 10px 3px #000;
    -o-box-shadow: 0px -5px 10px 3px #000;
    box-shadow: 0px -5px 20px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}
/* -------  baniere haut de page */
.bannercontent {
   padding-top: 90px !important;
}
/* ------- bouton menu */
.navbar .nav li a {
    text-decoration: none;
    text-transform: none;
    border: 0px !important;
    border-radius: 0px;
    font-family: Open Sans,sans-serif;
    padding: 10px;
    font-weight: normal !important;
    text-align: center;
    color: #aaa;
    background-image: none;
     background-color: #555;
    background-image: -moz-linear-gradient(center top , #444, #050505);
}
.navbar .nav li:hover a:hover {
    color: #FFF;
    background-color: #444 !important;
    background-image: none;
}
.navbar .nav .current_page_item > a {
     border-radius: 0px;
    color: #fff;
    background-color: #444;
    background-image: -moz-linear-gradient(center top , #999, #050505);
}
/* ------- menu deroulant */
.navbar .nav .dropdown-menu {
    border: 0px !important;
    font-family: Open Sans,sans-serif;
    padding: 5px;
    border-radius: 0px;
    background-color: #555;
    background-image: none;
    background-image: -moz-linear-gradient(center top , #555, #050505);
}
/* ------- bouton menu */
.navbar .nav li a:hover {
   background-color: #999 !important;
   background-image: none !important;
}
/* -------  */
#timesun , #room, .room{
    background-color: transparent;
   color: #999 !important;
    float: left !important;
    padding: 5px !important;
    margin-left: -7px !important;
    margin-top: -29px !important;
   /* z-index: 1031;
    position: fixed;*/
    border-bottom-left-radius: 0px;
   border-bottom-right-radius: 0px;
   border-color: transparent;
   font-size: 10px;
   /* display: none; */
}
/* ------- couleur titre (domoticz) */
   .brand h1{
   color: #666;
}
/* ------- version */
.brand h2{
   padding:0px !important;    width: 200px; font-size:12px;
   background-color: transparent;
  color: #555;
   border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px 0px 0px 0px #000;
    -webkit-box-shadow:inset 0px 0px 0px 0px #000;
    -o-box-shadow:inset  0px 0px 0px 0px #000;
    box-shadow:inset  0px 0px 0px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=0);
}
/* ------- barre de titre groupe*/
h2{
   margin-left: 0px;
   margin-top: 10px;
   margin-bottom: 3px;
   font-family: Open Sans,sans-serif;
   text-decoration: none;
   text-transform: none;
   font-size: 1.2em;
   font-weight: 200;
   color: #fff;
   background-color: #1a1a1a;
   padding: 5px;
   padding-left: 15px;   
   border-top-left-radius: 0px;
   border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px -5px 10px 3px #000;
    -webkit-box-shadow:inset 0px -5px 10px 3px #000;
    -o-box-shadow:inset  0px -5px 10px 3px #000;
    box-shadow:inset  0px -5px 10px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}

/* ------- bouton haut de page */
.btnstyle, .btnstylerev {
    display: inline-block;
    height: 2.0em;
    margin-top: 0px;
    padding: 0px 10px 0px 10px;
     /*background: #555 url(images/imgbg.jpg) repeat !important;*/
    background-image: none;
      background-color: #555;
    border-radius: 0px;
    line-height: 2.0em;
    text-decoration: none;
    text-transform: none;
    font-size: 1em;
    color: #999;
    outline: medium none;
    cursor: pointer;
    overflow: hidden;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}
.btnstyle:hover, .btnstylerev:hover {
   color: #ccc;
  background-image: none;
  background-color: #444;
}
/* ------- cellule appareil */
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtablenostatus tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#mobileitem tbody tr:hover {
     padding-bottom: 10px !important;
    background-color: #333 !important;
    border-radius: 5px;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=10);
}

/* ------- titre celule */
body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tbody tr td:first-child,
body table#itemtablenostatus tbody tr td:first-child,
body table#itemtabledoubleicon tbody tr td:first-child ,
body table#itemtablenotype tbody tr td:first-child ,
body table#itemtabletrippleicon tbody tr td:first-child ,
body table#itemtablesmalltrippleicon tbody tr td:first-child ,
body table#mobileitem tbody tr td:first-child{
    display: block;
    width: 100% !important;
    height: 20px !important;
    padding: 5px;   
    border-style: none;
    border-radius: 0px !important;
    color: #eee;
    background-color: #111 !important;;
     font-family: Droid Sans,sans-serif !important;
     margin-top: -5px;
     margin-left: -5px;
}
/* ------- titre celule hover */
body table#itemtablesmall tbody tr:hover td:first-child,
body table#itemtablesmalldoubleicon tbody tr:hover td:first-child ,
body table#itemtable tbody tr:hover td:first-child,
body table#itemtablenostatus tbody tr:hover td:first-child,
body table#itemtabledoubleicon tbody tr:hover td:first-child ,
body table#itemtablenotype tbody tr:hover td:first-child ,
body table#itemtabletrippleicon tbody tr:hover td:first-child ,
body table#itemtablesmalltrippleicon tbody tr:hover td:first-child ,
body table#mobileitem tr:hover td:first-child{
    color: #aaccff;
    background-color: #111 !important;
}
/*-------- text valeur */
body table#itemtablesmall tbody tr td:first-child + td,
body table#itemtablenotype tbody tr td:first-child + td,
body table#itemtable tbody tr td:first-child + td,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td,
body table#itemtabledoubleicon tbody tr td:first-child + td,
body table#itemtabletrippleicon tbody tr td:first-child + td,
body table#itemtablenostatus tbody tr td:first-child + td{
    float: right;
    margin: -35px 3px 0px 0px;
    font-size: 200%;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    font-family: Opensans,Droid Sans,sans-serif !important;
     background-color: #111 !important;
    border-bottom-left-radius: 15px;
    padding-left:10px;
    padding-right:8px;
    min-width:120px;
    text-align: center;
    margin: -35px -5px 0px 0px;
    /* -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow:  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);*/
}

/*-------- text valeur double et triple*/

body table#itemtablesmalldoubleicon tbody tr td:first-child + td,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td,
body table#itemtabledoubleicon tbody tr td:first-child + td,
body table#itemtabletrippleicon tbody tr td:first-child + td{
    float: right;
    margin: -35px 3px 0px 0px;
    font-size: 200%;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    font-family: Opensans,Droid Sans,sans-serif !important;
     background-color: #111 !important;
    border-bottom-left-radius: 15px;
    padding-left:10px;
    padding-right:8px;
    min-width:110px;
    text-align: center;
    margin: -35px -5px 0px 0px;
}

/* ------- titre celule */
#name {
   background-color: #111 !important;
}

/* ------- petit bouton */
.btnsmall, .btnsmall-dis  {
   background: transparent !important;
   color: #777;
   -moz-border-radius: 0 0 0 0;
   -webkit-border-radius: 0 0 0 0;
   border-radius: 0 0 0 0;
   font-size:12px;
   margin:0px;
   padding: 3px;
   border-bottom: 5px transparent solid !important;
}
/* ------- petit bouton */
.btnsmall:hover, .btnsmall-dis:hover {
   background: transparent !important;
   color: #eee;
   -moz-border-radius: 0 0 0 0;
   -webkit-border-radius: 0 0 0 0;
   border-radius: 0 0 0 0;
   font-size:12px;
   margin:0px;
   padding: 3px;
   border-bottom: 5px #aaccff solid !important;
}

/* Row Fix */
.bannav{
    margin-top: 15px;
width: 99.5% !important;
}
/* -------  couleur graphiques */
.highcharts-background{
   stroke:#333;
}

*{
   stop-color:#252525;
}

/* ------ mise en forme des sliders */
.dimslider {
   z-index:1;
   border-width: 0px;
   border-style: solide;
   border-color: #333 #333 #777 #333;
   width: 100%;
   margin-top: 0px;
   max-width: 59%;
   position: absolute;
   height: 13px;
   background-color: #8e8d8d;
   /*background: url('images/bg-track.png') repeat top left;*/
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.dimslider .ui-slider-handle {
   position: absolute;
   z-index: 2;
   width: 25px;
   height: 25px;
   cursor: pointer;
   /*background: url('images/handle.png') no-repeat 50% 50%;*/
   font-weight: bold;
   color: #6495ED;
   border-style: none;
   outline: none;
   top: -6px;
   margin-left: -12px;
}
.dimslider .ui-slider-range {
   background: #ffffff; /* Old browsers */
   background: -moz-linear-gradient(top,  #8DD3F3 0%, #0E3957 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD3F3), color-stop(100%,#0E3957)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* IE10+ */
   background: linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8DD3F3', endColorstr='#0E3957',GradientType=0 ); /* IE6-9 */
   position: absolute;
   border: 0;
   top: 0;
   height: 100%;
   border-radius: 25px;
}

.dimslider, .ui-slider-handle .ui-corner-all {
border-radius: 6px !important;
border-style: hidden;
}
.dimslider .ui-corner-all {
border-radius: 6px !important;
}

/* Mobile Dashboard items */
table.mobileitem {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
      border-style: none;
      background-color: #333;
    width: 100%;
}

.mobileitem {
    border: solid #030307 1px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: 0 1px 1px #030307;
    -moz-box-shadow: 0 1px 1px #030307;
    box-shadow: 0 1px 1px #030307;         
      color: white;
      background-color: #333;
}

.mobileitem #name {
   background-color: #333 !important;
}
.mobileitem #name:hover {
   color: #ACF;
}
.mobileitem tr:hover {
    background: #333;
    -o-transition: all 0.1s ease-in-out;
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;     
}   
   
.mobileitem td, .mobileitem th {
    border-left: 0px solid #030307;
    border-top: 1px solid #030307;
    padding: 6px;
    text-align: left;   
}

.mobileitem th {
    background-color: #111;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#030307), to(#111));
    background-image: -webkit-linear-gradient(top, #030307, #111);
    background-image: -moz-linear-gradient(top, #030307, #111);
    background-image: -ms-linear-gradient(top, #030307, #111);
    background-image: -o-linear-gradient(top, #030307, #111);
    background-image: linear-gradient(top, #030307, #111);
    -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
    -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
    border-top: none;
       text-shadow: 0 0px 0 black;
      font-weight: bold;
}

.mobileitem td:first-child, .mobileitem th:first-child {
    border-left: none;
}

.mobileitem td:last-child {
  font-weight: bold;
  text-align: right;
}

.mobileitem .btn-mini {
   font-family: Arial,Helvetica,sans-serif;
   font-size: 10pt;
  font-weight: bold;
}

.mobileitem th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
}

.mobileitem th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
}

.mobileitem th:only-child{
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
}

.mobileitem tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
}

.mobileitem tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

body table#itemtablesmall tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtable tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtablenotype tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtablenostatus tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td + #type,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td#type,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td#type,
body table#mobileitem tbody tr td:first-child + td + td + td + td + td#type{ 
   font-size:0px;
   margin-top:15px;
   padding-left:52px;
}
body table#itemtabledoubleicon tbody tr td:first-child + td + td + td + td + td + td#type,
body table#itemtabletrippleicon tbody tr td:first-child + td + td + td + td + td + td#type,
body table#itemtablesmalldoubleicon tbody tr td:first-child + td + td + td + td + td + td#type,
body table#itemtablesmalltrippleicon tbody tr td:first-child + td + td + td + td + td + td#type{ 
   font-size:0px;
   margin-top:7px;
   padding-left:5px;
 
}

Re: Theme et Style domoticz

Publié : 17 févr. 2015, 11:04
par hobbe
Sympa, merci !

Re: Theme et Style domoticz

Publié : 17 févr. 2015, 17:27
par vil1driver
sympa merci, petit problème avec les dimmer, la barre dépasse.. mais c'est pareil pour les autres thèmes, sauf celui par défaut.

sinon c'est complet et plutôt sympa, bien plus que ceux proposés de base, j'aime la façon dont les icônes ressortes :p

perso je n'aime pas trop le shadow autour des températures, surtout le fait qu'il dépasse du cadre, mais les gouts et les couleurs :D
je pense modifier ça...

merci pour le partage, je pense l'utiliser à partir de maintenant =)

Re: Theme et Style domoticz

Publié : 19 févr. 2015, 21:58
par vil1driver
j'ai :

supprimé l'ombre sous les températures,
modifier la disposition du fond (je n'aimais pas les barres de séparation),
et corrigé les slider des dimmer.

voici le code complet :
custom.css

Code : Tout sélectionner

/* ------- fonts */
@font-face {
	font-family: "OpenSans";
	font-style: normal;
	src: url('fonts/OpenSans.ttf');
	src: local('OpenSans'), url('fonts/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: "DroidSans";
	font-style: normal;
	src: url('fonts/DroidSans.ttf');
	src: local('DroidSans'), url('fonts/DroidSans.ttf') format('truetype');
}
@font-face {
	font-family: "Digit";
	font-style: normal;
	src: url('fonts/digit.ttf');
	src: local('Digit'), url('fonts/digit.ttf') format('truetype');
}
/* ------- body */
body {
/*background: #000 url(images/imgbg.jpg) repeat center top !important; */
background: white url(images/imgbg.jpg) no-repeat center center fixed ;
-webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
	
}
/* ------- text apres la version */
#appversion:after {
  content: " - as-gris v2";
}
/* ------- text info */
#status, #lastupdate, body table#itemtable tr td:first-child + td + td + td + td + td{color: #bbb;}
/* ------- text avant la valeur */
#status:before {
 content: "Val:  " !important;
 font-weight: normal;
}
/* -------  text avant la date de mise a jour*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Last: " !important;
}
/* -------  text avant type appareil*/
body table#itemtablesmall tr td:first-child + td + td + td + td:before, 
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td + td:before,
body table#itemtable tr td:first-child + td + td + td + td:before ,
body table#itemtablenotype tr td:first-child + td + td + td + td:before,
body table#itemtablenostatus tr td:first-child + td + td + td + td:before,
body table#itemtabletrippleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalldoubleicon tr td:first-child + td + td + td + td:before,
body table#itemtablesmalltrippleicon tr td:first-child + td + td + td + td:before,
body table#mobileitem tr td:first-child + td + td + td + td:before{
 content: "Type:"
}
/* -------  */ 
.navbar .nav {margin: 0 !important;}
/* -------  bouton haut de page*/
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-radius: 0px !important;
}
/* -------  bouton haut de page*/
#comboroom, #combofloorplan {
	font-family: Open Sans, sans-serif;
	width: 240px;
    height: 20px;
    overflow: hidden;
    background: #888;
    border: 0px solid #000;
	color: #eee;
}
/* -------  */
#room {
font-family: Open Sans, sans-serif;
}
/* ------- copyright */
copyright {
	display: none !important;
}
#copyright a {
	text-decoration: none;
	color: #666;
}

#copyright a:hover {
	text-decoration: none;
	color: #999;
}
/* ------- barre de menu */
.navbar-inverse .navbar-inner {
	padding: 10px !important;
  border: 0px;
	background-color: #111;
  background-image: -moz-linear-gradient(center top , #333, #000);
    -moz-box-shadow: 0px -5px 10px 3px #000;
    -webkit-box-shadow: 0px -5px 10px 3px #000;
    -o-box-shadow: 0px -5px 10px 3px #000;
    box-shadow: 0px -5px 20px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
/* -------  baniere haut de page */
.bannercontent {
	padding-top: 90px !important;
}
/* ------- bouton menu */
.navbar .nav li a {
    text-decoration: none;
    text-transform: none;
    border: 0px !important;
    border-radius: 0px;
    font-family: Open Sans,sans-serif;
    padding: 10px;
    font-weight: normal !important;
    text-align: center;
    color: #aaa;
    background-image: none;
	  background-color: #555;
    background-image: -moz-linear-gradient(center top , #444, #050505);
}
.navbar .nav li:hover a:hover {
    color: #FFF;
    background-color: #444 !important;
    background-image: none;
}
.navbar .nav .current_page_item > a {
	  border-radius: 0px;
    color: #fff;
    background-color: #444;
    background-image: -moz-linear-gradient(center top , #999, #050505);
}
/* ------- menu deroulant */
.navbar .nav .dropdown-menu {
    border: 0px !important;
    font-family: Open Sans,sans-serif;
    padding: 5px;
    border-radius: 0px;
    background-color: #555;
    background-image: none;
    background-image: -moz-linear-gradient(center top , #555, #050505);
}
/* ------- bouton menu */
.navbar .nav li a:hover {
	background-color: #999 !important;
	background-image: none !important;
}
/* -------  */
#timesun , #room, .room{
    background-color: transparent;
	color: #999 !important;
    float: left !important;
    padding: 5px !important;
    margin-left: -7px !important;
    margin-top: -29px !important;
   /* z-index: 1031;
    position: fixed;*/
    border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
	border-color: transparent;
	font-size: 10px;
	/* display: none; */
}
/* ------- couleur titre (domoticz) */
	.brand h1{
	color: #666;
}
/* ------- version */
.brand h2{
	padding:0px !important; 	width: 200px; font-size:12px; 
	background-color: transparent;
  color: #555;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px 0px 0px 0px #000;
    -webkit-box-shadow:inset 0px 0px 0px 0px #000;
    -o-box-shadow:inset  0px 0px 0px 0px #000;
    box-shadow:inset  0px 0px 0px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=0);
}
/* ------- barre de titre groupe*/
h2{
	margin-left: 0px;
	margin-top: 10px;
	margin-bottom: 3px;
	font-family: Open Sans,sans-serif;
	text-decoration: none;
	text-transform: none;
	font-size: 1.2em;
	font-weight: 200;
	color: #fff;
	background-color: #1a1a1a;
	padding: 5px;
	padding-left: 15px;	
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
    -moz-box-shadow:inset 0px -5px 10px 3px #000;
    -webkit-box-shadow:inset 0px -5px 10px 3px #000;
    -o-box-shadow:inset  0px -5px 10px 3px #000;
    box-shadow:inset  0px -5px 10px 3px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- bouton haut de page */
.btnstyle, .btnstylerev {
    display: inline-block;
    height: 2.0em;
    margin-top: 0px;
    padding: 0px 10px 0px 10px;
	  /*background: #555 url(images/imgbg.jpg) repeat !important;*/
    background-image: none;
		background-color: #555;
    border-radius: 0px;
    line-height: 2.0em;
    text-decoration: none;
    text-transform: none;
    font-size: 1em;
    color: #999;
    outline: medium none;
    cursor: pointer;
    overflow: hidden;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}
.btnstyle:hover, .btnstylerev:hover {
	color: #ccc;
  background-image: none;
  background-color: #444;
}
/* ------- cellule appareil */
body table#itemtablesmall tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtable tbody tr,
body table#itemtablenotype tbody tr,
body table#itemtablenostatus tbody tr,
body table#itemtabletrippleicon tbody tr,
body table#itemtabledoubleicon tbody tr,
body table#itemtablesmalldoubleicon tbody tr,
body table#itemtablesmalltrippleicon tbody tr,
body table#mobileitem tbody tr,
body table#itemtablesmall tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtable tbody tr:hover,
body table#itemtablenotype tbody tr:hover,
body table#itemtablenostatus tbody tr:hover,
body table#itemtabletrippleicon tbody tr:hover,
body table#itemtabledoubleicon tbody tr:hover,
body table#itemtablesmalldoubleicon tbody tr:hover,
body table#itemtablesmalltrippleicon tbody tr:hover,
body table#mobileitem tbody tr:hover {
	  padding-bottom: 10px !important;
    background-color: #333 !important;
    border-radius: 5px;
    -moz-box-shadow:inset 0px 0px 10px 0px #000;
    -webkit-box-shadow:inset 0px 0px 10px 0px #000;
    -o-box-shadow:inset  0px 0px 10px 0px #000;
    box-shadow:inset  0px 0px 10px 0px #000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
body table#itemtablesmall tbody tr td:first-child,
body table#itemtablesmalldoubleicon tbody tr td:first-child ,
body table#itemtable tr td:first-child,
body table#itemtablenostatus tr td:first-child,
body table#itemtabledoubleicon tr td:first-child ,
body table#itemtablenotype tr td:first-child ,
body table#itemtabletrippleicon tr td:first-child ,
body table#itemtablesmalltrippleicon tr td:first-child ,
body table#mobileitem tr td:first-child{
    display: block;
    width: 100% !important;
    height: 20px !important;
    padding: 5px;    
    border-style: none;
    border-radius: 0px !important;
    color: #eee;
    background-color: #111 !important;;
	  font-family: Droid Sans,sans-serif !important;
	  margin-top: -5px;
	  margin-left: -5px;
}
/* ------- titre celule hover */
body table#itemtablesmall tbody tr:hover td:first-child,
body table#itemtablesmalldoubleicon tbody tr:hover td:first-child ,
body table#itemtable tr:hover td:first-child,
body table#itemtablenostatus tr:hover td:first-child,
body table#itemtabledoubleicon tr:hover td:first-child ,
body table#itemtablenotype tr:hover td:first-child ,
body table#itemtabletrippleicon tr:hover td:first-child ,
body table#itemtablesmalltrippleicon tr:hover td:first-child ,
body table#mobileitem tr:hover td:first-child{
    color: #aaccff;
    background-color: #111 !important;
}
/*-------- text valeur */
body table#itemtablesmall tr td:first-child + td,
body table#itemtablenotype tr td:first-child + td,
body table#itemtable tr td:first-child + td{
    float: right;
    margin: -35px 3px 0px 0px;
    font-size: 210%;
    font-weight: normal;
    white-space: nowrap;
    color: #fff;
    font-family: Opensans,Droid Sans,sans-serif !important;
	  background-color: #111 !important; 
    border-bottom-left-radius: 15px;
    padding-left:10px;
    padding-right:8px;
    min-width:130px;
    text-align: center;
    margin: -35px -5px 0px 0px;
    /* -moz-box-shadow: 0px 0px 10px 0px #000;
    -webkit-box-shadow: 0px 0px 10px 0px #000;
    -o-box-shadow: 0px 0px 10px 0px #000;
    box-shadow:  0px 0px 10px 0px #000; */
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#ffffff, Direction=NaN, Strength=10);
}

/* ------- titre celule */
#name {
	background-color: #111 !important;
}

/* ------- petit bouton */
.btnsmall {
	background: #3b3b3b !important;
	color: #888;
	border-radius: 0px !important;
	font-family: Droid Sans,sans-serif !important;
}
/* ------- petit bouton */
.btnsmall:hover {
color: #eee;
border-radius: 0px !important;
background: #333 !important;	
}

/* Row Fix */
.bannav{
    margin-top: 15px;
width: 99.5% !important;
}
/* -------  couleur graphiques */
.highcharts-background{
stroke:#333;
}

*{
stop-color:#252525;
}


.dimslider {
	z-index:1;
	border-width: 0px;
	border-style: solide;
	border-color: #333 #333 #777 #333;
	width: 100%;
	margin-top: 0px;
	max-width: 70%;
	position: absolute;
	height: 13px;
	background-color: #8e8d8d;
	/*background: url('images/bg-track.png') repeat top left;*/
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0) inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
}

.dimslider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 25px;
	height: 25px;
	cursor: pointer;
	/*background: url('images/handle.png') no-repeat 50% 50%;*/
	font-weight: bold;
	color: #6495ED;
	border-style: none;
	outline: none;
	top: -6px;
	margin-left: -12px;
}
.dimslider .ui-slider-range {
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #8DD3F3 0%, #0E3957 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD3F3), color-stop(100%,#0E3957)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* IE10+ */
	background: linear-gradient(top,  #8DD3F3 0%,#0E3957 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8DD3F3', endColorstr='#0E3957',GradientType=0 ); /* IE6-9 */
	position: absolute;
	border: 0;
	top: 0;
	height: 100%;
	border-radius: 25px;
}

.dimslider, .ui-slider-handle .ui-corner-all {
border-radius: 6px !important;
border-style: hidden;
}
.dimslider .ui-corner-all {
border-radius: 6px !important;
}
encore merci à toi pour ton partage.

Re: Theme et Style domoticz

Publié : 19 févr. 2015, 23:49
par asem
cool que ça te plaise

les barres de séparation n’étais pas volontaire :? merci
les ombres comme tu dit les goûts et les couleurs ;) .....
le dimmer j'avais pas vu oups! merci de la correction
merci pour le partage, je pense l'utiliser à partir de maintenant =)
moi j'ai pris le tien avec les corrections :lol: :lol:

aller tous au design de domoticz... :D

Re: Theme et Style domoticz

Publié : 20 févr. 2015, 18:31
par Jose
Super travail, j'adhère.

Faut pas hésiter à purger le cache du navigateur CTRL+ F5

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 12:33
par Fredspace
Salut asem
Franchement super boulot je trouve ça tres réussit.
Par contre j ai un petit soucis avec la page d accueil version mobile. En effet sur le tableau d accueil, j ai les cellules de gauches ( là où il y a la dénomination des modules) qui est en fond noir avec écriture noire.
Je suis pas très doué en css j ai un peu cherché mais j ai pas trouvé si tu peux m aiguiller ^^.

Merci à toi

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 12:54
par vil1driver
Jose a écrit :Super travail, j'adhère.

Faut pas hésiter à purger le cache du navigateur CTRL+ F5
ça ne se fait pas comme ça !!!

http://easydomoticz.com/les-caches-des- ... -domoticz/

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 13:36
par Jose
L'article est parfait et je confirme que CTRL F5 fonctionne.

Re: Theme et Style domoticz

Publié : 21 févr. 2015, 13:45
par vil1driver
tu confonds probablement cache et données hors connexion..
Fuseau horaire sur UTC+02:00
Page 1 sur 4

Développé par phpBB® Forum Software © phpBB Limited

Traduction française officielle © Qiaeru