# Alarmo-card modifier button avec card\_mod

**URL:** <https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386>\
**Category:** Entraide Home Assistant\
**Tags:** interface-lovelace, alarm-control-panel, card-mod\
**Created:** [Avril 21, 2024, 3:01 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386 "2024-04-21T15:01:01Z")\
**Posts on this page:** 20\
**Page:** 1

<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:** [Avril 21, 2024, 3:01 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/1 "2024-04-21T15:01:01Z")

</div>

## Mon problème

Bonjour,  
je cherche a modifier le border-radius, border et box-shadow du button pour armer sur la carte alarmo.  
Aussi de la case du code. Pour la case du code j’ai pu modifier le border et box-shadow, mais en appliquant le border-radius on vois une bordure en fond. Donc ce n’est pas le bon endroit que je modifie.

Je cherche a avoir le même résultat que les boutons du keypad  
J’ai encore du mal avec card\_mod et ces shadow-root.

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

```auto
  - type: custom:alarmo-card
    entity: alarm_control_panel.alarmo
    name: Alarme maison
    button_scale_keypad: 1
    use_clear_icon: true
    keep_keypad_visible: true
    card_mod:
      style: |
        ha-card {
          margin-top: -5px;
          background: transparent;
        }
        ha-card > div.header > div.icon > alarmo-state-badge {
          --state-alarm_control_panel-armed_away-color: var(--red-color);
          --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
          --state-alarm_control_panel-armed_home-color: var(--red-color);
          --state-alarm_control_panel-armed_night-color: var(--red-color);
          --state-alarm_control_panel-armed_vacation-color: var(--red-color);
          --state-alarm_control_panel-arming-color: var(--orange-color);
          --state-alarm_control_panel-disarming-color: var(--orange-color);
          --state-alarm_control_panel-pending-color: var(--orange-color);
          --state-alarm_control_panel-triggered-color: var(--red-color);
          --state-alarm_control_panel-disarmed-color: var(--green-color)
        }
        ha-textfield {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
        }
        #keypad alarmo-button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }

```

@Herbs j’ai besoin de toi 😅  
Si quelqu’un peut m’aider ?

## Ma configuration

* * *

Pas utile pour ce problème 😉

* * *

---

<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:** [Avril 21, 2024, 3:10 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/2 "2024-04-21T15:10:49Z")

</div>

Pourquoi tu ne fais pas une carte complète avec button-card ?

---

<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:** [Avril 21, 2024, 3:13 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/3 "2024-04-21T15:13:08Z")

</div>

Parce que j’ai la flemme, que ca va prendre 1000 lignes de code. Alors qu’avec card\_mod, sa sera que quelques lignes a ajouter.

---

<div class="post-metadata">

