Taille badge person card

Entraide Home Assistant
1

Bonsoir,
J’essaie en vain de modifier la taille du badge mais sans succès.
Que faut-il que j’ajoute au code pour le faire ? J’ai réussi à agrandir l’image mais pas le badge. Merci
Capture d'écran 2024-11-16 215709

type: custom:mushroom-person-card
entity: person.thomas_favreau
icon_type: entity-picture
fill_container: false
layout: vertical
primary_info: state
secondary_info: last-updated
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        display: flex;
        {% if states(config.entity) == 'home' %}
          animation: pinggreen 3s infinite;
        {% endif %}
        {% if states(config.entity) == 'Travail' %}
          animation: pingblue 3s infinite;
        {% endif %} 
        {% if states(config.entity) == 'away' %}
          animation: pingred 3s infinite;
        {% endif %}           
      }
      @keyframes pinggreen {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      } 
      @keyframes pingblue {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-blue), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }      
      @keyframes pingred {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
      .container {
        --icon-size: 80px !important;        
      }
2

Bonsoir,

card_mod:
  style: |
    mushroom-badge-icon {
      --badge-icon-size: 40px;
    }

Pour plus d’infos, voir ici : https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472/12 (person card/badge icon styling)

3

Merci de la réponse, j’avais vu ce site mais ce code n’a pas l’air de fonctionner quand je l’ajouter sur le mien

4

Bizarre, je viens de tester chez moi à l’instant, ça fonctionne (sur l’avatar Harley Quinn)

Peut-être un souci de $: |

image
image665×565 67.5 KB

5

Salut @Thomas_Fav28

T’as déjà pas mal d’entrée card_mod dans ton code, si tu ajoutes tel que ça ne va pas fonctionner.

Avec ça, ça devrait le faire :

secondary_info: last-updated
card_mod:
  style:
    mushroom-shape-avatar$: |
      .picture {
        display: flex;
        {% if states(config.entity) == 'home' %}
          animation: pinggreen 3s infinite;
        {% endif %}
        {% if states(config.entity) == 'Travail' %}
          animation: pingblue 3s infinite;
        {% endif %} 
        {% if states(config.entity) == 'away' %}
          animation: pingred 3s infinite;
        {% endif %}           
      }
      @keyframes pinggreen {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      } 
      @keyframes pingblue {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-blue), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }      
      @keyframes pingred {
        0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
        100% {box-shadow: 0 0 5px 15px transparent;}
      }
      .container {
        --icon-size: 80px !important;        
      }
    .: |
      mushroom-badge-icon {
        --badge-icon-size: 22px;
        --badge-size: 30px;
      }

image

peek_9

1 « J'aime »
6

Oui c’était bien ça le problème, merci !

1 « J'aime »