Do you see a red background with this code?
If not have you reloaded card_mod?
Is card_mod working on other cards?
``
type: custom:mushroom-cover-card
entity: cover.your_device
card_mod:
style: |
ha-card {
background: red !important;
}
If not, please follow Frostyās advice and open up a new thread for this specific issue.
More common than you might expect, dont feel too bad 
Good morning everybody,
I need a bit help from the experts
With the new HA update, my custom cards got ābiggerā and the css broke a bit.
I am not sure if this is a mushroom issue or HA issue - am I the only one?
This is the code for one card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Haus
secondary: >-
{{ states('sensor.haus_temperatur_mischung') | replace (".",",")}} Ā°C ā¢ {{
states('sensor.haus_feuchtigkeit_mischung') }} %
icon: mdi:home
entity: light.zentral_haus_licht_helper
tap_action:
action: navigate
navigation_path: haus
hold_action:
action: more-info
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0,2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_bewegung_prasenz_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_bewegung_prasenz
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_fenster_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_fenster
icon: mdi:window-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_turen_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_turen
icon: mdi:door-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.zentral_haus_tore_helper
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: sensor.zentral_haus_offene_tore
icon: mdi:gate-open
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: input_boolean.briefkasten
state: 'on'
chip:
type: template
icon_color: red
tap_action:
action: more-info
entity: input_boolean.briefkasten
card_mod:
style: |
ha-card {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
icon: mdi:mailbox-open
- type: template
icon_color: '{{ ''#f1c232'' if is_state(entity, ''on'') else ''off'' ''#5353ec''}}'
icon: mdi:sleep-off
tap_action:
action: more-info
entity: switch.wach_schlafen
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Besides that, maybe the experts have a better idea how to do it with standard cards to stop potential breaks with new updates 
Hey everybody! Any idea how to remove the delay before it accepts the value for custom:mushroom-number-card ?
in what way have they gotten bigger. is it the icons or the card itself?
what css is no longer working.
I put your code into a new card and from what I can see it looks as it should.
Unfortunately I have no screenshot from the time before
But the height of the card got much bigger - it was way smaller before.
I donāt remember having a separate css to be honest Could you please send me a screenshot how it looks on your end?
I have that as dashboard ācodeā
grid-template-columns: 50% 50%
grid-template-rows: auto
grid-template-areas: |
"left right"
mediaquery:
"(max-width: 390px)":
grid-template-columns: 100%
grid-template-areas: |
"left"
"right"
"(max-width: 800px)":
grid-template-columns: 50% 50%
grid-template-areas: |
"left left"
"right right"
These are the resources I have from HACS
are you using the new sections layout. in the patch notes on resizing cards it mentions cards have a default min and max size
Iām having an issue with mushroom cards on my dash that have a background image. After upgrading to 2024.7.0 the background image no longer displays, does anybody have any suggestions?
HA 2024.6.4
HA 2024.7.0
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Hallway
secondary: >-
{{ states('sensor.hallway_temperature') | round (1) }}Ā°C - {{
states('sensor.hallway_humidity')}}%
icon: none
entity: light.hallway_lamp
tap_action:
action: navigate
navigation_path: /home-v2/hallway
icon_color: '{{ "orange" if is_state("light.hallway_lamp", "on") else "disabled" }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
text-shadow: 0px 0px 5px black;
--card-primary-font-weight: 350;
--card-primary-color: white;
--card-primary-font-size: 20px;
align-items: end;
margin-top: 175px;
inline-size: 180px;
height: 25px;
}
.secondary {
--card-secondary-font-size: 13px;
text-shadow: 0px 0px 5px black;
--card-secondary-color: white;
--card-secondary-font-weight: 320;
margin-top: -2px;
}
.: |
:host {
background: url('/local/images/areas/hallway.PNG') center;
background-size: cover;
background-blend-mode: overlay;
#filter: grayscale(70%);
background-color: rgba(var(--rgb-card-background-color), 0.0);
--mush-icon-size: 0px;
height: 220px;
margin-left: -15px !important;
margin-top: -70px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.hallway_lamp', 'on') else 'disabled' }}), 0.4) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.front_door
state: 'on'
chip:
type: template
entity: binary_sensor.front_door
icon_color: red
icon: mdi:door-open
tap_action:
action: more-info
hold_action:
action: none
- type: conditional
conditions:
- entity: lock.front_door
state: unlocked
chip:
type: template
entity: lock.front_door
icon_color: red
icon: mdi:lock-open-variant
tap_action:
action: more-info
hold_action:
action: none
- type: template
entity: light.hallway_lamp
icon: >-
{{ 'mdi:lightbulb' if expand(area_entities('Hallway')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count > 0 else 'mdi:lightbulb-outline' }}
icon_color: >
{% set lights_in_hallway = expand(area_entities('Hallway')) |
selectattr('domain', 'eq', 'light') | list %} {{ 'orange' if
lights_in_hallway | selectattr('state', 'eq', 'on') | list | count > 0
else 'grey' }}
content: >-
{{ expand(area_entities('Hallway')) |
selectattr('domain','eq','light') | selectattr('state','eq','on') |
list | count }}
tap_action:
action: call-service
service: light.toggle
target:
area_id: hallway
hold_action:
action: more-info
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: -15px;
margin-top: -10px;
}
card_mod:
style: |
ha-card {
height: 180px;
width: 180px;
margin-left: auto;
margin-right: auto;
{% if is_state('light.hallway_lamp', 'on') %}
#box-shadow: 0 0 20px rgba(245, 173, 66, 0.5);
#border-radius: 10px;
#background: rgba(245, 173, 66, 0.3); {% endif %}
}
Same issue here, I think I have similar room cards. This was the original look on my end from an old screenshot:
and now:
(without fixed card height)
I am not a star with card_mod but i think somehow with release 2024.7 the asbolute position of the icon was mangled.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Woonkamer
secondary: |-
{% if has_value("sensor.rookmelder_beneden_temperature") %}
{{ states('sensor.rookmelder_beneden_temperature') | round(0) }} Ā°C
{% endif %}
icon: mdi:sofa
entity: light.lampen_woonkamer
tap_action:
action: navigate
navigation_path: woonkamer
hold_action:
action: toggle
icon_color: blue
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.3);
}
:host {
background: rgba(var(--rgb-primary-background-color), 0.3);
--mush-icon-size: 70px;
height: 56px;
margin-left: -20px !important;
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.lampen_woonkamer
icon: mdi:lightbulb-group
icon_color: |-
{% if is_state(entity, 'on') %}
orange
{% else %}
disabled
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
left: 0px;
}
- type: conditional
conditions:
- entity: binary_sensor.tussendeur_contact
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:door-open
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: null
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: null
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:sleep
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.home_woonkamer
state_not: 'off'
- entity: media_player.home_woonkamer
state_not: idle
- entity: media_player.home_woonkamer
state_not: unavailable
chip:
type: template
entity: media_player.home_woonkamer
icon_color: disabled
icon: |-
{% set media_type = state_attr(config.entity,
'media_content_type') %}
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-roll
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { opacity: 1; }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { opacity: 0.6; }
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- type: conditional
conditions:
- entity: media_player.lg_webos_woonkamer
state_not: 'off'
- entity: media_player.lg_webos_woonkamer'
state_not: idle
- entity: media_player.lg_webos_woonkamer
state_not: unavailable
chip:
type: template
entity: media_player.lg_webos_woonkamer
icon_color: disabled
icon: |-
{% set source = state_attr(config.entity,
'source') %}
{% if source == 'Live TV' %}
mdi:television-classic
{% elif source == 'Plex' %}
mdi:plex
{% elif source == 'YouTube' %}
mdi:youtube
{% elif source == 'Chromecast' %}
mdi:cast
{% elif source == 'NPO' %}
mdi:cast
{% elif source == 'RTL XL' %}
mdi:cast
{% else %}
mdi:television
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.woonkamer_heating
state_not: '0.0'
- entity: sensor.woonkamer_heating
state_not: '0'
chip:
type: template
entity: climate.woonkamer
icon_color: disabled
icon: |-
{% if is_state(entity, 'auto') %}
mdi:thermometer-auto
{% elif is_state(entity, 'heat') %}
mdi:thermometer-lines
{% else %}
mdi:home-thermometer
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state(config.entity, 'heat') %}
animation: heat 2s infinite;
{% endif %}
}
@keyframes heat {
50% { opacity: 0.4; }
}
- type: conditional
conditions:
- entity: cover.woonkamer_gordijnen
state_not: unavailable
chip:
type: template
entity: cover.woonkamer_gordijnen
icon_color: disabled
icon: >-
{% if is_state(entity, 'closed') %}
mdi:curtains-closed
{% elif is_state(entity, 'open') and
state_attr(entity,'current_position') is none %}
mdi:curtains-closed
{% elif is_state(entity, 'open') and
state_attr(entity,'current_position') < 50 %}
mdi:curtains
{% else %}
mdi:curtains
{% endif %}
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-border-width: 0;
}
card_mod:
style: |
ha-card {
height: 92px;
}
It looks like this version is slow. Camera footage does not work for me now or the image looks like 8 pixels.
I am not sure what is going on.
Iāve got the exact same issue too. Unfortunately donāt have screenshots from before to demonstrate.
there must be something you all have in common, I donāt believe it to be a mushroom problem.
mushroom doesnāt have a camera card so it must be something else that is causing the slow pixel refresh.
are you all using the new(ish) sections view on the dashboard ?
No I am not using the sections view. Itās either mushroom or card_mod in conjunction with the 2024.7.0 update thatās causing it.
Yeah, same here - not using Sections and not referring to camera card. Defo seems to be some combination of Mushroom and/or card_mod.
Then I think Iāll wait one more time with the update until I find out whatās wrong.
Indeed. Camera cards are all working good.
This is in my stable dashboard which Iāve been using for over 2 year now I think, so no sections in there. Like I mentioned, something with CSS that must have been updated or broken with 2024.7.0ā¦
Wonder if anybody else has been having issue with sizing related CSS with Card Mod after the latest update?
I use the layout card with the following code:
grid-template-columns: 50% 50%
grid-template-rows: auto
grid-template-areas: |
"left right"
mediaquery:
"(max-width: 390px)":
grid-template-columns: 100%
grid-template-areas: |
"left"
"right"
"(max-width: 800px)":
grid-template-columns: 50% 50%
grid-template-areas: |
"left left"
"right right"
Can I overwrite the card? Otherwise I need to switch to the standard card and keep my hardly built extra controls away 