Bureau avec Card mod

Entraide Home Assistant
1

Création du bureau pour mobile

Bonjour et meilleurs voeux pour 2024
J’ai suivi un tuto pour créer un bureau sympa pour mobile et quand je copie le la config yaml, jai systématiquement ce message en fin de carte :

  • La clé « style » n’est pas attendue ou non prise en charge par l’éditeur visuel.
    De plus il faut systématiquement que je relance Home assistant…
    Pouvez-vous m’aider ?
    Merci

Ma configuration

System Information

version core-2023.12.4
installation_type Home Assistant OS
dev false
hassio true
docker true
user root
virtualenv false
python_version 3.11.6
os_name Linux
os_version 6.1.58-haos-raspi
arch aarch64
timezone Europe/Paris
config_dir /config
Home Assistant Community Store
GitHub API ok
GitHub Content ok
GitHub Web ok
GitHub API Calls Remaining 5000
Installed Version 1.33.0
Stage running
Available Repositories 1371
Downloaded Repositories 16
HACS Data ok
Home Assistant Cloud
logged_in false
can_reach_cert_server ok
can_reach_cloud_auth ok
can_reach_cloud ok
Home Assistant Supervisor
host_os Home Assistant OS 11.2
update_channel stable
supervisor_version supervisor-2023.12.0
agent_version 1.6.0
docker_version 24.0.7
disk_total 28.0 GB
disk_used 7.5 GB
healthy true
supported true
board yellow
supervisor_api ok
version_api ok
installed_addons Terminal & SSH (9.8.1), Z-Wave JS (0.4.3), Node-RED (16.0.2), Studio Code Server (5.14.2), Matter Server (5.0.1), Mosquitto broker (6.4.0), Z-Wave JS UI (3.0.2)
Dashboards
dashboards 2
resources 5
views 9
mode storage
Recorder
oldest_recorder_run 23 décembre 2023 à 16:31
current_recorder_run 1 janvier 2024 à 16:01
estimated_db_size 120.24 MiB
database_engine sqlite
database_version 3.41.2
2

Salut @Rouau

Si tu t’es basé sur ce tuto, au moins pour la partie « card-mod » :

Tu devrais aller jeter un oeil au topic suivant :wink:

Pour le reboot, faudrait donner plus de détails.

@Moderateur je ne sais plus qui est l’auteur du tuto sur le blog (peut-être @Argonaute), mais il y a de la mise à jour à faire. Bref si vous pouviez passer le message :wink:

1 « J'aime »
3

Salut je pense que c’est juste un espace en trop, voici le miens. il faut pas faire d’espace mais il se fait en copiant et collant les codes.

image
image1017×844 89.5 KB

1 « J'aime »
4

Oh, j’adore le design de ton menu, @Rammy078 ! Si tu veux le partager, je peux le rajouter mon article « Une interface mobile pour votre domotique Home Assistant » (en te citant bien entendu).

Je peux aussi mettre à jour le code. Cela passe encore chez moi et je n’arrive pas à reproduire l’erreur. Quelle serait la correction à faire ? Ou est cet espace en trop ?

5

Salut,
les modifications sont pour card_mod.

avant

    style: |
      ha-card {
        background: #CDC2EE;
        font-weight: bold;
      }

maintenant

    card_mod:
      style: |
        ha-card {
          background: #CDC2EE;
          font-weight: bold;
        }
6

Merci bien @WarC0zes !
J’ai relu le breaking change et il faut effectivement faire cette modif. J’ai modifié le code dans l’article en conséquence.

7

Merci pour vos réponses je test aussitôt que possible.

8

Pas de soucis pour le partage, voici mon menu qui passe super bien sur smartphone.

square: false
type: grid
cards:
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/lumières
    name: Lumières
    icon: mdi:lightbulb-group
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(6,103,231,1) 0%, rgba(153,189,251,1) 90%);
          font-weight: bold;
          color: #53759e;
        }     
  - type: custom:button-card
    icon: mdi:weather-partly-cloudy
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/meteo
    name: Météo
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(2,164,181,1) 0%, rgba(107,229,238,1) 90%);
          font-weight: bold;
          color: #53759e;
        }      
  - type: custom:button-card
    icon: mdi:power-socket-fr
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/prises
    name: Prises
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(24,156,38,1) 0%, rgba(114,254,129,1) 90%);
          font-weight: bold;
          color: #53759e;
        }  
  - type: custom:button-card
    icon: mdi:multimedia
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/multimedia
    name: Multimédia
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(130,30,255,1) 0%, rgba(189,133,254,1) 90%);
          font-weight: bold;
          color: #53759e;
        }   
  - type: custom:button-card
    icon: mdi:home-thermometer-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/thermomètres
    name: Thermomètres
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,28,28,1) 0%, rgba(255,166,166,1) 90%);
          font-weight: bold;
          color: #53759e;
        }  
  - type: custom:button-card
    icon: mdi:fan
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/ventilateurs
    name: Ventilateurs
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(184,184,184,1) 0%, rgba(224,224,224,1) 90%);
          font-weight: bold;
          color: #53759e;
        } 
  - type: custom:button-card
    icon: mdi:solar-power-variant-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/solaire
    name: Solaire
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,134,0,1) 0%, rgba(255,222,78,1) 90%);
          font-weight: bold;
          color: #53759e;
        } 
  - type: custom:button-card
    icon: mdi:window-shutter
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/volets
    name: Volets
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(124,168,189,1) 0%, rgba(187,226,242,1) 90%);
          font-weight: bold;
          color: #53759e;
        }
  - type: custom:button-card
    icon: mdi:cog-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/systeme
    name: Système
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(15,15,15,1) 0%, rgba(159,159,159,1) 90%);
          font-weight: bold;
          color: #53759e;
        }
