# Afficher des attribut(s) personnalisé(s) dans un carte mushroom cover

**URL:** <https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace\
**Created:** [Juin 7, 2025, 1:03 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509 "2025-06-07T13:03:40Z")\
**Posts on this page:** 20\
**Page:** 2

<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 7, 2025, 2:27 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/22 "2025-06-07T14:27:00Z")

</div>

Oui, j’ai vu, j’ai édité le code pour la prise en compte des changements d’état du volet. Dis-moi si tu as besoin d’explication pour cette partie. Je vais prendre un café, suite dans 10 minutes si tu veux bien. On passera ensuite aux boutons.

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 2:32 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/23 "2025-06-07T14:32:06Z")

</div>

Pas besoin d’expliactions pour l’instant.  
Uniquement 2 états , et si partiellement ouvert , c’est ouvert  
juste pour info le nom du capteur Hall est  
binary\_sensor.contactvoletroulantcuisine\_window  
y’ a pas detecteur dedans 🙂

je corrige dans mon code

c’est bon

---

<div class="post-metadata">

**Author:** ![hackdiy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/hackdiy/32/95785_2.png) [@hackdiy](https://forum.hacf.fr/u/hackdiy)\
**Post date:** [Juin 7, 2025, 2:35 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/24 "2025-06-07T14:35:58Z")

</div>

> [@kilooli](#):
>
> binary\_sensor.contactvoletroulantcuisine\_window

le capteur se met en On = ouvert et Off = fermé

---

<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 7, 2025, 2:40 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/26 "2025-06-07T14:40:03Z")

</div>

> [@kilooli](#):
>
> juste pour info le nom du capteur Hall est  
> binary\_sensor.contactvoletroulantcuisine\_window  
> y’ a pas detecteur dedans 🙂

Oui, j’ai mis un capteur de chez moi pour avoir la visualisation 😁 j’ai juste oublié de te dire de le changer

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 2:40 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/27 "2025-06-07T14:40:48Z")

</div>

oui.  
J’ai mis ton code dans configuration.yaml  
Mais comment je crèe la carte après ?  
Il faut créer une carte générique et changer le type dans le code , c’est ça ?

---

<div class="post-metadata">

**Author:** ![hackdiy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/hackdiy/32/95785_2.png) [@hackdiy](https://forum.hacf.fr/u/hackdiy)\
**Post date:** [Juin 7, 2025, 2:46 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/28 "2025-06-07T14:46:11Z")

</div>

voila une correction de ton code d’origine , dit moi si 'est ok. et n’oublie pas de changer les noms cover et binary\_sensor si il ne corespondent pas .

```auto
type: custom:mushroom-cover-card
entity: cover.voletsroulants
name: Volets
layout: horizontal
fill_container: false
primary_info: name
secondary_info: >-
  {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
    Ouvert
  {% else %}
    Fermé
  {% endif %}
show_position_control: false
show_buttons_control: true
icon: mdi:window-shutter
grid_options:
  columns: 6
  rows: 1
tap_action:
  action: none
hold_action:
  action: none
double_tap_action:
  action: none
card_mod:
  style: |
    ha-card {
      background: #1C1C1C;
      --primary-text-color: green;
      --card-primary-color: cyan;
      {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
        --card-secondary-color: var(--green-color);
      {% else %}
        --card-secondary-color: var(--red-color);
      {% endif %}
    }
    ha-state-icon {
      {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
        color: var(--green-color);
        --card-mod-icon: mdi:window-shutter-open;
      {% else %}
        color: var(--red-color);
        --card-mod-icon: mdi:window-shutter;
      {% endif %}
    }

```

---

<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 7, 2025, 2:51 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/30 "2025-06-07T14:51:12Z")

</div>

Je t'ai mis juste pour info. des éléments graphiques dans les styles de l'élément "card" (la carte support). J'ai ajouté l'attribut "pointer-events: none" de façon à supprimer l'effet sur la carte lors d'un clic. Le clic ne devant se faire que sur les custom\_fields que nous allons ajouter pour les boutons "monter" et "descendre" pour piloter le volet. Veux-tu un bouton "stop" pour l'arrêter en cours de route ? Là encore j'utilserai un de mes volets pour les actions, il faudra que tu mettes ton entité.

```YAML
type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: |
  [[[
    const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
    return (value === 'on') ? 'Ouvert' : 'Fermé';
  ]]]
show_label: true
layout: icon_name_state2nd
styles:
  card:
    - background-color: rgba(54,54,54,1.0)
    - border: 2px rgba(211,211,211,0.8) outset
    - box-shadow: 4px 4px 8px rgba(32,32,32,0.5)
    - border-radius: 10px
    - pointer-events: none
  icon:
    - color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'red' : 'green';
        ]]]
    - background-color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'rgba(255,0,0,0.5)' : 'rgba(0,255,0,0.2)';
        ]]]
    - border-radius: 50%
    - width: 30%
    - margin-right: 60%
  name:
    - color: cyan
    - font-size: 20px
    - font-weight: bold
    - padding-right: 140%
  label:
    - color: red
    - font-size: 1em
    - padding-right: 140%

```

Nous allons faire un premier custom\_fields pour le bouton qui permettra de monter le volet. Un custom\_fields est un champ personnalisé permettant d'afficher n'importe quelle carte dans une custom:button-card (ou d'afficher une animation, un flux vidéo, bref à peu près tout ce que tu veux). Nous allons nous servir d'une custom:button-card. Le principe est de définir le custom\_field, de lui donner un nom, de définir ce qu'il doit afficher puis ensuite dans les styles de la carte support, nous déterminerons où il devra s'afficher.

Nous allons donc d'abord définir le custom\_fields en ajoutant entre la définition de la carte support et ses styles ceci :

```YAML
custom_fields:
  bouton_monter:
    card:
      type: custom:button-card

```

Tu verras un petit point blanc en bas à droite de la carte support.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/9/d/9d08e9c753aa9c1a3c2df3249318fde80a19d0ac.png)

Comme nous utilisons une custom:button-card, nous allons pouvoir ajouter une icône (et cela suffira) puis définir les styles de cette icone ainsi que les styles de la carte (élément card).

Voilà donc ce que nous allons définir pour le bouon monter :

```auto
custom_fields:
  bouton_monter:
    card:
      type: custom:button-card
      icon: mdi:arrow-up-bold
      styles:
        card:
          - aspect-ratio: 1/1
          - background: none
          - border: none
          - width: 50px
          - pointer-events: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'none' : 'auto';
              ]]]      
        icon:
          - width: 80%
          - color: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'green' : 'dimgray';
              ]]]    

```

le pointer-events permet de définir si le bouton est "cliquable" ou pas en fonction de l'état du volet : on ne peut pas le monter si le volet est ouvert...  
La couleur de l'icone change aussi en fonction de l'état (grisé = inactif) quand le volet est ouvert et vert dans le cas contraire.

 ![image](https://forum.hacf.fr/uploads/default/original/3X/e/d/ed9035c54b24e2b6116d71d3121429b4b39bbcb7.png)

Nous allons ensuite déterminer la position du custom\_fields. Comme dit pluis haut ceci se fait dans les styles de la carte support :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/9/9/99db57f003531461166d15bd28b7a6a888a27b48.png)  
Je n'indique la position par rapport au coin gauche et haut de la carte support car de base le custom\_fields est positionné verticalement au centre de la carte support.

C'est bon pour toi ?

Nous allons maintenant gérer l'action lors du clic (quand celui-ci est possible) en définissant ce qui doit se faire :

```YAML
custom_fields:
  bouton_monter:
    card:
      type: custom:button-card
      icon: mdi:arrow-up-bold
      styles:
        card:
          - aspect-ratio: 1/1
          - background: none
          - border: none
          - width: 50px
          - pointer-events: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'none' : 'auto';
              ]]]      
        icon:
          - width: 80%
          - color: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'green' : 'dimgray';
              ]]]
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: cover.cuisine

```

Pense à changer l'entité dans "entity\_id".

Nous allons pouvoir ajouter le deuxième bouton (pour descendre le volet) de la même manière avec un deuxième custom\_fields. Il suffit de copier et collé le premier puis modifier le nom et les autres éléments, ce qui sera bien plus rapide que de tout retaper.

Le code complet :

```YAML
type: custom:button-card
entity: cover.chambre
name: Volet
icon: mdi:window-shutter-open
label: |
  [[[
    const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
    return (value === 'on') ? 'Fermé' : 'Ouvert';
  ]]]
show_label: true
layout: icon_name_state2nd
custom_fields:
  bouton_monter:
    card:
      type: custom:button-card
      icon: mdi:arrow-up-bold
      styles:
        card:
          - aspect-ratio: 1/1
          - background: none
          - border: none
          - width: 50px
          - pointer-events: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'auto' : 'none';
              ]]]      
        icon:
          - width: 80%
          - color: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'on') ? 'green' : 'dimgray';
              ]]]
      tap_action:
        action: call-service
        service: cover.open_cover
        service_data:
          entity_id: cover.salon_volet_roulant_cote_bibliotheque
  bouton_descendre:
    card:
      type: custom:button-card
      icon: mdi:arrow-down-bold
      styles:
        card:
          - aspect-ratio: 1/1
          - background: none
          - border: none
          - width: 50px
          - pointer-events: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'off') ? 'auto' : 'none';
              ]]]      
        icon:
          - width: 80%
          - color: |
              [[[
                const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
                return (value === 'off') ? 'green' : 'dimgray';
              ]]]
      tap_action:
        action: call-service
        service: cover.close_cover
        service_data:
          entity_id: cover.salon_volet_roulant_cote_bibliotheque
styles:
  card:
    - background-color: rgba(54,54,54,1.0)
    - border: 2px rgba(211,211,211,0.8) outset
    - border-radius: 10px
    - pointer-events: none
  icon:
    - color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'red' : 'green';
        ]]]
    - background-color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'rgba(255,0,0,0.5)' : 'rgba(0,255,0,0.2)';
        ]]]
    - border-radius: 50%
    - width: 30%
    - margin-right: 60%
  name:
    - color: cyan
    - font-size: 20px
    - font-weight: bold
    - padding-right: 140%
  label:
    - color: |
        [[[
          const value = states['binary_sensor.cuisine_detecteur_d_ouverture_fenetre_cote_droit_contact'].state;
          return (value === 'on') ? 'red' : 'green';
        ]]]
    - font-size: 1em
    - padding-right: 140%
  custom_fields:
    bouton_monter:
      - position: absolute
      - left: 45%
    bouton_descendre:
      - position: absolute
      - right: 15%

```

Pense à bien mettre l'entité de ton volet

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 2:53 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/31 "2025-06-07T14:53:17Z")

