[S'inspirer] Postez vos Customisations (Javascipt / CSS)

[nickasimir]

oui mais selon les tuiles ca me mets le text ou les commandes en dehors de la tuile.

[vins]

Bonjours,
Je suis à la recherche d'un code pour faire un menu déroulant ou un cadre et une barre deroulante avec des informations pour mon design.

Menu déroulant : j'ai pris le code dans trucs et astuces du forum mais pas de barre déroulante.

Merci

Envoyé de mon SM-G360F en utilisant Tapatalk

[nickasimir]

je reviens a la charge après plusieurs test j'ai tjrs pas trouver comment réduire les espace dans mes tuiles

Comment avoir le texte plus a gauche? ou le faire sur deux lignes?
Mettre le nom de la commande sur une ligne et les valeur en dessous?
Supprimer les espace entre, avant et après les valeurs ?

Bref comment bien harmoniser une tuile, je n'ai pas vu de réelle sujet qui en parlait.
ma petit capture pour se donner une idée :

sshot-8.png (122.77 Kio) Consulté 4444 fois

Merci à vous

[winhex]

cherche pas tu ne trouveras rien

regarde les widgets deja créé
des site comme http://www.w3schools.com t'aideront
style relative/absolute
avec les placement (top, right,… )

des commande de retour ligne et colonne aussi

en dupliquant et modifiant ceux créé tu y arrivera

exemple flatdesign


jouer sur la taille fe l'image te servira aussi pour un placement
ex

Code : Tout sélectionner

div style="width:100px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
               <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
       <br/>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
       <br/>   <br/>
 <strong style="font-size: 14px;">#collectDate#</strong>
  </center> 
</div>
    <script>
      if ('#state#' == '1' || '#state#' == 1) {
             $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_open.png" height=120 width=105 />');
        }
        if ('#state#' == '0' || '#state#' == 0) {
                  $('#iconCmd#id#').append('<img src=" plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_close.png" height=120 />');

        }
    </script>
</div>

[nickasimir]

cherche pas tu ne trouveras rien

regarde les widgets deja créé
des site comme http://www.w3schools.com t'aideront
style relative/absolute
avec les placement (top, right,… )

des commande de retour ligne et colonne aussi

en dupliquant et modifiant ceux créé tu y arrivera

exemple flatdesign


jouer sur la taille fe l'image te servira aussi pour un placement
ex

Code : Tout sélectionner

div style="width:100px;min-height:80px;" class="cmd #history# tooltips cmd-widget" data-type="info" data-subtype="numeric" data-cmd_id="#id#" title="Valeur du #valueDate#, collectée le #collectDate#">
    <center>
               <span class='cmdName' style="font-weight: bold;font-size : 12px;#hideCmdName#;">#name_display#</span>
       <br/>
      <span style="font-size: 3.5em;" id="iconCmd#id#"></span>
       <br/>   <br/>
 <strong style="font-size: 14px;">#collectDate#</strong>
  </center> 
</div>
    <script>
      if ('#state#' == '1' || '#state#' == 1) {
             $('#iconCmd#id#').append('<img src="plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_open.png" height=120 width=105 />');
        }
        if ('#state#' == '0' || '#state#' == 0) {
                  $('#iconCmd#id#').append('<img src=" plugins/widget/core/template/dashboard/cmd.info.binary.frigo/refrigerator_close.png" height=120 />');

        }
    </script>
</div>

Merci pour ton retour qd tu n'es pas dev ca devient vite compliqué déjà en retirant le widget title j'ai plus de problème d'espace...

[Didier3L]

Bonjour,
Pour obtenir des tuiles transparentes sur mon Dashboard j'ai utilisé le code CSS trouvé dans truc et astuces

Code : Tout sélectionner

legend {
    background-color: rgba(0, 0, 0, 0.17);
    text-align: center;
      border-bottom: 2px solid #A17734;
    color: rgb(0, 102, 204);
  }

.scenario-widget {
    background-color: rgba(0, 0, 0, 0.17);
}
.footer  {
    background-color: rgba(0, 0, 0, 0.17);
}
.eqLogic-widget {
    border-radius: 15px !important;
    box-shadow: 0px 3px 10px #0d0d0d !important;
    background-color: rgba(0,0,0,0.20) !important;
}
[type="checkbox"] {
   position: relative !important;
     top: 0px !important;
}

Est il possible d'avoir des transparences différentes entre le Dashbord et dans le Design
Est il possible d'avoir une transparence complète seulement pour le Design

MyPicture2.jpg (58.8 Kio) Consulté 4206 fois

[Anonyme]

Contenu supprimé à la demande de son auteur

[Didier3L]

Oui j'ai vue cette possibilité pour chaque équipement de choisir le mode transparent.
Mais sauf erreur, la transparence n'est pas paramétrable (tout ou rien)
et il faut le faire pour chaque équipement et virtuel

Avec le code CSS, on pouvait tout faire d'un coup

[Darkeyes]

Salut,

Dites moi vous auriez la syntaxe, pour mettre la transparence comme le thème darksobre (c'est a dire transparent mais en gardant les codes couleurs)?
Car j'ai certains widgets qui ne sont plus transparents et j'aurai voulu mettre la transparence en forcée le temps que les dev mettes a jours leur widget.
J'ai ça:

Code : Tout sélectionner

/* bordure arrondie et ombre, transparence */
.eqLogic-widget {
    background-color: rgba(0,0,0, 0.76) !important;
    border-radius: 15px !important;
    box-shadow: 0px 3px 10px #0d0d0d !important;
}

Le problème vient sûrement des valeurs rgba mais je ne sais pas quoi mettre, car là c'est tout transparent

Merci par avance

[Claude69]

Salut,

Dites moi vous auriez la syntaxe, pour mettre la transparence comme le thème darksobre (c'est a dire transparent mais en gardant les codes couleurs)?
Car j'ai certains widgets qui ne sont plus transparents et j'aurai voulu mettre la transparence en forcée le temps que les dev mettes a jours leur widget.
J'ai ça:

Code : Tout sélectionner

/* bordure arrondie et ombre, transparence */
.eqLogic-widget {
    background-color: rgba(0,0,0, 0.76) !important;
    border-radius: 15px !important;
    box-shadow: 0px 3px 10px #0d0d0d !important;
}

Le problème vient sûrement des valeurs rgba mais je ne sais pas quoi mettre, car là c'est tout transparent

Merci par avance

Hello
A l'époque ou j'utilisais le transparent, j'avais :

Code : Tout sélectionner

$(document).ready (function(){
  if (window.location.href.indexOf("p=plan") > -1) {
    $('.eqLogic-widget').css({'background':'rgba(255,255,255,0.5)'});
  }
});

[Darkeyes]

Ne marche pas tous mes widget passent gris transparents

[Didier3L]

Ne marche pas tous mes widget passent gris transparents

essaye rgba(0,0,0,0.17)

[Darkeyes]

Ne marche pas tous mes widget passent gris transparents

essaye rgba(0,0,0,0.17)

Merci mais c'est ce que j'avais déja tenté, le truc c'est que je veux garder les couleurs des types chauffage, lumière.
et la les fonds sont transparent sens couleur.
Faut que je regarde le code du thème darksobre

[Didier3L]

Tu peux effectivement modifier le fichier darksorbre.js situé à /core/themes/darksobre/desktop

Code : Tout sélectionner

/* DARK SOBRE JS BETA v0.9.4 */
var dark_sobre = {
  config : {
  
    dashboard : { //activé par défaut
      enable: true , //metre à false pour désactiver la transparence des widget sur le dashboard, DEFAUT: true
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint sur le dashboard, DEFAUT: false
    },
    
    view : { //activé par défaut
      enable: true , //metre à false pour désactiver la transparence des widget dans les vues, DEFAUT: true
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint dans les vues, DEFAUT: false
    },
    
    plan : { //désactivé par défaut
      enable: false , //metre à true pour activer la transparence des widget dans les designs, DEFAUT: false
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint dans les designs, DEFAUT: false
    },
    
    delay : { //désactivé par défaut
      enable: false , //Mettre à true pour utiliser les delais (pb de transparence des tuiles parfois avec chrome), DEFAUT: false
      local_adress: '192.168.0.1' , //entrez votre adresse locale, ex:'192.168.0.1' ou 'jeedom.local'
      local_timeout: 200 ,  //delay en locale (1000 corespond à 1 seconde), DEFAUT: 200
      external_timeout: 800 //delay lors d'un accès distant (1000 corespond à 1 seconde), DEFAUT: 800
    },
    
    advanced : {
      opacity : 0.4 , //opacité du fond des tuiles, entre 0 et 1, DEFAUT: 0.4
      duration_fadeIn : 300 , //durée du fondu d'apparition des pages (1000 corespond à 1 seconde), 0 pour désactiver, DEFAUT: 300
      delay_fadeIn : 10 , //ne pas toucher, delai avant déclanchement du fade, DEFAUT: 10
      force_visible_delay: 1000, //ne pas toucher, delai avant affichage forcé de la page si aucun widget trouvé (bug chrome aléatoire), DEFAUT: 1000
    }

  }
};

[Darkeyes]

Tu peux effectivement modifier le fichier darksorbre.js situé à /core/themes/darksobre/desktop

Code : Tout sélectionner

/* DARK SOBRE JS BETA v0.9.4 */
var dark_sobre = {
  config : {
  
    dashboard : { //activé par défaut
      enable: true , //metre à false pour désactiver la transparence des widget sur le dashboard, DEFAUT: true
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint sur le dashboard, DEFAUT: false
    },
    
    view : { //activé par défaut
      enable: true , //metre à false pour désactiver la transparence des widget dans les vues, DEFAUT: true
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint dans les vues, DEFAUT: false
    },
    
    plan : { //désactivé par défaut
      enable: false , //metre à true pour activer la transparence des widget dans les designs, DEFAUT: false
      removeBackground: false , //mettre à true pour ne pas afficher le papier peint dans les designs, DEFAUT: false
    },
    
    delay : { //désactivé par défaut
      enable: false , //Mettre à true pour utiliser les delais (pb de transparence des tuiles parfois avec chrome), DEFAUT: false
      local_adress: '192.168.0.1' , //entrez votre adresse locale, ex:'192.168.0.1' ou 'jeedom.local'
      local_timeout: 200 ,  //delay en locale (1000 corespond à 1 seconde), DEFAUT: 200
      external_timeout: 800 //delay lors d'un accès distant (1000 corespond à 1 seconde), DEFAUT: 800
    },
    
    advanced : {
      opacity : 0.4 , //opacité du fond des tuiles, entre 0 et 1, DEFAUT: 0.4
      duration_fadeIn : 300 , //durée du fondu d'apparition des pages (1000 corespond à 1 seconde), 0 pour désactiver, DEFAUT: 300
      delay_fadeIn : 10 , //ne pas toucher, delai avant déclanchement du fade, DEFAUT: 10
      force_visible_delay: 1000, //ne pas toucher, delai avant affichage forcé de la page si aucun widget trouvé (bug chrome aléatoire), DEFAUT: 1000
    }

  }
};

Merci pour l'info, j'y ai pensé mais c'est pas très propre, j'aurai voulu mettre la modif dans la personnalisation avancée de jeedom.
Comme ça si MAJ pas besoin de tout recommencer

[Didier3L]

Avec la nouvelle version de Jeedom on peut mettre la transparence tout en conservant la couleur de la tuile
Mais il faut le paramétrer pour chaque équipement
(Roue crantée en haut à droite / affichage avancé )


Envoyé de Tapatalk

[Darkeyes]

Avec la nouvelle version de Jeedom on peut mettre la transparence tout en conservant la couleur de la tuile
Mais il faut le paramétrer pour chaque équipement
(Roue crantée en haut à droite / affichage avancé )


Envoyé de Tapatalk

Sauf que certains plugins n'ont pas été mis à jour pour gérer cette nouvelle option

[ouquoi]

Sauf que certains plugins n'ont pas été mis à jour pour gérer cette nouvelle option

Ha ok je me demandais pourquoi je n'avais pas cette option dans certain plugin. Sait tu l'evolution qu'il faut faire pour rendre le plugin compatible ?

Merci

[idem]

Question au sujet de la derniere MAJ Jeedom :

C 'est normal que ma CSS ne fonctionne plus ?

body {
background-image: url("/core/img/fond-ecran4.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: rgb(51, 153, 243);
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
font-size: 130%;
}

Quelqu'un a déjà eu ce phénomène ?

[Sshafi]

Pas possible pour moi de checker, je suis en vacances, mais si t'as pas eu de réponse d'ici la semaine prochaine, sonne moi et je regarderai

From Tapatruc...