Does anyone no if you can change the background of an card/button?
I have some scene cards, and some room cards like this:
But I really want to change the background for some cards. I also try to add some dividers to the cards, but with no luck.
type: custom:mushroom-template-card
primary: Home
secondary: ''
icon: mdi:home
layout: vertical
tap_action:
action: navigate
navigation_path: Woonkamer
icon_color: '#E38B29'
It’s a simple conditional card: when Spotify is playing, display the media player (aspect ratio square to make it look like the album art) and any speakers that are playing. When Spotify isn’t playing, it displays a collection of playlist buttons (which I manually created using my playlist artwork).
Yeah, I know we can customize individual instances — it would be nice to have a reusable template so the customizations don’t need to be repeated on every card.
I’ve updated the original post to remove the lines 
.
You can target specific card types in your theme using card_mod. Have a look here:
Let me know if you need any help identifying the classes.
You cannot use templating in an entity card. Try using a Mushroom Template Card instead:
type: custom:mushroom-template-card
icon: mdi:sprinkler-variant
fill_container: false
tap_action:
action: toggle
layout: vertical
entity: switch.closet
icon_color: '{{ ''yellow'' if(is_state(entity, ''on'')) else ''red'' }}'
primary: Front Yard
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spray 4s ease-in infinite;' if(is_state(config.entity, 'on')) }}
}
@keyframes spray {
0%, 50%, 100% { clip-path: polygon(0 0, 60% 0, 61% 100%, 0% 100%); }
25%, 75% { clip-path: polygon(41% 1%, 100% 0, 100% 100%, 39% 100%); }
}
This is just outstanding! We are implementing it with @Matjum , thank you!
Can I give you a challenge :D?
Do you think it is possible to add second progress bar with different entity?
Let’s say we would like to add mobile battery AND smartwatch battery
looking forward to your reply!
I’ve tried a few things with no luck to change the color of the slider in the media player card. Is there a way that I just wasn’t able to figure out? Regardless, it might make sense to add color choices for any kind of slider like what you did with the light cards. Thanks in advance.
That was the problem. Changed to template card and it works perfectly. Thanks!
Sure, here you go:
Mushroom Dual Progress Bar:
type: custom:mushroom-template-card
icon: mdi:battery-high
primary: Battery Level
icon_color: green
secondary: >-
{{ states('sensor.rhys_phone_battery_level') | round(0) }}% Phone |
{{ states('sensor.rhys_tablet_battery_level') | round(0) }}% Tablet
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ states('sensor.rhys_phone_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:before {
content: "";
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-teal)) {{ states('sensor.rhys_tablet_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
position: absolute;
border-radius: var(--icon-border-radius);
width: 81%;
height: 81%;
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
Implementing with @Matjum?
I’ll add one for Chips tonight
Amazing! didn’t think of doing like that.
One lasssst question 
How I can target the mushroom-state-info container for the song name and artist to apply white-space: normal; as the text pushes everything out the page with a long string of text.
e.g:
Looking good. Any chance you could share the full code for either your UPS or NAS chip card?
Sure thing. Here are the final results:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: NAS
secondary: 'Online since: {{ states(''sensor.synology_nas_uptime'') }}'
icon: mdi:nas
icon_color: |
{% if is_state('sensor.synology_status_volume_1', 'normal') %}
green
{% else %}
red
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.synology_average_disk_temp_volume_1
content: '{{ states(entity) }} °C'
icon: mdi:thermometer
icon_color: >
{% if states('sensor.synology_average_disk_temp_volume_1') | int > 80
%}
red
{% elif states('sensor.synology_average_disk_temp_volume_1') | int >
70 %}
orange
{% elif states('sensor.synology_average_disk_temp_volume_1') | int >
60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.synology_cpu_load_total
content: '{{ states(entity) }} %'
icon_color: |
{% if states('sensor.synology_cpu_load_total') | int > 80 %}
red
{% elif states('sensor.synology_cpu_load_total') | int > 70 %}
orange
{% elif states('sensor.synology_cpu_load_total') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
icon: mdi:cpu-64-bit
- type: template
entity: sensor.synology_memory_usage_real
content: '{{ states(entity) }} %'
icon: mdi:memory
icon_color: |
{% if states('sensor.synology_memory_usage_real') | int > 80 %}
red
{% elif states('sensor.synology_memory_usage_real') | int > 70 %}
orange
{% elif states('sensor.synology_memory_usage_real') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.synology_volume_used_volume_1
content: '{{ states(entity) }} %'
icon: mdi:harddisk
icon_color: |
{% if states('sensor.synology_volume_used_volume_1') | int > 80 %}
red
{% elif states('sensor.synology_volume_used_volume_1') | int > 70 %}
orange
{% elif states('sensor.synology_volume_used_volume_1') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
alignment: end
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: UPS
secondary: ' {{ states(''sensor.ups_status'') }}'
icon: mdi:nas
icon_color: |
{% if is_state('sensor.ups_status', 'Online') %}
green
{% else %}
red
{% endif %}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.ups_input_voltage
content: 'Input: {{ states(entity) }} V'
icon: mdi:power
icon_color: |
{% if states('sensor.ups_input_voltage') | int < 230 %}
red
{% elif states('sensor.ups_input_voltage') | int < 235 %}
orange
{% elif states('sensor.ups_input_voltage') | int > 235 %}
green
{% elif states('sensor.ups_input_voltage') | int > 242 %}
red
{% else %}
red
{% endif %}
tap_action: none
- type: template
entity: sensor.ups_output_voltage
content: 'Output: {{ states(entity) }} V'
icon: mdi:power
icon_color: |
{% if states('sensor.ups_output_voltage') | int < 230
%}
red
{% elif states('sensor.ups_output_voltage') | int < 235
%}
orange
{% elif states('sensor.ups_output_voltage') | int >
235 %}
green
{% elif states('sensor.ups_output_voltage') | int >
242 %}
red
{% else %}
red
{% endif %}
tap_action: none
- type: template
entity: sensor.ups_load
content: 'Load: {{ states(entity) }} %'
icon: mdi:weight-lifter
icon_color: |
{% if states('sensor.ups_load') | int > 80 %}
red
{% elif states('sensor.ups_load') | int > 70 %}
orange
{% elif states('sensor.ups_load') | int > 60 %}
yellow
{% else %}
green
{% endif %}
tap_action: none
- type: template
entity: sensor.ups_battery_charge
content: '{{ states(entity) }} %'
icon: |
{% if states(entity) | int < 30 %}
mdi:battery-30
{% elif states(entity) | int < 50 %}
mdi:battery-50
{% elif states(entity) | int < 70 %}
mdi:battery-70
{% elif states(entity) | int > 70 %}
mdi:battery
{% else %}
mdi:battery-alert
{% endif %}
icon_color: |
{% if states('sensor.ups_battery_charge') | int < 30 %}
red
{% elif states('sensor.ups_battery_charge') | int < 50 %}
orange
{% elif states('sensor.ups_battery_charge') | int < 70 %}
yellow
{% elif states('sensor.ups_battery_charge') | int > 70 %}
green
{% else %}
red
{% endif %}
tap_action: none
alignment: end
What I like is that I can see if there are any issues at a very quick glance based on seeing the colours, all green = all good.
That’s brilliant (and fast!), thank you.
What ups do you have? model?
super awesome again! you are just unbeliavable 
by implementing with @Matjum I meant that we are your fans and trying the animations and different options you present
wow, just wow!!!
Have been looking for some good visualization of timer-status, and then stumbled upon this goldmine 
I’m actually moving to a version of your “Room-Card” and have been looking for a way to visualize time left on timer for smart-clocks (the kids!!)
)
Anyway, apriciate you sharing ! - great work! 
Hello,
Tank you all for your commitment and kindness, here is what I ended with all your help 
Home :
There is also a lot of conditional card and dynamic layout.
I can share code if you want to, you just have to ask for it and I will be glad.
Have you all a good day.
julien
Mushroom Chip Dual Progress Bar:
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:battery-high
icon_color: purple
content: >
{{ states('sensor.rhys_phone_battery_level') | round(0) }}% Phone | {{
states('sensor.rhys_tablet_battery_level') | round(0) }}% Tablet
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-{{ config.icon_color }})) {{ states('sensor.rhys_phone_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
ha-card:after {
content: "";
position: absolute;
left: 3px;
top: 3px;
height: calc(var(--chip-height) * 0.83);
width: calc(var(--chip-height) * 0.83);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-pink)) {{ states('sensor.rhys_tablet_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
margin-right: 0.45em !important;
z-index: 1;
}
Mushroom Chip Dual Progress Bar with Picture Icon:
type: custom:mushroom-chips-card
chips:
- type: template
icon: none
content: >
{{ states('sensor.rhys_phone_battery_level') | round(0) }}% Phone | {{
states('sensor.rhys_tablet_battery_level') | round(0) }}% Tablet
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-teal)) {{ states('sensor.rhys_phone_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
ha-card:after {
content: "";
position: absolute;
left: 3px;
height: calc(var(--chip-height) * 0.83);
width: calc(var(--chip-height) * 0.83);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 63%, transparent 0%), conic-gradient(rgb(var(--rgb-light-green)) {{ states('sensor.rhys_tablet_battery_level') }}% 0%, var(--card-background-color) 0% 100%);
}
::slotted(ha-icon) {
background: url( '/local/battery2.svg' ) no-repeat center center;
background-size: 0.7em;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
z-index: 1;
}
.content {
--chip-padding: 0 0.25em 0 0;
}
The conic-gradient works in a clock-wise direction, but we can rotate of reverse it with a transform.
Mushroom Chip Progress Bar Reversed:
type: custom:mushroom-chips-card
chips:
- type: template
entity: input_number.lounge_pc_volume
icon: mdi:volume-high
icon_color: blue
content: '{{ (states(entity) | float * 100) | round(0) }}% Volume'
card_mod:
style: |
ha-card:before {
content: "";
position: absolute;
height: var(--chip-height);
width: var(--chip-height);
border-radius: 50%;
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(rgb(var(--rgb-cyan)) {{ (states(config.entity) |float * 100) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
transform: rotateY(180deg);
}
::slotted(ha-icon) {
margin-right: 0.4em !important;
}