try
background: rgba(0,0,0,0);
Iāve organized my entities into separate cards for each room. Some rooms have too many entities to fit on a single card. Is there a way for these entities to automatically cycle through within their respective cards?
you could add a drop down list of entities that donāt fit on your card
will quote what I said before.
itās not adding border: none because you havenāt added the ha-card correctly.
if you follow the forum guidelines and post your code with `` and not as a screenshot I could help you more
Still no change reflected in the browser after clearing cache and using the suggested value background: rgba(0,0,0,0);. Do I be on a version of mushroom before 3.6.2 for this to work??
When editing the ha-card DOM element directly in Chromeās dev tools, I can set the background color as expected - so I am confident that ha-card is the element I want to target, however, I am almost certainly messing up element targeting in the yaml.
Based on the screenshot and if I understand the docs correctly, ha-card is in the shadow-root of mushroom-cover-card therefore, I should be using the following yaml configuration:
type: custom:mushroom-cover-card
entity: cover.garage_doors
card_mod:
style:
mushroom-cover-card$: |
ha-card {
background: rgba(0,0,0,0) !important;
}
the issue wouldnāt be mushroom it would be card_mod if anything.
can you try this.
this is my working title card
type: custom:mushroom-template-card
primary: 'r e m i n d e r s '
icon: ''
secondary: 'a l a r m s '
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-font-size: 1.5rem;
--card-secondary-color: var(--purple-color);
border: 1px;
box-shadow: none;
background: rgba(0,0,0,0);
margin-top: 1.5rem;
}
In your example, are you editing the yaml in the code editor for the card? When I copy paste your configuration into a brand new mushroom-template-card I still do not see any of the style changes reflected in the UI despite multiple reloads and cache clears.
I would suggest making a new post or ask for assistance in the card_mod thread.
sounds like you have an issue with that. abit out of scope for this mushroom thread.
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 
1 Like
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
thatās how it looks my end obviously without all the entities changed.
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 %}
}