Carte Grille avec button : Redimensionner la taille du titre et couleur des boutons

Entraide Home Assistant
1

bonjour
je cherche le moyen de redimmensionner le titre d’une carte « Grille »
ainsi que changer la couleur des éléments boutons à l’intérieur

J’utilise card_mod
ça marche plutot bien mais pour le type de carte grille je galère
j’ai cru voir que pour les cartes de type grille le tag ‹ ha-card › ne fonctionne pas
idem la colorisation d’une icone ne marche pas …
je n’ai pas trouver d’info sur comment faire je suis preneur de tout aide :wink:

image

        - square: false
        columns: 4
        type: grid
        title: Alertes
        card_mod:
          style: |
            ha-card {
             --ha-card-header-color: orange;
             --ha-card-header-font-size: 24px;
              }
        cards:
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: group.capteurs_eau
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: binary_sensor.detecteurfumeezik_fault
            icon: mdi:smoke-detector-variant
            icon_height: 40px
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: group.porte_maison
            icon: mdi:door
            icon_height: 40px
          - show_name: false
            show_icon: true
            type: button
            tap_action:
              action: toggle
            entity: group.fenetre_maison
            icon: mdi:window-closed-variant
            icon_height: 40px
            card_mod:
              style:
                ha-state-icon:
                  $: |
                   ha-svg-icon {
                   color: green;
                   }

je suis sur la version : Home Assistant 2022.12.8
card_mod : 3.2.0

2

Ce sujet avec les liens et la vidéo en post 2 peuvent t’aider :

3

Cette réponse devrait t’aider vu que les carte grilles ne contiennent pas de ha-card :

Ne pas oublier que l’utilisation de la carte de card-mod est exceptionnelle et ne s’utilise que quand la carte native n’a pas de ha-card

1 « J'aime »
4

Hello

merci beaucoup pour ton retour ; ta vidéo Top :+1: :pray:
j’aurais du commencer par là :wink:
cependant, j’ai l’impression que c’est pas si simple pour la carte « grid »
j’suis reparti d’un lovelace vierge 1 seul carte grille
j’ai ça dans l’inspecteur :

image
image532×650 25.4 KB

je vois bien ce que je dois modifier, je vois bien le card-mod mais il est très très loin
j’ai essayé d’appliquer ce que tu précises dans la vidéo (et exemple)

card_mod:
  style:
    hui-masonry-view:
     $: 
      hui-card-options:
       $: 
        hui-grid-card:
         $: |
          h1 {
            color: green;
           }

3 shadow à passer ça me semble bizarre ;-(
y’a surement un truc que j’ai pas compris :thinking:

5

hello

petit update : j’ai réussi :+1:
la difficulté c’est dans le cas des grilles / horizontal stack…
il n’y a pas de carte ha-card il faut donc ajouter un type de carte
c’est vrai qu’en meme temps il le précise dans la doc ;-(

type: custom:mod-card
card:
  type: horizontal-stack
  cards:

puis ensuite aller au bon endroit

card_mod:
  style:
    hui-horizontal-stack-card:
      $:
        hui-grid-card:nth-child(1):
          $: |
            h1.card-header { 
             padding: 5px; 
             {% if is_state('group.capteurs_eau','on')  %} 
              color: orange ; 
              animation: blinking 0.5s linear infinite alternate;
             {% endif %} 
             font-size: 16px; 
             text-align: center
             }
            @keyframes blinking {
              0% {opacity: 0;}
              100% {opacity: 1;}
            }

je trouve card_mod super puissant mais sincèrement c’est pas intuitif :wink:

2 « J'aime »