# Horizontal stack et card mod

**URL:** <https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace\
**Created:** [Juin 9, 2025, 11:19 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581 "2025-06-09T11:19:41Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 3:44 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/21 "2025-06-09T15:44:02Z")

</div>

> [@anon51798830](#):
>
> Il faut que tu mettes la bordure dans les styles de la carte support, pas ceux du custom\_fields dans le cas que tu évoques

je doit pas bien comprendre quand je le met dans le style de la card j ai bien la bordure qui prend la totalité des deux cartes mais je voudrais que autour de la carte gauge  
et pareil ne nom je n arrive pas a le changer de couleur pourtant je fait exactement comme pour les autres cards

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Juin 9, 2025, 3:55 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/22 "2025-06-09T15:55:49Z")

</div>

![image](https://forum.hacf.fr/uploads/default/original/3X/1/2/1254ab19c3e99c06001432d8b355afab55ccde94.png)

Pour l'instant j'en suis là. Je regarde ce qui est faisable sans utiliser card-mod et je te dis...

```auto
type: custom:button-card
custom_fields:
  injection_reseau:
    card:
      type: custom:button-card
      entity: sensor.ecu_216000112528_current_power
      name: injection reseau
      icon: mdi:transmission-tower-export
      show_state: true
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 150px
        grid:
          - grid-template-areas: "\"n i\" \"s i\""
          - grid-template-columns: 1fr 40%
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - color: salmon
          - padding-left: 60%
  gauge:
    card:
      type: gauge
      entity: sensor.ecu_216000112528_current_power
      name: taux autoconsomation
      needle: true
      severity:
        green: 25
        yellow: 50
        red: 75
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
        name:
          - font-size: 16px
          - color: aqua
styles:
  card:
    - aspect-ratio: 2/1
    - background: none
    - border: none
  custom_fields:
    injection_reseau:
      - position: absolute
      - left: 1%
      - width: 49%
    gauge:
      - position: absolute
      - left: 51%
      - width: 48%
      - background-color: rgba(32,32,32,0.8)
      - border: 2px rgba(211,211,211,0.8) outset
      - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
      - border-radius: 10px
      - border-color: aqua

```

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 4:33 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/23 "2025-06-09T16:33:45Z")

</div>

![Screenshot_2025-06-09-18-31-57-989_io.homeassistant.companion.android](https://forum.hacf.fr/uploads/default/original/3X/a/4/a46526ebe8e0cbf18224f02978865d4384c467cb.jpeg)  
merci j ai reussi je l avais placer au bon endrois mais supprimer plus haut .  
par contre pour changer la couleur du nom et du pourcentage j ai pas reussi je vais continuer d avancer sur les autres cartes .

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 4:36 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/24 "2025-06-09T16:36:48Z")

</div>

je t embete juste sur une autre carte j ai reussi a tout faire sauf a changer la couleur du mot tendance et je t avoue ne pas comprendre du tout comment faire .

```auto
type: custom:button-card
custom_fields:
  routage radiateur:
    card:
      type: custom:button-card
      entity: switch.sonoff_1000bedd89
      name: routage<br>radiateur
      icon: mdi:fire
      show_state: true
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 110px
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - color: gold
          - padding-left: 60%
  3erl:
    card:
      type: custom:button-card
      entity: sensor.negative_price_3erl
      name: Bridage 3ERL
      show_state: false
      show_label: true
      label: |
        [[[
          return "Tendance: " + states['sensor.3erl_tendance_du_jour'].state;
        ]]]
      state:
        - value: "1"
          color: salmon
          icon: mdi:alert
          name: bridage
        - value: "0"
          color: limegreen
          icon: mdi:check-circle
          name: injection
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 110px
        icon:
          - width: 50px
          - height: 50px
        name:
          - color: aqua
styles:
  card:
    - aspect-ratio: 7/2.2
    - background: none
    - border: none
  custom_fields:
    routage radiateur:
      - position: absolute
      - left: 1%
      - width: 49%
    3erl:
      - position: absolute
      - left: 51%
      - width: 48%

```

 ![IMG_20250609_183425](https://forum.hacf.fr/uploads/default/original/3X/8/f/8fed4f1acf60232391a7cdea881c09e97bcaf442.jpeg)

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Juin 9, 2025, 4:37 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/25 "2025-06-09T16:37:29Z")

</div>

Tu peux mettre par dessus un autre custom\_fields avec juste le nom (et tu peux ne rien afficher dans le nom de la carte gauge en mettant : «&nbsp;`name: ""`&nbsp;»

Il faut que tu définisses les attributs pour l’élément «&nbsp;label&nbsp;» :

```YAML
type: custom:button-card
custom_fields:
  routage radiateur:
    card:
      type: custom:button-card
      entity: switch.sonoff_1000bedd89
      name: routage<br>radiateur
      icon: mdi:fire
      show_state: true
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 110px
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - color: gold
          - padding-left: 60%
  3erl:
    card:
      type: custom:button-card
      entity: sensor.negative_price_3erl
      name: Bridage 3ERL
      show_state: false
      show_label: true
      label: |
        [[[
          return "Tendance: " + states['sensor.3erl_tendance_du_jour'].state;
        ]]]
      state:
        - value: "1"
          color: salmon
          icon: mdi:alert
          name: bridage
        - value: "0"
          color: limegreen
          icon: mdi:check-circle
          name: injection
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 110px
        icon:
          - width: 50px
          - height: 50px
        name:
          - color: aqua
        label:
          - color: lime
styles:
  card:
    - aspect-ratio: 7/2.2
    - background: none
    - border: none
  custom_fields:
    routage radiateur:
      - position: absolute
      - left: 1%
      - width: 49%
    3erl:
      - position: absolute
      - left: 51%
      - width: 48%

```

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 9, 2025, 4:41 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/26 "2025-06-09T16:41:09Z")

</div>

> [@lopesmaxime](#):
>
> par contre pour changer la couleur du nom et du pourcentage j ai pas reussi je vais continuer d avancer sur les autres cartes .

dans le custom\_filed de la carte gauge, avec `--primary-text-color`

```auto
  custom_fields:
    injection_reseau:
      - position: absolute
      - left: 1%
      - width: 49%
    gauge:
      - position: absolute
      - left: 51%
      - width: 48%
      - background-color: rgba(32,32,32,0.8)
      - border: 2px rgba(211,211,211,0.8) outset
      - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
      - border-radius: 10px
      - border-color: aqua
      - "--primary-text-color": aqua

```

Mais comme le nom et état, utilise le même , tu ne pourras pas modifier avec deux couleurs différentes.  
sinon il faudras utiliser card\_mod 😅

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Juin 9, 2025, 4:44 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/27 "2025-06-09T16:44:01Z")

</div>

> [@WarC0zes](#):
>
> sinon il faudras utiliser card\_mod 😅

Ou alors ne pas mettre de nom dans la carte gauge et ajouter un custom\_fields par dessus avec juste le nom 🤪

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 9, 2025, 4:46 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/28 "2025-06-09T16:46:03Z")

</div>

le connaissant, il voudra changer la couleur du name et state 😅  
Dans ce cas autant tou faire avec button-card. Tu ne peux pas lui faire une carte gauge qu’avec button-card ?

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 4:50 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/29 "2025-06-09T16:50:12Z")