**Author:** ![Bob](https://forum.hacf.fr/user_avatar/forum.hacf.fr/bob/32/64908_2.png) [@Bob](https://forum.hacf.fr/u/Bob)\
**Post date:** [Avril 21, 2024, 4:44 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/4 "2024-04-21T16:44:39Z")

</div>

@WarC0zes  
Je dirais même, pourquoi tu ne gardes pas la carte originale 🤪  
Détente du dimanche 🤣  
Bob

---

<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:** [Avril 21, 2024, 4:45 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/5 "2024-04-21T16:45:55Z")

</div>

Parce que maintenant qu’il a découvert le relief avec border et box-shadow, il veut en mettre partout 😁

---

<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:** [Avril 21, 2024, 4:48 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/6 "2024-04-21T16:48:07Z")

</div>

Parce que la carte alarme par défaut, ne permet pas l’affichage du keypad en permance.

---

<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:** [Avril 21, 2024, 4:49 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/7 "2024-04-21T16:49:13Z")

</div>

> [@anon51798830](#):
>
> maintenant qu’il a découvert le relief avec border et box-shadow

J’ai pas découvert, juste que j’ai trouver un box-shadow qui me plait. Ce que j’avais était pas génial et mettais pas focaliser dessus.

---

<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:** [Avril 21, 2024, 4:49 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/8 "2024-04-21T16:49:51Z")

</div>

Oui, je sais même où tu l’as trouvé 😉

---

<div class="post-metadata">

**Author:** ![anon21985933](https://forum.hacf.fr/letter_avatar_proxy/v4/letter/a/ecb155/32.png) [@anon21985933](https://forum.hacf.fr/u/anon21985933)\
**Post date:** [Avril 21, 2024, 4:51 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/9 "2024-04-21T16:51:58Z")

</div>

> [@WarC0zes](#):
>
> Parce que la carte alarme par défaut, ne permet pas l’affichage du keypad en permance.

La carte mushroom le fait 😉

---

<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:** [Avril 21, 2024, 4:54 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/10 "2024-04-21T16:54:34Z")

</div>

je les essayer, il y a bien l’option pour afficher le keypad, mais pas en permanence.

![image](https://forum.hacf.fr/uploads/default/original/3X/3/a/3ac26ec7d04dfd3c923615d83a697e6280467532.png)

```auto
type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
  - armed_home
  - armed_away
show_keypad: true

```

---

<div class="post-metadata">

**Author:** ![Herbs](https://forum.hacf.fr/user_avatar/forum.hacf.fr/herbs/32/8029_2.png) [@Herbs](https://forum.hacf.fr/u/Herbs)\
**Post date:** [Avril 21, 2024, 6:14 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/11 "2024-04-21T18:14:18Z")

</div>

Salut @WarC0zes

Vite fait en rentrant de la sortie «&nbsp;dominicale&nbsp;» :

```auto
type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
button_scale_keypad: 1
use_clear_icon: true
keep_keypad_visible: true
card_mod:
  style:
    alarmo-button$:
      mwc-button$: |
        #button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }
    .: |
      ha-card {
        margin-top: -5px;
        background: transparent;
      }
      ha-card > div.header > div.icon > alarmo-state-badge {
        --state-alarm_control_panel-armed_away-color: var(--red-color);
        --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
        --state-alarm_control_panel-armed_home-color: var(--red-color);
        --state-alarm_control_panel-armed_night-color: var(--red-color);
        --state-alarm_control_panel-armed_vacation-color: var(--red-color);
        --state-alarm_control_panel-arming-color: var(--orange-color);
        --state-alarm_control_panel-disarming-color: var(--orange-color);
        --state-alarm_control_panel-pending-color: var(--orange-color);
        --state-alarm_control_panel-triggered-color: var(--red-color);
        --state-alarm_control_panel-disarmed-color: var(--green-color)
      }
      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
      }
        

```

à tester dans tous les cas de figures, voir si ça tient selon les différents états 😉

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

[EDIT] je viens de voir que mon code réduit la taille des boutons «&nbsp;numériques&nbsp;», tu me diras si ça pose problème ou si tu gardes comme ça 😉 ?

[EDIT 2] il manque le champs de saisie pour le code pin 😕

---

<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:** [Avril 21, 2024, 6:26 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/12 "2024-04-21T18:26:56Z")

</div>

Salut @Herbs,  
je savais que tu aurais la solution 👍

Pour la taille des boutons, c’est encore mieux. Ca ira très bien comme ça.

Oui, il manquerais le champs du code.  
pour la bordure ca irais, mais si j’applique un border-radius. On vois une bordure derrière.

```auto
      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
      }

```

edit:

> [@Herbs](#):
>
> à tester dans tous les cas de figures, voir si ça tient selon les différents états 😉

C’est bon, aucun soucis ( tester avec absent et present , j’ai pas nuit ).  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/f/af0fc81c31fc0119b90c683a6bb3b49669211581.png)

---

<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:** [Avril 21, 2024, 6:32 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/13 "2024-04-21T18:32:16Z")

</div>

J’en est mis partout ou je pouvais 🤣 😂

 ![image](https://forum.hacf.fr/uploads/default/original/3X/2/8/28f8769b53076dbbac4e938afa2495b47fff8cd9.png)

---

<div class="post-metadata">

**Author:** ![LeLapinFou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lelapinfou/32/14913_2.png) [@LeLapinFou](https://forum.hacf.fr/u/LeLapinFou)\
**Post date:** [Avril 21, 2024, 6:49 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/14 "2024-04-21T18:49:15Z")

</div>

> [@WarC0zes](#):
>
> ```auto
> ha-textfield {
> box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
> border: 1px rgba(0,0,0,1.0) outset;
> }
> 
> ```

ca me rappelle un truc ça .  
🙂

---

<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:** [Avril 21, 2024, 6:51 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/15 "2024-04-21T18:51:36Z")

</div>

C’est toi la source de ce border box-shadow ?  
je l’avais demander a Cleya, comme je l’avais vu sur une capture d’une carte qui avait faite.

---

<div class="post-metadata">

**Author:** ![LeLapinFou](https://forum.hacf.fr/user_avatar/forum.hacf.fr/lelapinfou/32/14913_2.png) [@LeLapinFou](https://forum.hacf.fr/u/LeLapinFou)\
**Post date:** [Avril 21, 2024, 6:52 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/16 "2024-04-21T18:52:39Z")

</div>

non, moi, j’utilise :  
`inset -4px -4px 5px #b38888, inset 4px 4px 5px #ffffff`

mais on avait fait un fil sur les theme et les box shadow:)  
[🛠 [dashboard & thème] Version custom du theme Soft-UI (Yaml inclus) - Home Assistant - Tutoriels & Partages / Interface / Lovelace / Thème / Custom Card - Home Assistant Communauté Francophone (hacf.fr)](https://forum.hacf.fr/t/dashboard-theme-version-custom-du-theme-soft-ui-yaml-inclus/28280/15)

---

<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:** [Avril 21, 2024, 6:58 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/17 "2024-04-21T18:58:23Z")

</div>

exacte, m’en souvenais plus 😅

---

<div class="post-metadata">

**Author:** ![Herbs](https://forum.hacf.fr/user_avatar/forum.hacf.fr/herbs/32/8029_2.png) [@Herbs](https://forum.hacf.fr/u/Herbs)\
**Post date:** [Avril 21, 2024, 8:19 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/18 "2024-04-21T20:19:39Z")

</div>

@WarC0zes

Avec le code pin :

```auto
type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
button_scale_keypad: 1
use_clear_icon: true
keep_keypad_visible: true
card_mod:
  style:
    alarmo-button$:
      mwc-button$: |
        #button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 25px;
          margin: 4px;
        }
    ha-textfield $: |
      .mdc-text-field {
        border-radius: 25px !important;
      }
      .mdc-text-field__ripple {
        border-radius: 25px !important;
      }      
      .mdc-line-ripple {
        display: none !important;
      }
    .: |
      ha-card {
        margin-top: -5px;
        background: transparent;
      }
      ha-card > div.header > div.icon > alarmo-state-badge {
        --state-alarm_control_panel-armed_away-color: var(--red-color);
        --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
        --state-alarm_control_panel-armed_home-color: var(--red-color);
        --state-alarm_control_panel-armed_night-color: var(--red-color);
        --state-alarm_control_panel-armed_vacation-color: var(--red-color);
        --state-alarm_control_panel-arming-color: var(--orange-color);
        --state-alarm_control_panel-disarming-color: var(--orange-color);
        --state-alarm_control_panel-pending-color: var(--orange-color);
        --state-alarm_control_panel-triggered-color: var(--red-color);
        --state-alarm_control_panel-disarmed-color: var(--green-color)
      }
      ha-textfield {
        box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
        border: 1px rgba(0,0,0,1.0) outset;
        border-radius: 25px;
      }

```

![peek](https://forum.hacf.fr/uploads/default/original/3X/5/d/5d95ee831ed5030392fe4c4626fcc8ce69364e5d.gif)

---

<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:** [Avril 22, 2024, 1:00 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/19 "2024-04-22T01:00:18Z")

</div>

@Herbs bravo 👏  
meci beaucoup, je vais étudier ta solution.

50px en border-radius pour le code, rends mieux 😉  
 ![image](https://forum.hacf.fr/uploads/default/original/3X/a/1/a1c06f145193a1896d0a03cda7016de1bbdb6d4b.png)

---

<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:** [Août 12, 2025, 11:08 UTC](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386/20 "2025-08-12T11:08:37Z")

</div>

Bonjour,  
une maj à cause des nouveaux boutons du core 2025.8.0. Je n'avais plus de bordure sur le keypad et les bouton d'activation de l'alarme.

Avant la modification :

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

Après la modification :

 ![image](https://forum.hacf.fr/uploads/default/original/3X/0/7/07692520afb57fad3f5290a05066a59940825a49.png)

```yaml
type: custom:alarmo-card
entity: alarm_control_panel.alarmo
name: Alarme maison
keep_keypad_visible: true
button_scale_keypad: 1
use_clear_icon: true
states:
  armed_away:
    hide: false
    button_label: Activer (Absence)
    state_label: Absence
  armed_home:
    button_label: Activer (Partielle)
    state_label: Partielle
card_mod:
  style:
    alarmo-button $: |
      button {
        border: none !important;
      }
    ha-textfield $: |
      .mdc-text-field {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;          
          border-radius: 50px !important;
      }
      .mdc-text-field__ripple {
        border-radius: 50px !important;
      }      
      .mdc-line-ripple {
        display: none !important;
      }            
    .: |
      alarmo-button {
          box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.5);
          border: 1px rgba(0,0,0,1.0) outset;
          border-radius: 50px;
          margin: 5px;
          padding: 1px !important;
        }    
      ha-card > div.header > div.icon > alarmo-state-badge {
        --state-alarm_control_panel-armed_away-color: var(--red-color);
        --state-alarm_control_panel-armed_custom_bypass-color: var(--red-color);
        --state-alarm_control_panel-armed_home-color: var(--red-color);
        --state-alarm_control_panel-armed_night-color: var(--red-color);
        --state-alarm_control_panel-armed_vacation-color: var(--red-color);
        --state-alarm_control_panel-arming-color: var(--orange-color);
        --state-alarm_control_panel-disarming-color: var(--orange-color);
        --state-alarm_control_panel-pending-color: var(--orange-color);
        --state-alarm_control_panel-triggered-color: var(--red-color);
        --state-alarm_control_panel-disarmed-color: var(--green-color)
      }

```

[Page suivante](https://forum.hacf.fr/t/alarmo-card-modifier-button-avec-card-mod/40386.md?page=2)