</div>

Oui c’est tout bon ça marche.  
Merci à toi !!! et bon WE  
Je continue avec Cleya pour button-card 🙂

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 2:56 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/32 "2025-06-07T14:56:12Z")

</div>

Merci beaucoup pour le temps que tu passes.  
Chat GPT n’a qu’a bien se tenir lol  
Pas besoin de bouton stop , et mlerci pour les infos .  
Je colle et je corrige

---

<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 7, 2025, 2:56 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/33 "2025-06-07T14:56:58Z")

</div>

ChatGPT se plante systématiquement pour ce que nous allons voir maintenant 😁

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 2:58 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/34 "2025-06-07T14:58:40Z")

</div>

c’est ok

[![](https://i.ibb.co/V0k79ng3/4.png)](https://ibb.co/Q7x2QSPX)

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 3:03 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/35 "2025-06-07T15:03:40Z")

</div>

c’est ok , point blanc présent  
[![](https://i.ibb.co/9kvQN3NB/5.png)](https://ibb.co/gL7k3F3Q)

C’est ok  
[![](https://i.ibb.co/rWK893x/1.png)](https://ibb.co/fcV6J9k)

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 3:20 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/36 "2025-06-07T15:20:34Z")

</div>

Ben en fait je n’ai pas d’affichage du statut du volet (en texte)

[![](https://i.ibb.co/gZdkFPRf/2.png)](https://imgbb.com/)

```auto
secondary_info: >-
  {% if is_state('binary_sensor.contactvoletroulantcuisine_window', 'on') %}
    Ouvert
  {% else %}
    Fermé
  {% endif %}

```

semble ne pas fonctionner

---

<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 7, 2025, 3:21 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/37 "2025-06-07T15:21:08Z")

</div>

Il faudra que tu inverse la couleur de l’icone du custom\_fields et probablement aussi le pointer-events. Tu ne dois pas pouvoir cliquer sur ce bouton si le volet est ouvert. Le principe de l’expression en fonction de l’état est le suivant : `return (expression évaluée) ? 'valeur si vrai' : 'valeur si faux' ;`

---

<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 7, 2025, 3:22 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/38 "2025-06-07T15:22:08Z")

</div>

T’occupes, avec custom:button-card, ça s’affichera (et sans card-mod) 🤪

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 3:34 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/39 "2025-06-07T15:34:13Z")

</div>

OK c’est pkus long poiur moi désolé , ces satanées indentations !!!  
[![](https://i.ibb.co/TqkB542z/1.png)](https://ibb.co/tP4M5qKy)

je changerai les sens/couleurs après

---

<div class="post-metadata">

**Author:** ![hackdiy](https://forum.hacf.fr/user_avatar/forum.hacf.fr/hackdiy/32/95785_2.png) [@hackdiy](https://forum.hacf.fr/u/hackdiy)\
**Post date:** [Juin 7, 2025, 3:41 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/40 "2025-06-07T15:41:51Z")

</div>

> [@hackdiy](#):
>
> ![Capture d’écran_7-6-2025_153358_192.168.1.5](https://forum.hacf.fr/uploads/default/original/3X/d/1/d13c5e5833f70eb19224e035ec1737edb41f86cf.jpeg)
> 
> ![Capture d’écran_7-6-2025_15360_192.168.1.5](https://forum.hacf.fr/uploads/default/original/3X/d/7/d7ef86e92bd8447370df20f175e5891af39cba68.jpeg)

l'état en couleur n'est pas suffisant ou bien ne fonctionne pas ? je ne voie pas l'intérêt de rajouter du text en plus .

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 3:43 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/41 "2025-06-07T15:43:07Z")

</div>

j’ai changé les sens en changeant

```auto
 return (value === 'off') 

```

```auto
 return (value === 'on')

```

dans le pointer et l’icone

[![](https://i.ibb.co/8nSGXzJt/1.png)](https://ibb.co/JWM8CxNg)

---

<div class="post-metadata">

**Author:** ![kilooli](https://forum.hacf.fr/user_avatar/forum.hacf.fr/kilooli/32/96836_2.png) [@kilooli](https://forum.hacf.fr/u/kilooli)\
**Post date:** [Juin 7, 2025, 3:44 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/42 "2025-06-07T15:44:26Z")

</div>

Oui je suis de ton avis , mais Madame voudrait bien du texte …  
Et ce que femme veut , femme l’obtient 🙂  
ou essaye hardemment de l’obtenir

---

<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 7, 2025, 3:44 UTC](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509/43 "2025-06-07T15:44:29Z")

</div>

Oui, une fois le principe compris (et après plusieurs essais), tu y arriveras. Je suis moi aussi obligé de faire plusieurs essais avant que ça colle 😁

Pour modifier la taille de la carte, tu peu le faire sans souci dans les styles de l'élément "card" avec "- width:" et "- height:" en spécifiant la atille en pixels ("- width: 400px") ou en pourcentage ("- width: 50%").

Tu as maintenant une version simplifiée de ce qu'on peut faire avec une custom:button-card. Si tu veux aller plus loin, les possibilités de cette carte sont énormes et une fois les principes de base acquis, tu ne pourras plus t'en passer...

![essai](https://forum.hacf.fr/uploads/default/original/3X/c/e/ce13416c95a4e4e4b11e3f5db4cffa0b07781928.gif) la qualité d'image avec la capture est plus que bof, mais ça donne un aperçu 😉

C'est bon pour ta carte "Volet" ?

Tu trouveras des exemples que j'ai posté ici :

> [@Gestion porte de garage avec template COVER problème état](https://forum.hacf.fr/t/gestion-porte-de-garage-avec-template-cover-probleme-etat/61459):
>
> Bonjour, J’ai une porte de garage sectionnelle motorisée. J’ai un contact qui remonte via un ESP32 qui indique si la porte est fermée J’utilise un template COVER, le code: porte\_garage: device\_class: garage friendly\_name: "Commande porte garage" value\_template: "{{ is\_state('binary\_sensor.porte\_garage', 'on') }}" open\_cover: - service: switch.turn\_on target: entity\_id: switch.sonoff\_100173bbc2 close\_cover: …

> [@Cards Machine a laver](https://forum.hacf.fr/t/cards-machine-a-laver/57062/30):
>
> Je vais te mettre le code commenté de façon à ce que tu comprennes le fonctionnement. Tout d’abord, c’est fait à partir de custom:button-card : [GitHub - custom-cards/button-card: sparkle Lovelace button-card for home assistant](https://github.com/custom-cards/button-card) Il faudra donc installer cette carte depuis HACS ou manuellement (tu as la procédure d’installation décrite dans le lien ci-dessus ainsi que la documentation de la carte). Je vais éditer plusieures fois ce message pour tout expliquer, donc soit patient. Les images utilisée…

> [@Aide pour création d'une carte](https://forum.hacf.fr/t/aide-pour-creation-dune-carte/56853/24):
>
> Le but est effectivement que tu comprennes le fonctionnement (d’où le fait que je mettes le code au différentes modifications : ainsi par comparaison, tu peux voir ce que donne les modifications) Le code final (?) : type: custom:button-card name: Poêle à granulés custom\_fields: etat\_poele: card: type: custom:button-card name: | [[[if (states['input\_boolean.essai\_poele'].state == 'off') return 'Off'; else return 'On'; …

> [@Bouton alarme Jablotron](https://forum.hacf.fr/t/bouton-alarme-jablotron/56189/4):
>
> Salut @Matt1, J’ai trouvé que ton besoin était relativement simple à faire et donc, plutôt que de te poster du code tout fait, j’allais te montrer comment arriver au résultat voulu sous forme de didacticiel (cela pourra éventuellement servir à d’autre). A la base, tu voudrais modifier une carte que je t’avais faite, basée sur une custom:button-card en ajoutant deux boutons à la gauche de la carte existente. Cette carte comprenait trois zones, une zone «&nbsp;Portail & Garage&nbsp;», une zone «&nbsp;Portail&nbsp;…

[Page précédente](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509.md?page=1)

[Page suivante](https://forum.hacf.fr/t/afficher-des-attribut-s-personnalise-s-dans-un-carte-mushroom-cover/63509.md?page=3)