</div>

oui tu commence a me connaitre 😅😅 il y a deux mois je ne voulais rien toucher quand j ai commencer sur HA et j avoue que maintenant c est quand meme pas mal d avoir une coherance partout . meme si mon dasboard est vraiment minimalist par rapport a tout le monde

je vais arreter pour aujourd hui j ai passer trop de temp devant l ecran a faire marcher les meninges

merci a vous deux je vais continuer d avancer a mon rythme

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Juin 9, 2025, 4:54 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/30 "2025-06-09T16:54:02Z")

</div>

> [@WarC0zes](#):
>
> Tu ne peux pas lui faire une carte gauge qu’avec button-card ?

C'est faisable, mais super ch... à faire : il faut faire un custom\_fields semi-circulaire avec un découpage de secteurs de différentes couleurs, puis par dessus un custom\_fields semi-circulaire plus petit avec une couleur opaque. Par dessus un custom\_fields avec une image pour l'aiguille et afficher celui-ci avec une rotation en fonction de la valeur soit 300 lignes de code pour remplacer une carte qui en fait 10 🤪

Un custom\_fields sans background avec juste le nom, c'est plus simple

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 9, 2025, 4:56 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/31 "2025-06-09T16:56:40Z")

</div>

> [@anon51798830](#):
>
> Un custom\_fields sans background avec juste le nom, c’est plus simple

un coup de card\_mod et fini , c'est encore plus simple 🤣

edit:

 ![image](https://forum.hacf.fr/uploads/default/original/3X/c/b/cbd3be685652cb1c7387049d0e6e6589405c353b.png)

```yaml
type: custom:button-card
custom_fields:
  injection_reseau:
    card:
      type: custom:button-card
      entity: sensor.lywsd03mmc_0945_temperature
      name: injection reseau
      icon: mdi:transmission-tower-export
      show_state: true
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
          - height: 150px
        grid:
          - grid-template-areas: "\"n i\" \"s i\""
          - grid-template-columns: 1fr 40%
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - color: salmon
          - padding-left: 60%
  gauge:
    card:
      type: gauge
      entity: sensor.lywsd03mmc_0945_temperature
      name: taux autoconsomation
      needle: true
      severity:
        green: 25
        yellow: 50
        red: 75
      styles:
        card:
          - background-color: rgba(32,32,32,0.8)
          - border: 2px rgba(211,211,211,0.8) outset
          - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
          - border-radius: 10px
          - border-color: aqua
        name:
          - font-size: 16px
      card_mod:
        style:
          ha-gauge$: |
            svg.text>text {
              fill: salmon;
            }
          .: |
            div.name {
              color: aqua;
            }            
styles:
  card:
    - aspect-ratio: 2/1
    - background: none
    - border: none
  custom_fields:
    injection_reseau:
      - position: absolute
      - left: 1%
      - width: 49%
    gauge:
      - position: absolute
      - left: 51%
      - width: 48%
      - background-color: rgba(32,32,32,0.8)
      - border: 2px rgba(211,211,211,0.8) outset
      - box-shadow: 2px 2px 4px rgba(32,32,32,0.5)
      - border-radius: 10px
      - border-color: aqua

```

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 5:06 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/32 "2025-06-09T17:06:56Z")

</div>

finalement card mod ou button card j ai l impression qu on peut faire quasi le meme chose non ? en attendant merci du temp passer a m aider j ai appris pas mal de chose aujourd hui grace a vous

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Juin 9, 2025, 5:12 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/33 "2025-06-09T17:12:47Z")

