Personnaliser ses cartes avec Card-mod

Entraide Home Assistant
185

Tu procèdes de la même manière dans « styles »

Tu rajoutes simplement :

styles:
  icon:
    - color: |
        [[[
          var temperature = states['sensor.temp_moyenne'].state;
          if (temperature < 15) {
            return '#ADD8E6';
          } else if (temperature >= 15 && temperature < 17) {
            return '#32D3CB';
          } else if (temperature >= 17 && temperature < 18) {
            return '#12BA85';
          } else if (temperature >= 18 && temperature < 20) {
            return '#58CC1A';
          } else if (temperature >= 20 && temperature < 22) {
            return '#F7DE00';
          } else if (temperature >= 22 && temperature < 24) {
            return '#FFAE00';
          } else if (temperature >= 24 && temperature < 26) {
            return '#FF8300';
          } else {
            return '#FF4300';
          }
        ]]]

Ne rajoute que ce qui est en dessous de « styles » et remplace les couleurs HTML par « white » ou « black » en fonction des différents cas

186

je vois mais qu’est ce que c’est lourd toutes ces redondances…

187

Oui, il n’est pas possible de définir une variable globale sauf à passer par un template…
Mais là, tu dois pouvoir te contenter de deux conditions (une pour l’icone en blanc et une pour l’icone en noir)

188

Bon autre sujet proche mais évidemment c’est encore autre chose. sur des carte 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;
      }
189

Tu devrais poster un nouveau sujet parce que là, tu as deterré un sujet de 2021…
Et tu es sur un sujet plus spécifique.

190

Ok

Mais je n’ai pas trouvé comment ouvrir un nouveau sujet .voilà voilà…si si.(j’aurai dû commencer l’informatique avant 1981… je ne dois pas avoir encore assez de bouteilles visiblement…)

191

Même si c’est un vieux sujet, c’est un sujet sur card_mod, qui fonctionne sur toutes les cartes.
Contrairement a toi qui parle de button-card et mets du code de button-card , qui n’as rien avoir avec le sujet.

192

Bonjour,
quand tu crées un compte sur HACF, tu reçois un message des règles du forum dans ta boite de messagerie de ton profil. Il faut le lire, tu as des explications pour débloquer ton profil pour pouvoir ouvrir un sujet.

193

Merci

Visiblement il fallait aussi lire les emails dans la messagerie du forum pour que créer un sujet apparaisse…chelou.

bref nouveau post ici:
comment styler une carte ‹ person › ?

195

Bonjour,
j’essai de mettre sur une ligne avec card mod l’heure et l’evevement , mais je n’y arrive pas.

Quelqu’un a une idee?

type: custom:calendar-card-pro
entities:
  - entity: calendar.travail
    color: yellow
    accent_color: yellow
    label: 🚛
  - entity: calendar.guy
    label: 🦂
    accent_color: red
    color: red
  - entity: calendar.famille
    label: 👪
    accent_color: gray
    color: gray
  - entity: calendar.jph
    color: pink
    accent_color: pink
    label: 🐃
  - entity: calendar.u_express
    color: orange
    accent_color: orange
    label: 🏭
  - entity: calendar.vacances_famille
    color: blue
    accent_color: blue
    label: 🌴
days_to_show: 2
show_location: false
height: 190px
card_mod:
  style: |
    .time, .title {
      display: inline-block !important;
    }
date_vertical_alignment: middle
196

Bonjour à tous,

Je galère sur une card mod également.

Je voudrais changer la couleur de l’anneau.

Actuellement j’ai réussi à changer la couleur de l’icône et même de manière « dynamique »
J’ai réussi également à changer la couleur de l’anneau (slider) sur la partie non couverte en noir.
Par contre je ne trouve pas la bonne ligne de code pour la partie active.
J’ai tenté

  • slider-active-color
  • slider-main-color
  • control-slider-color
  • path-main-color
  • round-slider-color
  • et bien d’autres

J’ai trouvé tous ces termes sur le net, mais uniquement sur des sujets de slider à plat, alors que celui que je cherche à modifier est sous forme d’anneau

Voici mon extrait de code et le rendu pour l’instant. Ce que je cherche c’est à modifier la couleur bleu en rouge (pour le test)

type: light
entity: light.salon
name: SALON
icon: mdi:sofa-outline
grid_options:
  columns: 6
  rows: auto
card_mod:
  style: |
    ha-state-icon { {% if states('light.salon')=='on' %} color: #aa8ada; {% else
    %} color: grey; {% endif %} }
    ha-card {
    --slider-track-color: black;
    --control-slider-color: red !important;
    }

image
image740×453 18.5 KB

Merci à celle ou celui qui pourra m’aider :raised_hands:

197

Bonjour,
un exemple:

