[TUTO] Personnaliser les résumés

[Salvialf]

Bonjour,

Suite à une demande d’ @iPapy, je partage avec vous aujourd’hui une procédure pour personnaliser les résumés qui apparaissent en haut à droite dans la barre de menu ainsi qu’au niveau du nom des objets sur le dashboard.

Ces modifications sont à renseigner en personnalisation CSS avancée:
Réglages -> Système -> Personnalisation avancée -> CSS (case de droite)

Chaque élément est identifié par un sélecteur .objectSummaryParent[data-summary="xxx"], par exemple le résumé des volets pourra être modifé grâce à .objectSummaryParent[data-summary="shutter"], les lumières .objectSummaryParent[data-summary="light"], etc…

La liste des noms de clé [data-summary="xxx"] se retrouve dans
Réglages -> Système -> Configuration -> Résumés

Par défaut:

• security = Alerte
• motion = Mouvement
• door = Porte
• windows = Fenètre
• shutter = Volet
• light = Lumière
• outlet = Prise
• temperature = Temperature
• humidity = Humidité
• luminosity = Luminosité
• power = Puissance

---

Exemples :

/* Infos résumés */ 

// Modifier les icônes de tous les résumés
.objectSummaryParent[data-summary] .icon
{ color:green!important; } 

// Modifier les textes du résumé de la barre de navigation
.navbar-right .objectSummaryParent[data-summary] 
{ color:white!important;font-size:20px!important; }

// Modifier le texte du résumé VOLET de la barre de navigation
.navbar-right .objectSummaryParent[data-summary="shutter"] 
{ color:red!important; }

// Modifier l'icône de tous les résumés FENETRE 
.objectSummaryParent[data-summary="windows"] .icon 
{ color:lightblue!important;font-size:25px!important; }

// Modifier le texte et l'icône de tous les résumés LUMIERE
.objectSummaryParent[data-summary="light"], 
.objectSummaryParent[data-summary="light"] .icon 
{ color:yellow!important;font-size:22px; }

Explications :

• .objectSummaryParent[data-summary] => permet de cibler le texte de tous les résumés.

• .objectSummaryParent[data-summary="xxx"] => permet de cibler le texte d’un résumé par sa catégorie.

• .navbar-right .objectSummaryParent[data-summary] => l’ajout de .navbar-right permet de cibler uniquement le résumé de la barre de navigation.

• .objectSummaryParent[data-summary] .icon => l’ajout de .icon permet de cibler l’icône.

---

Bonus :

• Pour modifier l’horloge en haut à droite de la barre de navigation :

/* Horloge Jeedom */
#horloge { font-family:verdana;color:red!important;}

• Pour modifier l’apparence du nom de votre Jeedom sous l’horloge :

/* Nom Jeedom*/
.navbar-right span.cmdName { font-size:20px; }

---

Il s’agit là d’exemples afin de vous permettre d’appréhender les possibilités et nécessite tout de même quelques connaissances en CSS pour adapter à votre usage.

Néanmoins je suis sûr que les personnes qui suivront ce fil seront en mesure d’aider ceux qui en ont besoin.

PS: n’hésitez pas à partager vos customisations

@+

[iPapy]

Merci Salvialf, je vais tester de suite, je m’attendait pas à autant de paramètres, bravo à toi et merci

[Salvialf]

T’as de quoi t’occuper un petit moment

[iPapy]

Oh oui c’est clair Merci Salvialf

[Salvialf]

Tu nous montreras le résultat final j’espère ?!?

[kiboost]

Y’a çà aussi

[Salvialf]

J’ai testé rapidement ça n’a pas eu d’effet sur les résumés chez moi… J’ai du mal m’y prendre

J’en profite @kiboost : As-tu une idée sur ce sujet stp ? :
https://community.jeedom.com/t/design-ajouter-commande-seule-avec-widget-tiers/25021

[kiboost]

Faut activer icône colorée dans config/interface. Puis F5 et que le résumé se mette à jour.
Je viens d’essayer, pas de soucis

[Salvialf]

J’avais fait tout ça… J’ai pas creusé non plus

[Toms]

Tu nous avais habitué aux widgets, ce changement est de taille, je vais de ce pas voir le rendu sur mon jeedom. Merci pour ton travail et ton partage

[Domotech]

Il t’en demande des choses ce @iPapy

Et toujours une réponse top! Bravo @Salvialf

[naboleo]

Salut.

Par contre en thème dark et sous Chrome, c’est pas scrollable sur la dernière alpha

[kiboost]

J’ai corrigé ce matin

[naboleo]

Si après 9h c’est normal alors j’ai pas refait depuis

[kiboost]

Mon pauvre, j’avais pas finit mon café à c’t’heure !!

[naboleo]

Donc la caféine a fait son effet ! C’est ok après mise à jour

[naboleo]

Y a peut-être bien un truc quand même qui semble concomitant à la sauvegarde

[Mon Apr 20 15:42:59.358490 2020] [php7:warn] [pid 2848] [client 192.168.1.49:38842] PHP Warning:  Invalid argument supplied for foreach() in /var/www/html/core/class/jeeObject.class.php on line 651, referer: https://

NB j’ai une catégorie perso

[Salvialf]

J’ai testé plus en détails par acquis de conscience et en fait il faut qu’il y ait un changement de valeur pour que l’icône se mette à jour en couleur après rafraîchissement. c’est pour ça que ça n’avait pas changé ce matin.

[iPapy]

@Salvialf

Tu nous montreras le résultat final j’espère ?!?

Voilà le résultat avec deux questions lool

• Est il possible de modifier la taille de la police du nom du serveur.
• J’ai des ampoules Philips et des Yeelight, les Philips remontent bien mais pas les Yeelight alors quelles sont bien catégorisé lumière dans équipement.

Merci d’avance pour ta réponse et encore merci pour ce tuto personnalisation

[Salvialf]

@iPapy

Est il possible de modifier la taille de la police du nom du serveur.

Bien sûr:

/* Jeedom Name */
.navbar-right span.cmdName { font-size:20px; }