Taille des icones Widget plugin Click link (clink)

Utilisation du core de Jeedom Widgets
#1

Bonjour,

Je souhaite modifier la taille des icones que j’ai affecté dans le widget du plugin Click link (clink) - stable2020-11-20 01:13:06
image
image

J’ai trouvé ce sujet et j’ai essayé de l’adapter Modifier taille icone widget en v4 - #11 par ajja17orange

l’ID de ma commande est 11368
Dans Personalisation avancée > destop/custom/custom.css
J’ai ajouté ce code

[data-cmd_id='11368'] .btn > i  {
font-size: 28px;
}

la taille de l’icone a bien changé
image

mais avec un affichage surprenant dans le plugin
image

Est-ce la bonne méthode ?

Peut on faire la même chose dans la configuration Affichage ?
image

#3

Bonsoir,

attention ce sujet parle de modifier la taille d’un icone mais pas un icone contenu dans un bouton !

Si on regarde le résultat, on voit bien que la taille de l’icone a bien fonctionnée, mais celle-ci sort du bouton qui est derrière :
image

Il faudrait connaitre la version de jeedom, et celle du plugin, car a ce que je voit, je ne reconnait pas l’affichage du plugin !
Au cas ou tu peut tester cette version :

:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='669'] .btn > i  {
font-size: 28px;
}
:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='669'] .btn {
  max-height: unset;
  height: unset;
}

Mais j’ai aucune garantie du bon résultat.

#4

Edit :
Jeedom 4.2.14
Plugin Click link (clink) - stable Version
2020-11-20 01:13:06

#5

C’est fou, je ne retrouve pas du tout cette affichage dans le plugin mode !
image

Et le code que j’ai posté ne résout pas le problème d’affichage dans le plugin ?

#6

Bonjour,

non cela ne fait rien

#7

Hello,
Je vient de trouver d’où provient les images que tu as posté !! et rien a voir avec le plugin mode !
c’est le plugin Click link. et après avoir refait un essai avec celui-ci, je confirme que ce code fonctionne bien chez moi :

:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='11368'] .btn > i  {
font-size: 28px;
}
:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='11368'] .btn {
  max-height: unset;
  height: unset;
}

image
image

#8

Effectivement je me suis trompé de plugin. Désolé

Ce code n’a aucun effet chez moi.
je poste l’intégralité de mon fichier css des fois qu’il y aurait collusion


:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='11368'] .btn > i  {
font-size: 28px;
}
:-webkit-any([data-page='dashboard'],[data-page='plan']) [data-cmd_id='11368'] .btn {
  max-height: unset;
  height: unset;
}


/* Modifier l'icône du résumé FENETRE de la barre de navigation */ 
.objectSummaryglobal .objectSummaryParent[data-summary="windows"] .icon 
{ color:lightblue!important;font-size:16px!important; }

/* Modifier le texte du résumé FENETRE de la barre de navigation */
.objectSummaryglobal .objectSummaryParent[data-summary="windows"] 
{ color:red!important; font-size:20px; }

/* Modifier l'icône du résumé LUMIERES de la barre de navigation */ 
.objectSummaryglobal .objectSummaryParent[data-summary="light"] .icon 
{ color:#f7f705d9!important;font-size:16px!important; }

/* Modifier le texte du résumé LUMIERES de la barre de navigation */
.objectSummaryglobal .objectSummaryParent[data-summary="light"] 
{ color:red!important; font-size:20px; }

/* Aligner les noms des objets AU CENTRE sur le Dashboard */
[data-page="dashboard"] legend {
  text-align: center !important;
  background-color: #453571 !important;
}

/* dashboard - Taille titre tuilles 
.eqLogic-widget > .widget-name a {
    font-size: 15px !important;
}*/

#div_displayObject .eqLogic-widget[data-category=security] {
  background-color: rgba(var(--cat-security-color), var(--opacity)) !important;
}
#div_displayObject .eqLogic-widget[data-category=heating] {
  background-color: rgba(var(--cat-heating-color), var(--opacity)) !important;
}
#div_displayObject.eqLogic-widget[data-category=automatism] {
  background-color: rgba(var(--cat-automatism-color), var(--opacity)) !important;
}
#div_displayObject .eqLogic-widget[data-category=light] {
  background-color: rgba(var(--cat-light-color), var(--opacity)) !important;
}
#div_displayObject .eqLogic-widget[data-category=multimedia] {
  background-color: rgba(var(--cat-multimedia-color), var(--opacity)) !important;
}
#div_displayObject .eqLogic-widget[data-category=energy] {
  background-color: rgba(var(--cat-energy-color), var(--opacity)) !important;
}
#div_displayObject .eqLogic-widget[data-category=''] {
  background-color: rgba(var(--cat-other-color), var(--opacity)) !important;
}
#9

Il n’y a aucun soucis avec le reste de ton css.
La piste me mène a ton navigateur, je connais pas celui-ci, mais il est possible qu’il n’accepte pas le -webkit
Tu peut tester ceci :

[data-page='dashboard'] [data-cmd_id='11368'] .btn > i {
  font-size: 28px;
}
[data-page='dashboard'] [data-cmd_id='11368'] .btn {
  max-height: unset;
  height: unset;
}

Ce morceau de code n’a d’effet que sur le dashboard, mais pas en design, le but est déja de tester.

#10

Merci :hugs:
Ca marche :wink:
je suis sous Firefox

#11

Cool,
Il faudra le dupliquer si tu veut le même effet sur tout les icones de l’équipement concerné, pour l’appliquer a tout l’équipement sans dupliqué pour autant le code il faut utiliser le data-eqlogic_id en utilisant donc l’id de l’équipement et non de la commande (j’ai aussi simplifié le code), soit :

/* pour le dasboard */
[data-page='dashboard'] [data-eqlogic_id='xxx'] .btn {
  max-height: unset;
  height: unset;
  font-size: 28px;
}

et pour que le css soit prit en compte aussi sur un design :

/* pour le dasboard */
[data-page='dashboard'] [data-eqlogic_id='xxx'] .btn {
  max-height: unset;
  height: unset;
  font-size: 28px;
}
/* pour les design */
[data-page='plan'] [data-eqlogic_id='xxx'] .btn {
  max-height: unset;
  height: unset;
  font-size: 28px;
}
#12

Merci beaucoup :blush:

#13

Ce sujet a été automatiquement fermé après 24 heures suivant le dernier commentaire. Aucune réponse n’est permise dorénavant.