</div>

Il faut quand même être maso pour faire tout ça (écriture du code) sur le téléphone 😂

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 9, 2025, 5:31 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/34 "2025-06-09T17:31:34Z")

</div>

j avous que cest bien chiant mais comme je n est pas l utilité d un pc a la maison je ne me vois pas en racheter un pour 10 utilisation dans l année .  
je te raconte pas quand j ai fait ton integration pour le msunpv je me suis bien amuser 😉😉

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 10, 2025, 6:47 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/35 "2025-06-10T18:47:57Z")

</div>

slt cleya je revient t embeter pour une petite question j ai recreer une carte avec toute tes indications , j ai aussi reussi a recuperer un bout de code pour changer la couleur de l icone suivant l etat et sa fonctionne ( je te met quand meme le code pour confirmation) , cependant j ai une petite question quand je fait une carte tuile l icone mdi:fire est entouré pour un cercle un peu transparent et par contre sur la carte que j ai fait je n est pas le cercle , et je selectionne pourtant la meme icone , tu a une idée ?

 ![IMG_20250610_204041](https://forum.hacf.fr/uploads/default/original/3X/a/2/a28d461d0faa7b009cf9380f703bb45c3706e511.jpeg)  
 ![IMG_20250610_204109](https://forum.hacf.fr/uploads/default/original/3X/2/0/201a443ff644c8da206687d09223e6062b078fab.jpeg)

```auto
type: custom:button-card
custom_fields:
  routage radiateur:
    card:
      type: custom:button-card
      entity: switch.sonoff_1000bedd89
      name: routage<br>radiateur
      icon: mdi:fire
      show_state: true
      styles:
        card:
          - height: 100px
        grid:
          - grid-template-areas: "\"n i\" \"s i\""
          - grid-template-columns: 1fr 40%
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - padding-left: 10%
          - width: 60px
          - height: 60px
          - color: |
              [[[
                if (states['switch.sonoff_1000bedd89'].state == "on") return "goldenrod";
                if (states['switch.sonoff_1000bedd89'].state == "off") return "grey";
                else return "grey";
              ]]]
  cumulus chaud:
    card:
      type: custom:button-card
      entity: input_boolean.input_boolean_cumulus_hot
      name: cumulus<br>chaud
      icon: mdi:fire
      show_state: true
      styles:
        card:
          - height: 100px
        grid:
          - grid-template-areas: "\"n i\" \"s i\""
          - grid-template-columns: 1fr 40%
        name:
          - font-size: 16px
          - justify-self: start
          - color: aqua
          - padding-left: 5%
        state:
          - font-size: 20px
          - font-weight: bold
          - justify-self: start
          - color: salmon
          - padding-left: 10%
        icon:
          - padding-left: 10%
          - width: 60px
          - height: 60px
          - color: |
              [[[
                if (states['input_boolean.input_boolean_cumulus_hot'].state == "on") return "goldenrod";
                if (states['input_boolean.input_boolean_cumulus_hot'].state == "off") return "grey";
                else return "grey";
              ]]]
styles:
  card:
    - aspect-ratio: 7/2
    - background: none
    - border: none
  custom_fields:
    routage radiateur:
      - position: absolute
      - left: 1%
      - width: 49%
    cumulus chaud:
      - position: absolute
      - left: 51%
      - width: 48%

```

---

<div class="post-metadata">

**Author:** ![Tochy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/tochy/32/41667_2.png) [@Tochy](https://forum.hacf.fr/u/Tochy)\
**Post date:** [Juin 10, 2025, 6:56 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/36 "2025-06-10T18:56:35Z")

</div>

Alors il faut que tu fasses un custom field que tu mettes un cercle dedans avec une couleur de fond et que tu le superposes avec ton icône 😂

C’est juste 187 ligne de code supplémentaires 👍

Juste je chambre un peu je ne sais pas comment ça fonctionne je reste sur mes cartes mushroom avec un peu de card mod

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 10, 2025, 7:01 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/37 "2025-06-10T19:01:20Z")

</div>

plus j avance plus je me dit c est quand meme beaucoup de ligne pour pas grand chose 😅😅

et a chaque fois y a un pti truc qui va pas sur les cartes , j aurais mieux fait de tout laisser en bleu et jaune comme a l origine 🤣🤣🤣

---

<div class="post-metadata">

**Author:** ![WarC0zes](https://forum.hacf.fr/user_avatar/forum.hacf.fr/warc0zes/32/137471_2.png) [@WarC0zes](https://forum.hacf.fr/u/WarC0zes)\
**Post date:** [Juin 11, 2025, 4:01 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/38 "2025-06-11T04:01:12Z")

</div>

Ajoute dans styles / icon

```auto
          - background: rgba(105, 105, 105, 0.5)
          - border-radius: 50%

```

 ![image](https://forum.hacf.fr/uploads/default/original/3X/1/3/13ab7a3949644bc5130da221c971d9350f788c55.png)

> [@Tochy](#):
>
> C’est juste 187 ligne de code supplémentaires 👍

Non, 2 lignes 🤣

---

<div class="post-metadata">

**Author:** ![anon51798830](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ce7236/32.png) [@anon51798830](https://forum.hacf.fr/u/anon51798830)\
**Post date:** [Juin 11, 2025, 5:04 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/39 "2025-06-11T05:04:07Z")

</div>

Salut,

@WarC0zes t’a donné la solution la plus simple (celle du background de l’icône) et @Tochy a évoqué la plus complexe (mais qiu permet d’aller plus loin).  
Tu trouveras les deux versions dans ce post : [Afficher des attribut(s) personnalisé(s) dans un carte mushroom cover - #30 par Cleya](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/30)

Tu peux un peu optimiser ton code en utilisant des expressions ternaires :

```auto
          - color: |
              [[[
                if (states['input_boolean.input_boolean_cumulus_hot'].state == "on") return "goldenrod";
                if (states['input_boolean.input_boolean_cumulus_hot'].state == "off") return "grey";
                else return "grey";
              ]]]

```

```auto
          - color: |
              [[[
                return (states['input_boolean.input_boolean_cumulus_hot'].state === "on") ? 'goldenrod : 'grey';
              ]]]

```

---

<div class="post-metadata">

**Author:** ![lopesmaxime](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lopesmaxime/32/123127_2.png) [@lopesmaxime](https://forum.hacf.fr/u/lopesmaxime)\
**Post date:** [Juin 11, 2025, 6:58 UTC](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581/40 "2025-06-11T06:58:16Z")

</div>

merci a vous deux je vais lire le post .  
si je comprend bien avec un custom field en fait on rajoute des couches a chaque fois sur la carte que l on peu superposer , ajuster gauche/droite ou haut/bas ?

[Page précédente](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581.md?page=1)

[Page suivante](https://forum.hacf.fr/t/horizontal-stack-et-card-mod/63581.md?page=3)