image
image1008×285 15.5 KB

type: light
entity: light.0x00158d0002e75493
card_mod:
  style:
    round-slider$: |
      svg > g.slider {
        --round-slider-bar-color: red;
      }
      svg > g.handles {
        stroke: red;
      }
1 « J'aime »
198

Merci cela fonctionne seul. Par contre je n’arrive pas à l’intégrer dans mon card-mod déjà existant.
J’ai essayé de modifier le niveau sans succès. Une idée? Merci encore

Screenshot_2025-04-23-18-00-15-869_io.homeassistant.companion.android
Screenshot_2025-04-23-18-00-15-869_io.homeassistant.companion.android1080×2400 371 KB

199

Comme telle :

card_mod:
  style:
    round-slider$: |
      svg > g.slider {
        --round-slider-bar-color: red;
      }
      svg > g.handles {
        stroke: red;
      }
    .: |
      ha-state-icon { 
      {% if states('light.salon')=='on' %} 
        color: #aa8ada; 
      {% else%} 
        color: grey; 
      {% endif %} 
      }
      ha-card {
        --slider-track-color: black;
        --control-slider-color: red !important;
      }
1 « J'aime »
200

Merci beaucoup, j’étais bien embêté car j’ai reproduit une logique d’une carte jauge et c’est assez loin

Screenshot_2025-04-23-19-22-49-095-edit_io.homeassistant.companion.android
Screenshot_2025-04-23-19-22-49-095-edit_io.homeassistant.companion.android537×536 51.9 KB

201

Bonjour,

Bon décidemment je n’arrive pas à me dépatouiller de ce card_mod. J’ai visionné un paquet de fois la vidéo et essayer de chercher sur le net mais sans succès. Du coup je vous présente ma démarche et le code que j’en ai extrapolé mais qui ne donne pas satisfaction.

J’ai une tuile volet roulant où j’ai pu changer la couleur de toute la tuile en violet (voir code en # plus bas)
En faisant F12 je me suis aperçu que l’on pouvait détailler et n’attaquer que le texte (ici SALON2 & 100%).

Mais que ce texte est dans un shadow root. Donc j’ai déroulé la vidéo sur la partie shadow root.

Clic droit, copier, coller element.

image
image1301×512 47.4 KB

Et après pas mal d’essais j’obtiens un code pas en erreur mais qui n’agit en rien.
A priori j’attaque le bon chemin car lorsque je tape la ligne de code pour la couleur, je vois le texte clignoter.
Voici ce que j’ai rédigé :

image
image1014×680 26.7 KB

Must to have, j’ai vu qu’un niveau encore en dessous et sous un shadow root on pouvait choisir soit le texte SALON2 soit 100%
Mais est-ce que cela veut dire que je dois faire un sous niveau svg dans le svg du tile-info ?

image
image1280×424 39.8 KB

Si cela est possible, est-ce que je pourrais avoir le code et l’explication associée pour que je saisisse les subtilités qui m’échappent ?

Merci beaucoup par avance :slight_smile:

202

Test comme ça voir :

card_mod:
  style:
    ha-tile-card$: |
      svg > .ha-tile-info {

Je n’est pas d’entité cover, je ne peux pas tester chez moi.

Sinon copie le JS path et met le moi dans ton message.

image
image492×399 22 KB

203 
features:
  - type: cover-open-close
type: tile
entity: cover.volet_salon2_volet_2
features_position: inline
vertical: false
grid_options:
  columns: full
icon: none
show_entity_picture: false
hide_state: false
state_content: current_position
name: SALON 2
#card_mod:
#  style: |
#    ha-card {
#    --primary-text-color: #aa8ada;
#    }
card_mod:
  style:
    ha-tile-card$: |
      svg > .ha-tile-info {
        fill: red !important;
      }

Même résultat, le code n’est pas en erreur mais le texte reste par défaut (blanc) :confused:

EDIT : je te copie ça

EDIT 2: voici

document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-sections-view").shadowRoot.querySelector("div > ha-sortable > div > div:nth-child(2) > hui-section > hui-grid-section").shadowRoot.querySelector("ha-sortable > div > div:nth-child(1) > hui-card > hui-tile-card").shadowRoot.querySelector("#info")
204

Comme ca ?

card_mod:
  style:
    hui-tile-card $: |
      #info {
        fill: red !important;
      }
205 
features:
  - type: cover-open-close
type: tile
entity: cover.volet_salon2_volet_2
features_position: inline
vertical: false
grid_options:
  columns: full
icon: none
show_entity_picture: false
hide_state: false
state_content: current_position
name: SALON 2
card_mod:
  style:
    hui-tile-card $: |
      #info {
        fill: red !important;
      }

Idem (et pour info je teste à chaque fois avec stroke/color au cas où).