Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

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

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
nickasimir
Actif
Messages : 684
Inscription : 06 août 2014, 19:35
Localisation : Montreuil, Idf

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

Message par nickasimir » 23 mars 2016, 22:00

oui mais selon les tuiles ca me mets le text ou les commandes en dehors de la tuile.
Jeedom en DIY sur NUCI3| Mon Matos : Ici

vins
Timide
Messages : 359
Inscription : 09 nov. 2014, 10:44

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

Message par vins » 24 avr. 2016, 09:15

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
2 RPI jeedom : EcoDevices, RFXCom, Zwave, Enocean, PlcBus, squeeze, Kodi, SNMP, Camera, Présence, Alarme, Imperihome, Pushbullet,
Ipfire bananaPi : Routeur 3G/4G, Asterisk, SMB, print/scan, (Serveur mail)

Avatar de l’utilisateur
nickasimir
Actif
Messages : 684
Inscription : 06 août 2014, 19:35
Localisation : Montreuil, Idf

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

Message par nickasimir » 22 mai 2016, 13:43

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
sshot-8.png (122.77 Kio) Consulté 2489 fois
Merci à vous
Jeedom en DIY sur NUCI3| Mon Matos : Ici

winhex
Actif
Messages : 3011
Inscription : 23 janv. 2015, 01:41

Re: Re : [S'inspirer] Postez vos Customisations (Javascipt /

Message par winhex » 22 mai 2016, 17:58

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
Image

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

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>

Avatar de l’utilisateur
nickasimir
Actif
Messages : 684
Inscription : 06 août 2014, 19:35
Localisation : Montreuil, Idf

Re: Re : [S'inspirer] Postez vos Customisations (Javascipt /

Message par nickasimir » 22 mai 2016, 21:51

winhex a écrit :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
Image

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

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...
Jeedom en DIY sur NUCI3| Mon Matos : Ici

Didier3L
Actif
Messages : 1002
Inscription : 01 mai 2016, 13:40

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

Message par Didier3L » 24 juil. 2016, 18:15

Bonjour,
Pour obtenir des tuiles transparentes sur mon Dashboard j'ai utilisé le code CSS trouvé dans :arrow: 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
MyPicture2.jpg (58.8 Kio) Consulté 2251 fois
Synology DS216+ / DSM 6.2 / Docker / MariaDB 10
Conteneur : jeedom/Jeedom:master en mode réseau Host
Protocole : MyHOME Play Zigbee/ Xiaomi Aqara / HomeBridge

Mon matériel | Tuto MyHOME en Vidéo | Documentation

Avatar de l’utilisateur
magicgg91
Actif
Messages : 10084
Inscription : 09 août 2014, 12:15
Localisation : Région Parisienne
Contact :

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

Message par magicgg91 » 24 juil. 2016, 18:17

La transparence est gérée par le core directement maintenant, avec le choix de la transparence indépendamment pour le dashboard, les vues ou le design
DomoPi - Mon site dédié au Raspberry Pi et à la domotique

Didier3L
Actif
Messages : 1002
Inscription : 01 mai 2016, 13:40

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

Message par Didier3L » 24 juil. 2016, 19:59

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 :idea:
Synology DS216+ / DSM 6.2 / Docker / MariaDB 10
Conteneur : jeedom/Jeedom:master en mode réseau Host
Protocole : MyHOME Play Zigbee/ Xiaomi Aqara / HomeBridge

Mon matériel | Tuto MyHOME en Vidéo | Documentation

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1153
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 25 juil. 2016, 09:16

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
OPI+2E, razberry, armbian_DEV
3 xEverspring AN157-6, 1xBenext_SceneController, 1xGreenWave et 1xQubino Flush 2,3xFGSD002 Smoke Sensor 1,xSwiidInter, 2xZME_KFOB-S

Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

Avatar de l’utilisateur
Claude69
Actif
Messages : 1824
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

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

Message par Claude69 » 25 juil. 2016, 10:06

Darkeyes a écrit :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)'});
  }
});
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.2.11 ULTIMATE

Bêta-testeur App Mobile
Mon matériel ici

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1153
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 25 juil. 2016, 11:05