columns: 2
9

J’ai rajouté ton design dans l’article. Je te laisse vérifier.
Merci beaucoup !

2 « J'aime »
10

nickel, je m’étais basé sur ton tuto et j’ai croisé le thème minihass Ui et n’arrivant pas à l’installer je me suis dit que j’allais faire dans le même style :wink:

1 « J'aime »
11

Petite MAJ pour ma version avec aspect bouton.

image
image717×887 86.3 KB

square: false
type: grid
cards:
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/lumières
    name: Lumières
    icon: mdi:lightbulb-group
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(6,103,231,1) 0%, rgba(153,189,251,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }     
  - type: custom:button-card
    icon: mdi:weather-partly-cloudy
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/meteo
    name: Météo
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(2,164,181,1) 0%, rgba(107,229,238,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }      
  - type: custom:button-card
    icon: mdi:power-socket-fr
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/prises
    name: Prises
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(24,156,38,1) 0%, rgba(114,254,129,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }  
  - type: custom:button-card
    icon: mdi:multimedia
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/multimedia
    name: Multimédia
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(130,30,255,1) 0%, rgba(189,133,254,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }   
  - type: custom:button-card
    icon: mdi:home-thermometer-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/thermomètres
    name: Thermomètres
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,28,28,1) 0%, rgba(255,166,166,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }  
  - type: custom:button-card
    icon: mdi:fan
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/ventilateurs
    name: Ventilateurs
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(184,184,184,1) 0%, rgba(224,224,224,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        } 
  - type: custom:button-card
    icon: mdi:solar-power-variant-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/solaire
    name: Solaire
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,134,0,1) 0%, rgba(255,222,78,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        } 
  - type: custom:button-card
    icon: mdi:window-shutter
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/volets
    name: Volets
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(124,168,189,1) 0%, rgba(187,226,242,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }
  - type: custom:button-card
    icon: mdi:cog-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/systeme
    name: Système
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(15,15,15,1) 0%, rgba(159,159,159,1) 90%);
          font-weight: bold;
          color: #53759e;
          box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
        }
columns: 2
12

Top, merci. Je prend :sunglasses:

13

J’ai testé, mais au final je trouve la version précédente plus épurée (?)

1 « J'aime »
14

Je relance le sujet j’ai des erreurs mais n’yant rien touché je suppose que c’est lié à une mise à jours.
@Argonaute as tu le même problème?
image

square: false
type: grid
cards:
  - type: custom:button-card
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/lumières
    name: Lumières
    icon: mdi:lightbulb-group
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(6,92,153,1) 0%, rgba(157,203,255,1) 100%);
          font-weight: bold;
          color: #53759e;
        }     
  - type: custom:button-card
    icon: mdi:weather-partly-cloudy
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/meteo
    name: Météo
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(241,188,10,1) 0%, rgba(252,254,203,1) 150%);
          font-weight: bold;
          color: #53759e;
        }      
  - type: custom:button-card
    icon: mdi:power-socket-fr
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/prises
    name: Prises
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(24,156,38,1) 0%, rgba(112,222,124,1) 100%);
          font-weight: bold;
          color: #53759e;
        }  
  - type: custom:button-card
    icon: mdi:multimedia
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/multimedia
    name: Multimédia
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(130,30,255,1) 0%, rgba(189,133,254,1) 100%);
          font-weight: bold;
          color: #53759e;
        }   
  - type: custom:button-card
    icon: mdi:home-thermometer-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/thermomètres
    name: Thermomètres
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,28,28,1) 0%, rgba(255,166,166,1) 100%);
          font-weight: bold;
          color: #53759e;
        }  
  - type: custom:button-card
    icon: mdi:fan
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/ventilateurs
    name: Ventilateurs
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(121,121,121,1) 0%, rgba(184,184,184,1) 100%);
          font-weight: bold;
          color: #53759e;
        } 
  - type: custom:button-card
    icon: mdi:solar-power-variant-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/solaire
    name: Solaire
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(255,120,2,1) 0%, rgba(255,245,151,1) 120%);
          font-weight: bold;
          color: #53759e;
        } 
  - type: custom:button-card
    icon: mdi:window-shutter
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/volets
    name: Volets
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(0,103,115,1) 0%, rgba(204,252,255,1) 120%);
          font-weight: bold;
          color: #53759e;
        }
  - type: custom:button-card
    icon: mdi:cog-outline
    tap_action:
      action: navigate
      navigation_path: /dashboard-mobile/systeme
    name: Système
    size: 60%
    color: '#53759e'
    styles:
      icon:
        - transform: rotate(350deg)
        - left: 25%
        - top: 20%
        - color: white
        - opacity: 0.4
      name:
        - color: white
        - top: 12%
        - left: 5%
        - font-size: 100%
        - font-weight: bold
        - position: absolute
    card_mod:
      style: |
        ha-card {
          background: linear-gradient(45deg, rgba(15,15,15,1) 0%, rgba(159,159,159,1) 100%);
          font-weight: bold;
          color: #53759e;
        }
columns: 2
15

Je viens de tester ton code et cela marche bien.

image
image410×711 64.5 KB

As tu bien dans HACS custom:button-card correctement installé et à jour ?
Rafraichi le navigateur ? (ctrl enter sur windows)
Des erreurs dans les logs ?

16

Finalement c’est bon, désinstallé puis réinstallé et ça fonctionne. surement une maj ou je n’ai pas prété attention.