[TUTO] Personnaliser les résumés

Tags: #<Tag:0x00007f282e21e9b0>

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.
customSummary

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

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

:information_source:
Par défaut: summaryNames

  • 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; }

cmdName


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 :smiley:

@+ :wink:

9 J'aimes

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

T’as de quoi t’occuper un petit moment :stuck_out_tongue_winking_eye: :exploding_head:

Oh oui c’est clair :wink: Merci Salvialf

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

Y’a çà aussi

Untitled-1

1 J'aime

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

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

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

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

Il t’en demande des choses ce @iPapy :stuck_out_tongue:

Et toujours une réponse top! Bravo @Salvialf

2 J'aimes

Salut.

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

J’ai corrigé ce matin :thinking:

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

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

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

2 J'aimes

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
image

J’ai testé plus en détails par acquis de conscience :nerd_face: 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.

Voilà le résultat avec deux questions lool :wink:

Capture

  • 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 :slight_smile:

Bien sûr:

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

cmdName