Styler carte person selon présence ou pas

Entraide Home Assistant
,
1

sur des cartes de personne qui remontent la zone (Maison, bureau, absent…)

j’ai vu qu’on pouvait gérer la couleur de l’icone:

  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: orange !important;
      }

et ca, ca marche mais pour le rendre conditionnel… rien à faire je fracasse le truc.

Déja je ne sais pas teste l’état ‹ si différent de Maison ›

avec ca, je force l’icone en orange mais sans conditions de présence… Merci

type: custom:mushroom-person-card
entity: person.Machin
name: Eric
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --shape-color: orange !important;

merci

2

Bonjour,
un exemple avec condition

image
image1005×340 12.5 KB

type: custom:mushroom-person-card
entity: person.warcozes
name: Eric
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        {% if is_state('person.warcozes','home') %}
        --shape-color: green !important;
        {% else %}
        --shape-color: red !important;
        {% endif %}
      }
3

Merci

mais exist–il un guide de balises des cartes les plus connues et de la façon de style parce que un coup c’est style:, un coup style: |, un coup style : >…

4

Oui, il y a des guides.

pour la carte mushroom:

pour les autres cartes:

5

hmm oui merci
mais non j’avais bien regardé le person en mushroom mais c’est juste un fil du forum. Je ne vois strictement rien qui explique les tags exhaustivement, juste une poignée d’exemples qui ne me sont pas très utiles.

Pour card-mod c’est plus complet ok.

J’en conclus qu’il me manque les basics du yaml en général pour H.A

6

Bonjour,
Il faut surtout comme dans toute interface WEB utiliser la console du navigateur, exemple ici avec Chrome qui permet d’inspecter le code (et tant de choses…), tu trouveras les ID et class CSS à modifier.

image
image972×805 80.6 KB

Dans la carte ça donne :

title: Lumières
card_mod:
  style: |
    ha-card .card-header {
      color: #ff9800;
    }

Comme tu le vois @Eric_Lacomblez je reste très dans le standard de HA, pas de quoi faire rêver (petite ref à @herveaurel :blush:) un peu de card_mod de temps en temps, après ça dépend des cartes que tu utilises, cet exemple c’est pour une carte basique type: entities.
Bob

2 « J'aime »
7

oui oui j’utilse le F12 depuis 15 ans au bas mot, …mais faire du reverse sur du vrai HTML W3C et …ca… comment dire… l’exemple que tu montres est évident un transquille… mais en fait c’est jamais pareil…

8

D’où ma remarque dans un fil précédent… Essaye d’utiliser des cartes qui correspondent le plus possible à ton look désiré:

  • cartes basic
  • cartes Tuiles
  • cartes mushroom
  • cartes bubles
  • button card

Et seulement si celles ci ne te permettent pas de faire ce que tu veux, bascule sur card-mod…

Personnellement, j’utilise card-mod uniquement pour du positionnement de bouton, et même là, des fois c’est à s’arracher les cheveux…
Mais toute la logique est faite dans la carte « de base »…

Pour faire des carte très personnalisées, il y a notamment la mushroom template et la button card qui offrent quand même pas mal de possibilités…

Par contre attention, la mushroom card utilise du template en jinja2 (qui est aussi utilisé a pas mal d’endroit dans HA), la button card a une syntaxe specifique il me semble.

Donc attention car on melange vite:

  • Du YAML
  • Du template en JINJA2
  • Du CSS
  • Des syntaxes spécifiques

Et c’est vite le bordel si on ne sait plus ce qu’on fait et où on est…

Enfin tu peux aussi faire du stack-in-card pour fusionner des cartes (un exemple avec la room card dans ma presentation si tu veux)…

9

Tu as quand même tous les items specifiques de la carte mushroom person un par un si tu cliques… avec un exemple a chaque fois:
image
Normalement une fois que tu sais comment « attraper » l’item que tu veux (avec l’exemple) le reste devrait couler de source…
Ou alors, comme dit au message ci dessus, c’est que tu ne fais pas la bonne chose au bon endroit. Et que par exemple tu as réussi a faire du CSS mais il te manque la partie template (qui est indépendante de card-mod) pour faire une expression conditionnelle…

[edit] j’ai mis dans ce post, au point # 4, un truc vraiment basique sur la partie template (applicable ici dans une carte mushroom template), ça peut peut être aider un peu: [Carte] Mise en forme de ma mushroom room-card et tuto - #12 par BBE Et il ne faut pas hésiter à abuser de l’onglet outil de developpement / modèles pour tester ses templates…

2 « J'aime »