Easy to fix, like this:
card_mod:
style: |
ha-card {
{% if not is_state(config.entity, 'off') %}
background-image: url( '{{ state_attr( config.entity, "entity_picture" ) }}' );
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),0.8);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-teal);
}
Worked perfectly thank you very much 
Ive got another question Im trying to call the light.toggle service within a stack-in-card + mushroom person card to a specific light. I tried the following code but that doenst work. Ill just get the normal view to turn on/off the light and change color.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.saskia
icon_type: entity-picture
name: Saskia
- type: custom:mushroom-chips-card
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
chips:
- type: entity
entity: sensor.iphone_13_reni_battery_level
- type: entity
entity: lock.320i_xdrive_lock
- type: entity
entity: person.saskia
- type: entity
entity: light.hyperhdr
name: Ambilight
service: light.toggle
data: {}
target:
entity_id: light.hyperhdr
which part ? most of the codes were already shared, by i Can point the right post
Yes, I do have card_mod installed.
Here is my code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Office
secondary: >-
{{ states('sensor.living_room_thermostat_temperature') }} °C | {{
states('sensor.living_room_thermostat_humidity') | int(0) }} %
icon: mdi:desk
icon_color: '#e8af10'
fill_container: true
layout: horizontal
multiline_secondary: false
entity: light.office_ceiling
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
:host {
--mush-icon-size: 50px;
height: 70px;
margin-left: 0px !important;
--primary-text-color: black;
--secondary-text-color: black;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.office_ceiling
icon: |
{% if is_state(entity, 'on') %}
mdi:lightbulb-on
{% else %}
mdi:lightbulb-outline
{% endif %}
icon_color: |
{% if is_state(entity, 'on') %}
yellow
{% else %}
grey
{% endif %}
double_tap_action:
action: none
tap_action:
action: toggle
hold_action:
action: none
- type: template
entity: binary_sensor.office_motion_sensor
icon_color: |
{% if is_state(entity, 'on') %}
white
{% else %}
grey
{% endif %}
double_tap_action:
action: none
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 20px;
margin-top: 4px;
margin-right: 4px;
}
:host {
background-color: rgba(var(--rgb-card-background-color), 0.6);
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 44px;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.living_room_thermostat_temperature
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: none
- type: template
entity: sensor.living_room_thermostat_humidity
icon: mdi:water
icon_color: white
content: '{{ states(entity) }} {{ state_attr(entity, "unit_of_measurement") }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: start
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 20px;
margin-top: 4px;
margin-left: 4px;
--text-color: rgb(var(--rgb-green));
--color: rgb(var(--rgb-red));
}
:host {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 44px;
--text-color: #ffffff !important;
--icon-color: #ffffff !important;
}
card_mod:
style: |
ha-card {
height: 250px;
background-image: url("/api/image/serve/d66480268b9c0f34de2cc22a77e30dbc/512x512");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
and here is the result:
I try to change the color of the yellow circled chips.
simpler way: use your sensor definition.
I’ll copy you my code tonight when I’ll at home, quite easy…
I want to change the button background, this one:
(example done in photoshop)
I would like it to match the slider from the fan, for example.
Hi Folks, climate card, is there any way of toggling on/off/auto? It only seems to do on/off by default. I did have a read back but couldn’t find anything obvious? Thanks.
THanks for the code for the card! For some reason, the chip thing worked itself out, maybe because I was using my iPad originally and now I am on the computer? No clue, but thank you for your help!
There it is (sorry for the french…).
Using this, your sensor receive the sentence.
- platform: template
sensors:
nbre_fenetres_ouvertes:
value_template: >
{% set fenetres = [
states.binary_sensor.chambre_maelys_detecteur_fenetre,
states.input_boolean.sdb_fenetre_ouverte,
states.binary_sensor.annaelle_fenetre,
states.binary_sensor.bureau_fenetre,
states.binary_sensor.living_detecteur_fenetre,
states.binary_sensor.salon_detecteur_fenetre,
states.binary_sensor.porte_fenetre_salon,
states.input_boolean.cuisine_fenetre_ouverte,
states.input_boolean.parents_fenetre_ouverte,
states.input_boolean.sacha_fenetre_ouverte
] %}
{% set fenetres_ouvertes = fenetres | selectattr('state','eq','on') | list %}
{% if (fenetres_ouvertes | length ==1)%}
Une fenêtre ouverte
{% elif (fenetres_ouvertes | length >1 )%}
{{ fenetres_ouvertes | length}} fenêtres ouvertes
{% else %}
Tout est fermé
{% endif %}
Did we ever figure out this iOS animation issue? It’s still happening in iOS 16.
It actually happens with the light slider too.
Hi how do i change the primary font family ?
i tried this but no luck
--primary-font-family: SF Text !important;
also this
.mdc-dialog__content {
font-family: SF Text !important;
}
Hi is this bug in mushroom template card? its does not display 0(zero)…can anyone conform?
{% if is_state('sensor.completed_tasks','0') %}
0
{% elif not is_state('sensor.completed_tasks','0') %}
1
{% endif %}
Here you go!
type: custom:mini-graph-card
name: Current Load
animate: true
decimals: 0
hours_to_show: 24
line_width: 1
points: false
points_per_hour: 6
entities:
- sensor.energy_monitor_power
show:
labels: true
icon_adaptive_color: true
extrema: false
average: false
color_thresholds:
- value: 1000
color: '#0099ff'
- value: 2000
color: '#4caf50'
- value: 4000
color: '#ff9800'
- value: 6000
color: '#f44336'
icon: mdi:transmission-tower
card_mod:
style:
.header.flex .icon ha-icon:
$: |
ha-svg-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
Hello do you have any github repo?
Congrats on your dashboard! Great ideias
+1 for your code
You will first need to add the font as a stylesheet resource in dashboards. You can then specify the font like this:
type: custom:mushroom-template-card
icon: mdi:mushroom
icon_color: orange
primary: Mushroom
card_mod:
style:
mushroom-state-info$: |
.primary {
font-family: 'Nabla', cursive;
--card-primary-font-size: 30px;
}
mushroom-shape-icon$: |
.shape {
border-left: 3px solid rgb(var(--rgb-orange));
transform: rotate(-20deg);
}
ha-icon {
transform: rotate(20deg);
}
Hey. Im trying to do a pop up within a slider card but cant get it to work/call the service. Any help would be awesome. Im trying to build a slider card (works) where i can press the “picture” i,e “Lights” which shows me a pop up to all my lights/light group. Right now its just showing me a blank pop-up without any text or entities/lights
Thank you 
type: custom:swipe-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Licht
secondary: ''
icon: mdi:lightbulb
icon_color: yellow
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
entity: light.alle_lichter
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Temperatur
secondary: ''
icon: mdi:thermometer
icon_color: blue
layout: vertical
tap_action:
action: navigate
navigation_path: temperatur
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Jalousie
secondary: ''
icon: mdi:window-shutter
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: rollos
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Media
secondary: ''
icon: mdi:cast-variant
icon_color: teal
layout: vertical
tap_action:
action: navigate
navigation_path: test
Each card uses different selectors, but for Mushroom Media card you can change the button colors like this:
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(var(--rgb-red), 0.05);
}
.: |
mushroom-button {
--bg-color: rgba(var(--rgb-red), 0.05);
}
You could maybe create a script to cycle through on/off/auto.