Je trouve cette room card très chouette ! Est-ce que tu peux partager le code STP ?
Merci !!!
Heu… as tu lu le premier message ??
Tous les codes sont partagés depuis le début…
Je crois avoir bien lu l’ensemble du post très interressant … Mais je n’ai pas trouvé le code pour la carte présentée ici :
Bonsoir à tous
je travaille en ce moment sur cette carte et je veux changer les couleurs des textes
Et si possible pouvoir jouer sur les couleurs “lumière :” indépendamment de Circulation eau”
si off j’ai ceci
si on

Alors que mon code pour les couleurs des textes primary et secondary n’est pas cela.
La couleur du primary prend le dessus
mon code
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: light.lumiere_sdb_bas
icon: mdi:bathtub
tap_action:
action: none
badge_icon: |
{% if is_state('binary_sensor.capteur_mvt_sdb_bas', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.capteur_mvt_sdb_bas', 'on') %}
orange
{% else %}
green
{% endif %}
primary: |
Salle de bain : {{ states('sensor.capteur_tem_sdb_bas') }}°C
secondary: >
{% set on_lights = [] %} {% if is_state('light.lumiere_sdb_bas', 'on') %}
{% set on_lights = on_lights + ['On'] %}
{% endif %}
{% set on_sockets = [] %} {% if is_state('switch.prise_pompe_eau', 'on')
%}
{% set on_sockets = on_sockets + ['On'] %}
{% endif %}
Lumière : {{ 'On' if is_state('light.lumiere_sdb_bas', 'on')
else 'off' }} {{ '\n' }}Circulation eau : {{ 'on' if
is_state('switch.prise_pompe_eau', 'on') else 'off' }}
multiline_secondary: true
color: |
{% if is_state(entity, 'on') %}
#F80A0A
{% else %}
#03A9F4
{% endif %}
features_position: bottom
card_mod:
style: |
ha-card {
--primary-text-color: {{ 'orange' if is_state('light.lumiere_sdb_bas', 'on') else 'green' }};
--secondary-text-color: {{ 'red' if is_state('light.lampe_cuisine', 'on') else 'blue' }};
}
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
display: flex;
justify-content: flex-end; # aligne les chips à droite
padding-right: 1px; # espace entre les chips et le bord droit
padding-top: 1px;
padding-bottom: 5px;
background: blue;
box-shadow: red;
}
mushroom-chip$: |
:host {
--chip-height: 148px; /* Hauteur du chip */
--chip-icon-size: 136px; /* Taille de l’icône */
--chip-font-size: 116px; /* Taille du texte si présent */
}
chips:
- type: template
entity: light.lumiere_sdb_bas
icon: mdi:lightbulb
icon_color: |
{% if is_state(entity, 'on') %} orange {% else %} green {% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumière SDB
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.lumiere_sdb_bas
name: Salle de bain
icon: mdi:light-recessed
collapsible_controls: true
- type: template
entity: switch.prise_pompe_eau
icon: >
{% if is_state(entity, 'on') %} mdi:water-pump {% elif
is_state(entity, 'off') %} mdi:water-pump-off {% else %} mdi:water-pum
{% endif %}
icon_color: >
{% if is_state(entity, 'off') %} green {% elif is_state(entity, 'on')
%} orange {% else %} red {% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Circulation eau chaude
content:
type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: switch.prise_pompe_eau
name: Circulation eau chaude
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
card_mod:
style: |
ha-card {
margin-left: auto;
margin-right: auto;
}
ha-card {
box-shadow: inset -4px -4px 6px #FFFCF7, inset 4px 4px 6px #F8DEB4;
border-radius: 12px;
background-color: #; # Assure un fond visible
overflow: visible !important;
padding: 5px;
}
en attendant votre retour. Merci
Bonjour,
avec la nouvelle mise à jour de mushroom, la carte template à changer et n’utilise plus les variables du thème mushroom. Ça utilise les variables de la carte tuile.
Utilise ça pour changer la couleur primaire et secondaire, exemple :
card_mod:
style:
ha-tile-info$: |
.primary {
color: orange !important;
}
.secondary {
color: darkgrey !important;
}
Bonjour à tous.
Avec la nouvelle version de mushroom (V5.0), on a désormais la possibilité d’ajouter des features à la carte mushroom template.
Ainsi on peut ajouter par exemple les features de la carte area directement dans une carte mushroom:
Même si les contrôles de la carte Area sont assez “brutaux” car on toggle toutes les lumières ou tous les volets à la fois, ce peut être suffisant selon les cas…
On peut également utiliser le projet custom-card-features pour ajouter des features sur mesures à la carte mushroom template:
On se retrouve alors avec une seule carte mushroom template, sans avoir besoin d’utiliser stack in card ou card mod.
le code
type: custom:mushroom-template-card
entity: group.lumieres_salon
icon: mdi:sofa
primary: Salon
secondary: |-
Alexa: {{ states('sensor.echo_jeanne_temperature') }}°C
Marsu: {{ states('sensor.alocatia_temperature_2') }}°C
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
hold_action:
action: toggle
badge_icon: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state('binary_sensor.echo_salon_mouvement', 'on') %}
orange
{% else %}
grey
{% endif %}
multiline_secondary: true
color: |
{% if is_state(entity, 'on') %}
#03A9F4
{% else %}
grey
{% endif %}
features_position: bottom
area: salon
features:
- type: custom:service-call
entries:
- type: button
entity_id: group.lumieres_salon
hold_action:
action: toggle
target:
entity_id: group.lumieres_salon
data: {}
haptics: true
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: custom:streamline-card
template: pop-up-light-salon
variables: {}
icon: mdi:lightbulb
color: accent
autofill_entity_id: true
styles: |-
:host {
--icon-color: grey;
{% if is_state("light.0x84ba20fffe4b2581", "on") %}
--icon-color: orange;
{% endif %}
}
- type: button
entity_id: cover.salon
icon: >-
{{ iif(is_state("cover.salon", "open"), "mdi:window-shutter-open",
"mdi:window-shutter") }}
styles: |-
:host {
--icon-color: grey;
{% if is_state("cover.salon", "open") %}
--icon-color: orange;
{% endif %}
}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:
- type: tile
features_position: bottom
vertical: false
entity: cover.volet_du_salon_tv
name: Volet TV
color: accent
features:
- type: cover-open-close
- type: tile
features_position: bottom
vertical: false
entity: cover.volet_du_salon_apero
name: Volet Apéro
color: accent
features:
- type: cover-open-close
hold_action:
action: toggle
target:
entity_id: cover.salon
data: {}
- type: button
entity_id: device_tracker.echo_jeanne
icon: mdi:play-pause
styles: |-
:host {
--icon-color: grey;
{% if is_state("media_player.echo_jeanne", "playing") %}
--icon-color: blue;
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:streamline-card
template: pop-up-alexa
variables:
media_player_entity_name: echo_jeanne
- type: button
entity_id: plant.alocatia
icon: mdi:information
styles: |-
:host {
--icon-color: grey;
{% if is_state("plant.alocatia", "alert") %}
--icon-color: orange;
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Plante Marsupilami
content:
type: custom:flower-card
entity: plant.alocatia
show_bars:
- moisture
- temperature
- illuminance
- conductivity
- dli
battery_sensor: sensor.alocasia_zebrina_battery
display_type: compact
styles: ""
Enfin comme discuté avec Piitaya dans cette discussion, il semble qu’il nous prépare un moyen plus simple de faire des features customizables…
J’attend cette nouveauté pour refaire mon dashboard et éventuellement refaire ce tuto qui n’aura plus vraiment de raison d’être…
Salut,
mais avec custom-card-features, tu n’utilises pas card_mod, car c’est intégré directement dans cette carte.
Ça revient au même, car plus lourd à charger.
c’est comme la carte bubble-card. Du moment que tu joue avec le CSS, c’est plus lourd ![]()
Exactement !
C’est pour ça que j’attend de voir ce que va sortir Piitaya concernant les features… J’espère un truc simple et efficace…
Bonjour
Merci @WarC0zes cela fonctionne ![]()
Oui des éléments dans la 2025.10 sur la tuile aussi
On s’approche d’une belle room card simplifiée ![]()
Je pense que c’est passé un peu inaperçu car ce n’est pas l’éditeur de la carte, mais il y a un paramètre exclude_entities pour la carte area qui permet de contounrer cela. C’est pas fou mais c’est déjà ça.
Tout à fait.
Je trouve que ça manque quand même un peu de finesse, on pourrait par exemple avoir dans certains cas (si l’utilisateur le choisi) le more info a la place du toggle. Ca permet d’avoir un pop-up simpliste qui permet de faire toggle du groupe ou toggle individuel. Pratique par exemple pour les lampes et les volets d’une piece…
Je fais ça avec une distinction appui long appui court sur mes boutons:
- appui court => pop up pour un contrôle fin (allumer juste la petite lampe du salon)
- appui long => toggle de toutes les lampes du salon (en pratique surtout utilisé pour tout éteindre)
Idem pour les volets…
Mais clairement le fonctionnement “toggle” est largement suffisant pour les pieces “simples” (un volet, une lumière) en filtrant les entités qu’on veut contrôler ainsi…
J’ai pas regardé encore la 2025.10, il y a des choses prometteuses ?
J’ai pas regardé en détail, c’est issue d’un échange avec le dev mais oui il va y avoir des fonctionnalités en plus dans la 2025.10 normalement
Et oui la carte native pièce n’est pas ouf et ils en sont bien conscient.
Ils ont posé la base et ça va s’améliorer c’est certain
Je viens de faire un PR pour selectionner les entités a exclure.
Pas 100% satisfait du fait que ce param peut s’appliquer a tout et pas seulement les features. Mais bon c’est déjà ça pour ceux qui ne vont pas trifouiller le yaml des cartes
Oui, il a cette PR pour config le nom de la tuile qui fait doublon avec celle que j’avais commencé, ainsi que celle-ci pour aider à configurer l’info secondaire qui devrait aboutir.
L’ajout de variable pour la carte tuile dans le theme est également en bonne voix. Celle-ci y sera à priori.
ça ne rajoute pas de la fonction, mais ça permet de tuner un peu plus facilement la carte.
@jerome6994 tu as quelques indiscrétions ? ![]()
Edit:
Je viens de découvrir que l’on peut déjà exclure par l’interface graphique des entités d’une carte area dans le dashbord area dès lors que l’on n’a pas pris le contrôle sur le dashbord
SI on prend le contrôle, les entités exclues sont bien dans la conf de la carte concernée.
Bonjour,
Je suis novice sur HA et j’avoue que je commence malheureusement à perdre patience.
Je ne comprends pas pourquoi lorsque j’appuie sur les chips cards il n’y a rien qui se passe ? Merci par avance pour votre aide.
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:sofa
primary: Salon séjour
secondary: « {{ states(« sensor.clim_salon_temperature_ambiante ») }}°C »
tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
double_tap_action:
action: navigate
navigation_path: /lovelace-smartphone/salon
badge_icon: |
{% if is_state(‹ binary_sensor.echo_salon_mouvement ›, ‹ on ›) %}
mdi:motion-sensor
{% else %}
mdi:motion-sensor-off
{% endif %}
badge_color: |
{% if is_state(‹ binary_sensor.echo_salon_mouvement ›, ‹ on ›) %}
orange
{% else %}
grey
{% endif %}
color: |
{% if is_state(entity, ‹ on ›) %}
#03A9F4
{% else %}
grey
{% endif %}
features_position: bottom
area: salon
entity: light.led
icon_tap_action:
action: perform-action
perform_action: light.turn_on
target:
device_id: dd2820fbf1e75bfdb074cca20e247327
data:
color_temp_kelvin: 2423
brightness_pct: 40
hold_action:
action: toggle - type: custom:mushroom-chips-card
chips:- type: template
entity: media_player.tv_tq65s95catxxc
icon: mdi:television
icon_color: |-
{% if is_state(entity, ‹ on ›) %}
blue
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: TV
content:
card: null
type: custom:tv
entity: media_player.tv_tq65s95catxxc - type: template
entity: climate.clim_salon
icon: mdi:air-conditioner
icon_color: |-
{% if is_state(entity, ‹ on ›) %}
#03A9F4
{% else %}
grey
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Echo salon
content:
type: custom:stack-in-card
cards:- type: custom:mini-media-player
entity: media_player.echo_jeanne
source: full
volume_stateless: false
group: true
artwork: full-cover
tts:
platform: alexa
entity_id: media_player.echo_jeanne
type: announce
hold_action:
action: navigate
navigation_path: /lovelace-smartphone/echo
- type: custom:mini-media-player
- type: template
entity: cover.salon
hold_action:
action: toggle
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Volets du salon
content:
type: vertical-stack
cards:- type: custom:mushroom-cover-card
entity: cover.volet_du_salon_apero
name: Volet Apero
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true - type: custom:mushroom-cover-card
entity: cover.volet_du_salon_tv
name: Volet TV
show_position_control: true
show_tilt_position_control: false
show_buttons_control: true
icon: |-
{% if is_state(entity, ‹ open ›) %}
mdi:window-shutter-open
{% elif is_state(entity, ‹ closed ›) %}
mdi:window-shutter
{% else %}
mdi:window-shutter-alert
{% endif %}
icon_color: |-
{% if is_state(entity, ‹ open ›) %}
grey
{% elif is_state(entity, ‹ closed ›) %}
grey
{% else %}
orange
{% endif %}
- type: custom:mushroom-cover-card
- type: template
entity: light.0x84ba20fffe4b2581
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lumières salon
content:
type: vertical-stack
cards:- type: custom:mushroom-light-card
entity: light.0x84ba20fffe4b2581
name: Petite Lampe
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: false
collapsible_controls: true - type: custom:mushroom-light-card
entity: light.prise_lampadaire
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true - type: custom:mushroom-light-card
entity: light.prise_elephants
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true - type: custom:mushroom-light-card
entity: light.prise_cerisier
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true - type: custom:mushroom-light-card
entity: light.prise_tradfri
use_light_color: false
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon: mdi:lightbulb
hold_action:
action: toggle
icon_color: |-
{% if is_state(entity, ‹ on ›) %}
orange
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
padding-top: 0px;
margin-top: -8px;
padding-bottom: 8px;
padding-left: 8px;
padding-right: 8px;
}
- type: custom:mushroom-light-card
- type: template
Bonjour,
Édite ton message et met ton code dans une balise texte préformaté (icône
) pour respecter l’indentation.
j’ai tout éteins et rallumer et ça fonctionne par contre sur les icones exemples lumières ou volets je ne sais pas comment faire lorsque j’appuie dessus s’ouvre une fenetre en pop pop avec toutes les lumières ou volets. En faite chaque bouton est pour un seul appareil… Merci
Si tu veux virer les pop up des chips par exemple des volets( vu que là ils sont toujours définis avec les volets de mon salon…)
Il te suffit de définir autre chose dans les actions liées à ce chip ( soit dans l’interface, par exemple " plus d’info", soit en yaml, changer ce qui est après « tap action »)
Inspire toi du code et des captures d’écran du tuto simplifié…





