Colorer une carte Entités

Un petit exemple de l’utilisation de card-mod sur une carte Entités afin de capitaliser une réponse sur le Discord :

animate

type: entities
entities:
  - entity: air_quality.demo_air_quality_home
    secondary_info: last-changed
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            /* Couleur de l'icône */ state-badge{
              color: red;
            }
            /* Couleur de l'état */ .info {
              color: blueviolet;
              text-transform: uppercase;
            }
        .: |
          /* Couleur de l'état */ .text-content {
            color: green;
          }
  - entity: air_quality.demo_air_quality_office
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            /* Couleur de l'icône */ state-badge{
              color: green;
            }
            /* Couleur de l'état */ .info {
              color: chocolate;
              text-transform: lowercase;
            }
        .: |
          /* Couleur de l'état */ .text-content {
            color:
              {% if states('air_quality.demo_air_quality_office')|int > 5 %}
                brown
              {% else %}
                blue
              {% endif %}
              ;
          }
  - entity: binary_sensor.basement_floor_wet
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            /* Couleur de l'icône */ state-badge{
              color: blue;
            }
            /* Couleur de l'état */ .info {
              color: darkorange;
              font-variant: small-caps;
            }
        .: |
          /* Couleur de l'état */ .text-content {
            color:
              {% if is_state('binary_sensor.basement_floor_wet', 'Sec')%}
                orange
              {% else %}
                magenta
              {% endif %}
              ;
          }
  - entity: input_boolean.hacf
  - entity: input_number.hacf
card_mod:
  style: |
    ha-card{
      background: 
        {% if is_state('input_boolean.hacf', 'on')%}
          AntiqueWhite
        {% else %}
          Gainsboro
        {% endif %}
        ;
      border-radius: {{states('input_number.hacf')}}px;
    }

Amusez-vous :+1:

Et n’hésitez pas si vous avez des questions.

:hacf:

6 « J'aime »

Bonjour @Clemalex

Merci pour ce tuto !!
Si on veux, appliquer Border-radius, background ou du css, sur toutes les cartes on fait comment ?

Je pense que tu vas répondre en une ligne plus peu-être un lien vers la doc, mais…

Merci

Hahaha :wink:

Non ça ne va pas prendre une ligne…

Il faut regarder du côté des thèmes → :interrobang:

Tiens ! Personne n’a fait de tutoriel dessus sur HACF… :sob:

Il y a bien ce post qui en parle → Utiliser des variables dans les modèles - #2 par Clemalex

Donc (car tu avais raison sur ce point :wink: ) voici des liens intéressants :

Merci @Clemalex pour la réponse a ma question :slight_smile:
C’est vrai que c’est pratique avec un thème!! Merci c’est fait :slight_smile:

Alors pour la couleur de l’état, ça ne fonctionne pas chez moi, je met ça comme code:

type: entities
entities:
  - entity: sensor.speedtest_download
    name: Download
    icon: 'mdi:cloud-download-outline'
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            /* Couleur de l'icône */ state-badge{
              color: red;
            }
            /* Couleur de l'état */ .info {
              color: blueviolet;
              text-transform: uppercase;
            }
        .: |
          /* Couleur de l'état */ .pointer {
            color: red;
          }
    secondary_info: last-changed

et j’ai ça comme résultat:
image

  1. Je copie ton code
  2. Je colle ton code dans une nouvelle carte
  3. Je change l’entité pour mettre le soleil, le nom et l’icone
  4. Je valide et :

image

:sweat_smile:

MAIS ! Comme je suis dû genre à ne pas m’arrêter là, j’ajoute l’intégration Speedtest.net et je recommence à partir de ton code :

image

T’es rassuré ? On a la même :+1:

L’architecture HTML n’est pas la même pour les entités du domaine sensor

Donc ensuite… … le travail m’appelle :+1:

Je repasse ce soir pour expliquer comment faire (@barto_95 sera intéressé)

et je mettrais à jour le 1er post :+1: également

ouf !! je suis pas fou !! ^^
Merci beaucoup :slight_smile:

Je viens de mettre à jour la classe (utilisation de text-content plutôt que .pointer)

Pour l’explication avec l’arborescence HTML, il faudra attendre ce soir comme prévu.

En attendant pour approfondir card-mod je viens de créer un sujet dédié avec un lien très (très!) intéressant :

https://forum.hacf.fr/t/personnaliser-ses-cartes-avec-card-mod/4447

Salut,

une confirmation :
Lorsqu’on travaille sur un dasboard, on recharge la page
Lorsqu’on travaille sur un thème on doit redémarrer HA

Tu peux simplement appeler le service :

service: frontend.reload_themes

:+1:

Là tu me fais plaisir et même tu m’enlèves une épine du pied car redémarrer toutes les 5mn c’est pénible…

1 « J'aime »

Merci @Clemalex

moi j’aimerais comprendre comment faire pour trouver les bonnes info a mettre c’est à dire comment faire pour trouver qu’il faut utiliser :« hui-generic-entity-row: » au lieu d’un autre nom etc…

et cela :

.state-badge
.info
.text-content

C’est expliqué ici (quand je l’aurais écrit :wink:)