Ne marche pas tous mes widget passent gris transparents :(
OPI+2E, razberry, armbian_DEV
3 xEverspring AN157-6, 1xBenext_SceneController, 1xGreenWave et 1xQubino Flush 2,3xFGSD002 Smoke Sensor 1,xSwiidInter, 2xZME_KFOB-S

Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

Didier3L
Actif
Messages : 1002
Inscription : 01 mai 2016, 13:40

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

Message par Didier3L » 25 juil. 2016, 14:02

Darkeyes a écrit :Ne marche pas tous mes widget passent gris transparents :(
essaye rgba(0,0,0,0.17)
Synology DS216+ / DSM 6.2 / Docker / MariaDB 10
Conteneur : jeedom/Jeedom:master en mode réseau Host
Protocole : MyHOME Play Zigbee/ Xiaomi Aqara / HomeBridge

Mon matériel | Tuto MyHOME en Vidéo | Documentation

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1153
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 26 juil. 2016, 08:35

Didier3L a écrit :
Darkeyes a écrit :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
OPI+2E, razberry, armbian_DEV
3 xEverspring AN157-6, 1xBenext_SceneController, 1xGreenWave et 1xQubino Flush 2,3xFGSD002 Smoke Sensor 1,xSwiidInter, 2xZME_KFOB-S

Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

Didier3L
Actif
Messages : 1002
Inscription : 01 mai 2016, 13:40

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

Message par Didier3L » 28 juil. 2016, 13:27

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
    }

  }
};
Synology DS216+ / DSM 6.2 / Docker / MariaDB 10
Conteneur : jeedom/Jeedom:master en mode réseau Host
Protocole : MyHOME Play Zigbee/ Xiaomi Aqara / HomeBridge

Mon matériel | Tuto MyHOME en Vidéo | Documentation

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1153
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 28 juil. 2016, 15:21

Didier3L a écrit :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
OPI+2E, razberry, armbian_DEV
3 xEverspring AN157-6, 1xBenext_SceneController, 1xGreenWave et 1xQubino Flush 2,3xFGSD002 Smoke Sensor 1,xSwiidInter, 2xZME_KFOB-S

Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

Didier3L
Actif
Messages : 1002
Inscription : 01 mai 2016, 13:40

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

Message par Didier3L » 01 août 2016, 17:11

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
Synology DS216+ / DSM 6.2 / Docker / MariaDB 10
Conteneur : jeedom/Jeedom:master en mode réseau Host
Protocole : MyHOME Play Zigbee/ Xiaomi Aqara / HomeBridge

Mon matériel | Tuto MyHOME en Vidéo | Documentation

Avatar de l’utilisateur
Darkeyes
Actif
Messages : 1153
Inscription : 02 avr. 2015, 08:37

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

Message par Darkeyes » 01 août 2016, 21:49

Didier3L a écrit :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 :(
OPI+2E, razberry, armbian_DEV
3 xEverspring AN157-6, 1xBenext_SceneController, 1xGreenWave et 1xQubino Flush 2,3xFGSD002 Smoke Sensor 1,xSwiidInter, 2xZME_KFOB-S

Développement script:
- ssh_commande.php
- ip_public.sh
- BackupSamba.sh

ouquoi
Timide
Messages : 467
Inscription : 29 janv. 2016, 09:50

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

Message par ouquoi » 11 sept. 2016, 13:39

Darkeyes a écrit : 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
RPI3 - AEON LABS Z-Wave (GEN5) - Oeil fibaro - Synology Nas - Webcam ip - Minix Neo z64 - Broadlink RM PRO - Xiaomi Home - Yeelight - Nut mini

Life is sharing , Sharing is life !

Avatar de l’utilisateur
idem
Timide
Messages : 215
Inscription : 17 févr. 2015, 02:35
Localisation : Villeurbanne / Lyon
Contact :

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

Message par idem » 26 oct. 2016, 19:09

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 ?
Jeedom DIY
Jeedom sur NUC est au top!!
http://geekandmore.fr

Unix/Linux, shell, SQL, gestion de projet, gestion des changements, consultant sénoir...

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

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

Message par Sshafi » 26 oct. 2016, 19:49

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...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité