Oui j’ai vu que j’avais zappé d’activé l’option.
Désolé je suis un boulet. 
Je vais continuer à voir pour faire les cadres.
Je part d’une feuille blanche sur mon design donc je vais pouvoir m’éclater avec ton code 
1 « J'aime »
J’avance à grand pas grâce à toi 
2 remarques :
- il y a un 3ème fichier dans le rep img à ne pas oublier :
clock.png(je suis preneur stp ) - pour le répertoire d’installation, tu peux aussi utiliser le répertoire
/montheme/dans lequel tu ajoutes les rep/montheme/js//montheme/img/et/montheme/css/. Tu évites ainsi la manip avec le .htaccess et les fichiers ne sont pas écrasés à chaque MAJ
Xav
Bien vu, je l’avais oublié ce fichier png !
Le voici :
Dit moi si le fait de passer ainsi redimensionne l’image et pose problème à l’affichage.
Dans ce cas je verrais pour passer par une plateforme de partage.
Je n’avais pas songé à la création d’un répertoire montheme dans desktop afin d’éviter l’effacement.
C’est en effet une très bonne solution car ça évite de modifier le .htaccess en ssh qui reste une solution complexe pour beaucoup.
Je vais mettre à jour mon message pour intégrer cette solution.
Merci Xav
3 « J'aime »
C’est parfait !
Merci
J’avance pas trop mal. Il me reste plus qu’à comprendre comment modifier le css pour l’affichage du cadre au survol (clic) !
Xav
Aujourd’hui je vais parler un peu des widget au survol.
Cette fonctionnalité vous permet d’afficher sur votre design un équipement sans devoir changé de page.
Pour ce faire, vous devez passer en mode Edition, faire clique droit et Ajouter une zone.
Là vous adaptez la taille de votre zone et sa position puis vous cliquez droit dessus et Paramètre d’affichage.
Dans spécifique vous sélectionnez Widget au survol et décochez Afficher au survol (enfin moi je l’ai décoché pour n’avoir l’affichage qu’au clique).
Ensuite vous sélectionnez l’équipement souhaité.
Solution vraiment pratique, mais l’affichage de l’équipement version Dashboard est horrible.
Il va donc falloir jouer du css (dans Personnalisation avancée) afin d’avoir un affichage homogène à notre design.
Ainsi, nous devons passer de ça :
à cela :
Récupération des ID :
Pour arriver à ce résultat, il va déjà falloir connaître l’ID de votre équipement et l’ID de vos commandes.
Pour cela, vous allez dans votre équipement (pour mon exemple, plugin Virtuel et équipement Brita).
En haut à droite, vous cliquez sur le bouton Configuration avancé et vous notez l’ID de votre équipement.
Pour les ID des commandes, il faut aller dans l’ongle Commandes de votre équipement.
Soit les ID sont inscrit à gauche des commandes, soit vous devez cliquer sur les engrenages de chaque commande.
Donc dans mon exemple, mon ID d’équipement est 58.
Nous pouvons donc commencer à customiser l’affichage.
Suppression du nom de l’équiment :
Pour commencer, nous allons virer le bandeau avec le nom de l’équipement.
Pour cela, il suffit de renseigner la commande css suivante :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="58"] > .widget-name {
display: none;
}
Voici le résultat :
Background et cadre :
Afin que cela s’harmonise dans l’affichage, nous allons lui appliquer le même style mais également le dimensionner (avec width et height) et le placer (avec top et left) avec les commande css suivantes :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="58"] {
width: 190px !important;
height: 100px !important;
margin: 0 !important;
padding-top: 10px !important;
top: -20px !important;
left: -16px !important;
background-color: #E7EEF7 !important;
border-radius: 32px !important;
box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
-5px -5px 10px 5px rgba(255,255,255, 0.8);
}
Voici le résultat :
Le placement (avec top et left) se fait par rapport à la position du widget au survol.
Un peu de cosmétique :
Perso je trouve les boutons trop éloigné l’un de l’autre.
Je vais donc virer les margin du 1er bouton avec la commande suivante :
[data-page="plan"] [data-cmd_id="605"] {
margin: 0 !important;
}
l’ID 605 correspondant à la 1ère commande de mon équipement.
Si, comme moi, vos commandes ne sont pas de type binaire, la commande ci-dessus n’aura peut être eu aucun effet.
Cela provient du Core qui impose le min-width à 90px (alors que celui du binaire est de 20px).
Je trouve que c’est trop grand pour juste une icone, alors je corrige cela avec cette commande css:
[data-page="plan"] [data-eqlogic_id="58"] td div.cmd {
min-width: 20px !important;
}
(min-width: unset !important; fonctionne également).
Ainsi nous atteignons notre résultat final :
2 « J'aime »
Merci @sartog, la version blanche de ton thème est vraiment très réussie ! Je n’ai pas encore le temps de m’y pencher en détail (d’autres sujets à traiter avant de passer à la tablette de contrôle + design), mais j’essaierai bien une version darkmode en remplaçant le blanc par de l’anthracite pour les yeux
Je vais vous présenter comment aller encore plus loin dans la customisation des widget au survol (pour les « base »), voir message d’avant (Sartog - De retour (un peu) et un nouveau design en cours - #25 par sartog)
Cette fois-ci je vais utiliser comme exemple le cadre alarme, le widget au survol sur ma tête permettant d’afficher l’équipement Mode (avec l’icône de mon statut et les boutons Présent / Absent / Nuit).
Normalement le changement de Mode est automatique, mais il arrive que l’automatisme se loupe.
D’où le besoin de garder la main sur la tablette.
Voici le cadre en question :
Et voici l’affichage du widget au survol suite au clique sur ma tronche :
Sans modification du css, ça donnerait un truc du genre :
Pour cette exemple, l’ID mon équipement est le 55, l’icône du statut le 575, le bouton Présent est le 577, le bouton Absent est le 578 et le bouton Nuit est le 2655
Pour les 2 premiers chapitre je vais passer vite, il y a tous les détails dans le message précédent.
Suppression du nom de l’équipement :
Voici le css à mettre
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] > .widget-name {
display: none;
}
- Background et cadre :
Là je souhaite que l’affichage recouvre l’ensemble du cadre alarme.
Voici comment j’ai fait :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] {
width: 340px !important;
height: 240px !important;
margin: 0 !important;
padding-top: 50% !important;
top: -25px !important;
left: -20px !important;
background-color: #E7EEF7 !important;
border-radius: 32px !important;
}
A ce stade, voici le résultat :
Un peu de cosmétique :
Je préfèrerais avoir mes 3 boutons alignés verticalement et l’icône de mon statut centré sur les 3 boutons.
Ceci est totalement impossible à faire nativement, même en passant par l’affichage avancé en mode tableau de l’équipement.
Mais le css va nous sauver
Nous allons donc commencer par déterminer un tableau en css (pour les plus aguerri, il faut injecter ce tableau dans la balise center qui n’a pas de class, d’où le >div >center) :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] > div > center {
margin-top: -25px !important;
display: grid !important;
grid-gap: 0px !important;
grid-template-columns: 100px 130px !important;
grid-template-rows: 70px 70px 70px !important;
justify-content : center !important;
}
A partir de là, le résultat n’est pas terrible car nous n’avons pas indiqué quoi allait où :
Il nous faut donc attribué à nos commandes une case du tableau ainsi créé.
C’est là que les ID des commandes vont nous servir.
- L’icone Statut :
Cette dernière doit être dans la 1ère colonne du tableau et centré sur les 3 lignes :
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] [data-cmd_id="575"] {
grid-column: 1;
grid-row: 1/4;
margin: auto;
}
- Les boutons :
Nous allons attribué pour chaque bouton une ligne de la 2nde colonne :
/* Bouton présent */
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] [data-cmd_id="577"] {
grid-column: 2;
grid-row: 1;
margin: auto;
}
/* Bouton absent */
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] [data-cmd_id="578"] {
grid-column: 2;
grid-row: 2;
margin: auto;
}
/* Bouton nuit */
[data-page="plan"] .zoneEqLogicOnClic > [data-eqlogic_id="55"] [data-cmd_id="2655"] {
grid-column: 2;
grid-row: 3;
margin: auto;
}
Dorénavant, vous avez votre rendu final avec une mise en page que vous ne pourriez pas avoir avec les outils de Jeedom.
P.S.: Je conseil d’utiliser l’outil de développeur de votre navigateur web pour tâtonner les valeurs définitives
5 « J'aime »
Merci pour toutes ces explications ! J’ai toujours eu du mal avec les css mais j’apprends bcp grâce à toi 
Xav
Je trouve la couleur choisit pas trop agressive justement, mais je reconnais qu’en dark c’est pas mal aussi
Il y a pas mal d’exemple sur le web en tapant dark neumorphism pour te faire rêver
Mon code doit être facilement adaptable (suffit de trouver les bonne couleurs d’ombre).
Je viens de tomber sur ce site https://neumorphism.io/
1 « J'aime »
Miam ! Merci
Intéressant aussi: https://www.justinmind.com/blog/neumorphism-ui/
Prochain challenge (!):
Je te rassure, j’ai aussi parfois du mal avec le css (tout ce qui touche au box, position relative / aboslute, etc. je n’accroche pas 
).
Je tâtonne pas mal, et je cherche des exemples / idées sur internet (j’aime bien codepen.io, les gars font des trucs en css de malade !).
Hello @sartog,
J’avance pas mal sur mon design. Je te montrerai ca prochainement
J’ai juste un souci d’affichage sur mon iPad (idem iPhone). Constates-tu également ce souci ?
Version PC (Chrome en dernière version) :
Version iPad (Chrome en dernière version) :
Merci d’avance
Xav
Et en « poussant » jeudi vers la gauche dans le css ?
@Xav-74 et @sartog, si vous aviez quelques minutes à m’accorder, j’ai ouvert un fil pour essayer de m’y retrouver avant de me lancer comme vous.
Avec quelques questions fondamentales avant de me lancer, merci pour votre aide:
Hello @alexcrp
Mon problème est que c’est OK sur mon PC, pas sur ma tablette avec les mêmes css
J’ai vu ton post et j’allais te répondre. Je serai en congés à partir de mercredi donc j’aurais du temps pour échanger avec toi si ca te va.
Xav
2 « J'aime »
Merci bcp ! Pas d’urgence, quand tu peux, parfois j’ai tendance à bcp écrire pour m’y retrouver, avec quelques lignes de réponse ca me ferait deja avancer
J’ai pas bien saisi dans quel fichier vous injectiez les modifs de css par exemple, etc.
Salut Xav,
En effet, j’avais constaté le problème.
Quand je travaille sur mon thème sur PC (Chrome) j’ai bien le même affichage que sur ma tablette (Androïd), mais quand je travaille sur mon Mac j’ai le même décalage que toi.
N’affichant mon design que sur la tablette, je n’ai pas cherché plus loin le problème.
Mais par curiosité j’essayerais de voir entre PC et Mac la différence qui pourrait générer ce décalage.
P.S.: J’adore l’image de fond que tu as utilisé !!
Salut Alex,
J’essais de regarder ça rapidement
1 « J'aime »
Ok ça me rassure !
Je vais chercher aussi 
Pour l’image de fond, et habitant sur Annecy j’ai cherché lac et montagne
Si tu la veux, n’hésites pas !
Xav
Je viens de regarder, sans trouver la raison du problème (peut être l’interprétation du grid par les navigateurs pas encore parfaite).
Il y a peut être une alternative en modifiant un peu mon css de la sorte (j’ai essayé via la console de développement sous Safari et sur PC avec Chrome et ça fonctionne) :
.mia-meteo-cadre-prevision-grid {
width: 290px;
height: 170px;
margin-top: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 0px;
}
.mia-meteo-cadre-prevision-grid div {
width: 80px;
height: 150px;
margin-left: auto;
margin-right: auto;
background: transparent;
border-radius: 25px;
box-shadow: 5px 5px 10px 0px rgba(136, 165, 191, 0.5), -5px -5px 10px 0px rgba(255, 255, 255, 0.8);
text-align: center;
line-height: 2;
}
- Dans le 1er bloc, il faut supprimer le margin-left: 12px
- Dans le 2nd bloc, il faut ajouter margin-left: auto et margin-right: auto
Je vais faire la modification de mon côté, mais je te laisse revenir vers moi si ça ne fonctionne pas.
C’est ok pour moi aussi avec les modifs
Merci
Xav