Modifier le style des badges

[Olivi38]

Bonjour à tous,

Je ne comprends pas bien comment modifier le style des badges en haut des vues.

Voici ce que j’ai par exemple (un simple badge avec icône que je souhaiterai afficher quand mon chauffe-eau est en route) :

Mais pour qu’il ressorte un peu plus, j’aimerai lui donner les css suivants :

• badge : border: 1px solid #ff452a;
• icône : color: #ff452a;

pour obtenir :

L’un de vous saurait comment arriver à ça ?
J’ai tenté plein de truc comme par exemple :

type: entity
show_name: false
show_state: false
show_icon: true
entity: binary_sensor.water_heater_status
icon: mdi:water-boiler
show_entity_picture: false
card_mod:
  style: |
    .badge {
      background: red;
    }

mais cela ne fonctionne pas

Voici ce que j’ai dans l’inspecteur de Chrome :

Je manque quelque chose mais quoi ?
J’avoue que je ne sais pas trop où cibler le css…
A moins qu’on ne puisse pas utiliser card_mod avec un type: entity peut-être ?

Si l’un de vous à la solution, je prends !
Merci de votre aide

[Jeffodilo]

Bonjour,
Utiliser un badge template mushroom avec la carte custom mushroom.
https://github.com/piitaya/lovelace-mushroom

[Olivi38]

Bonjour Jeffodilo,

Merci de ton aide, je viens de tester mais le résultat n’est pas mieux :

J’ai le même rendu mais je n’arrive pas à le « styler »

J’ai pourtant :

<mushroom-template-badge>
        #shadow-root (open)
        <div style="" class="badge no-info">
                <ha-ripple aria-hidden="true" disabled=""></ha-ripple>
                <!--?lit$886778698$-->
                <ha-state-icon></ha-state-icon>
                <!--?lit$886778698$-->
        </div>
</mushroom-template-badge>

donc en ciblant .badge, je me dis que normalement ça devrait fonctionner mais… non

Merci !

[Jeffodilo]

Tout est ici
https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472
Abordé de nombreuses fois sur le forum…

[WarC0zes]

Bonjour,
card_mod, ne fonctionne pas avec le badge mushroom template. Et je crois de même pour le badge normal.

2024.8: card_mod does not work for new mushroom-template-badge

[Olivi38]

Bonjour WarC0zes,

C’est bien ce qu’il me semblait…
J’ai eu beau testé divers CSS (badges HA standards et mushroom), rien ne semble pris en compte malheureusement

PS : @Jeffodilo, j’avais déjà fais pas mal de recherches et vu la page « Mushroom Cards » mais malgré plusieurs tests, je n’arrivais justement à rien et c’est pour ça que j’ai fais ce post

Merci à tous de votre aide !!

[Jeffodilo]

Je croyais que tu débutais et tu voulais changer la couleur de l’icône
Sinon tu passes une bande de chips cards en 1er, ca fait comme les badges !

[Tochy]

On peut mettre des mushroom template chips dans les badges qui sont stylable par card mod

[Olivi38]

@Tochy,

Ça fonctionne

Le code :

type: custom:mushroom-template-chip
icon: mdi:water-boiler
card_mod:
  style: |
    ha-card {
      border: 1px solid red !important;
      border-radius: 50% !important;
      padding: 5px 6px;
    }

donne :

Bon par contre, chez moi, la preview ne se met pas à jour automatiquement donc il faut bien penser à enregistrer pour ensuite voir les différences, un peu relou mais on ne va pas se plaindre non plus

Merci encore à tous pour votre aide précieuse !

[Olivi38]

@Jeffodilo,

Pour info, votre solution fonctionne également

Le code :

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: binary_sensor.water_heater_status
    content_info: none
    icon: mdi:water-boiler
    card_mod:
      style: |
        ha-card {
          border: 1px solid red !important;
        }
  - type: weather
    entity: weather.forecast_maison

donne :

Plutôt nickel

Grand merci à tous !

[Olivi38]

Au final, la solution de @Jeffodilo me paraît la plus simple (mais ça ne tient qu’à moi, l’autre fonctionne également et chacun choisira ce qui lui convient le mieux ).

Pour clore la discussion, voici également comment gérer la couleur de l’icône :

Merci à tous !
++