I just had a thought - im using the ios (red/blue) theme.
When I change to the backend default theme it looks fine but on the ios one the chip card is transparent.
That suggests the theme might be the issue. Not sure how to fix though.
Templating is only supported on the Template Card.
1 Like
I don’t think an example of this has been provided, apologies if I missed it!
Has anyone been able to get a conditional chip to display if there are any updates available in the update domain, along with displaying how many. I would rather do it across the full domain rather than naming individual updates. Thx.
Aah, thanks for clarifying that.
I’ve recreated it with a template card, and feel as though I’m almost there.
The animation works and the colour has changed to orange, but when I turn off the fan heater the animation continues & the colour stays orange, instead of changing to grey.
- type: custom:mushroom-template-card
entity: switch.fan_heater
primary: Fan Heater
secondary: >
{% if relative_time(states.switch.fan_heater.last_updated) == '0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.fan_heater.last_updated) }} ago
{% endif %}
icon: mdi:fan
layout: vertical
fill_container: true
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite;
}
style: |
mushroom-shape-icon{
--icon-color: orange !important;
--shape-color: rgba(242, 169, 59, 0.25) !important;
}
I’ve tried a few variations of the code to animate & change the colour but my knowledge with this is pretty limited 
Any idea on how to stop the animation when the heater is turned off, and also change the colour to grey when turned off? 
amazing !!!
can you share your code ?
Hello Eoin, I think I have what you are asking for, but I ended up making separate sensors that show the update/problem/backup state.
Let me know what you think and sorry for spelling mistakes.
mushroom:
- type: conditional
conditions:
- entity: sensor.update_availible
state_not: '0'
chip:
type: entity
entity: sensor.update_availible
double_tap_action:
action: none
content_info: state
icon_color: orange
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.battery_low_warning
state_not: '0'
chip:
type: entity
entity: sensor.battery_low_warning
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
icon_color: orange
content_info: state
- type: conditional
conditions:
- entity: sensor.problems_warning
state_not: '0'
chip:
type: entity
entity: sensor.problems_warning
double_tap_action:
action: none
content_info: state
tap_action:
action: navigate
navigation_path: /lovelace-XXX/default_view
hold_action:
action: none
icon_color: deep-orange
- type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
chip:
type: entity
entity: sensor.hacs
double_tap_action:
action: none
content_info: state
icon_color: orange
tap_action:
action: navigate
navigation_path: ..\hacs
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.backup_state
state_not: backed_up
chip:
type: entity
entity: sensor.backup_state
content_info: state
icon_color: deep-orange
in the config:
template:
- sensor:
- name: update_availible
state: "{{ states.update|selectattr('state','eq','on')|map(attribute='entity_id')|list|count }}"
icon: mdi:update
attributes:
entities: "{{ states.update|selectattr('state','eq','on')|map(attribute='entity_id')|list }}"
- name: battery_low_warning
state: >
{% set lista = states.sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'battery') | list %}
{% set ns = namespace(below=[]) %}
{%- for ent in lista -%}
{%- if 20 >= ent.state | int(200) | int and not ent.entity_id in ['sensor.d219a923004b1200_battery','sensor.db90e424004b1200_battery',] -%}
{% set ns.below = ns.below + [ ent.entity_id ] %}
{% endif -%}
{% endfor -%}
{{ ns.below |count}}
icon: mdi:battery-alert
attributes:
entities: >
{% set lista = states.sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'battery') | list %}
{% set ns = namespace(below=[]) %}
{%- for ent in lista -%}
{%- if 20 >= ent.state | int(200) | int and not ent.entity_id in ['sensor.d219a923004b1200_battery','sensor.db90e424004b1200_battery',] -%}
{% set ns.below = ns.below + [ ent.entity_id ] %}
{% endif -%}
{% endfor -%}
{{ ns.below | join(', ') }}
- name: problems_warning
state: "{{ states.binary_sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'problem')| selectattr('state', 'eq', 'on')| map(attribute='entity_id') | list |count }}"
icon: mdi:thermometer-alert
attributes:
entities: "{{ states.binary_sensor |rejectattr('attributes.device_class', 'undefined') | selectattr('attributes.device_class', 'eq', 'problem')| selectattr('state', 'eq', 'on')| map(attribute='entity_id') | list }}"
1 Like
That looks like exactly what I was after, thank you!
Thanks! You are the great! 
This is a solution, but it can be accomplished in many other ways:
type: custom:mushroom-template-card
entity: switch.fan_heater
primary: Fan Heater
secondary: >
{% if relative_time(states.switch.fan_heater.last_updated)
== '0 seconds' %}
Now
{% else %}
{{ relative_time(states.switch.fan_heater.last_updated) }} ago
{% endif %}
icon: mdi:fan
icon_color: |
{% if is_state('switch.fan_heater', 'on') %}
orange
{% else %}
disabled
{% endif %}
layout: vertical
fill_container: true
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: spin 1s linear infinite;' if is_state('switch.fan_heater', 'on') }}
}
1 Like
if you don’t want the template sensor, and just want a chip, you can just put the same code or similar from kann directly into a chip yml. like
type: template
content: |-
{%set update = states.update
| selectattr('state', 'eq', 'on')
| list | count %}
{% set d1 = '' if update == 1 else 's' %}
{{update}} Update{{d1}} available
icon_color: |-
{% set icon = states.update
| list | count %}
{% if icon==0 %}
grey
{% else %}
red
{% endif %}
icon: mdi:update
This gives you a chip with a count and some words…
" 0 Updates Available" or
“1 Update available” etc
edit, didn’t read the conditional bit. i see this won’t do that, building the sensor is the right path.
1 Like
Brilliant, much appreciated!
This will also enabled me to mod other cards based on this 
Hello, i’m new to the Mushroom scene and I really like it!
I’m trying to center my person entities:
This is my code:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.dimitri
fill_container: true
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
border: 0px;
}
- type: custom:mushroom-person-card
entity: person.joyce
layout: vertical
fill_container: true
icon_type: entity-picture
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
border: 0px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s906b_is_charging_2') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s906b_is_charging_2
icon: mdi:power-plug
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
- type: template
entity: sensor.sm_s906b_battery_level_2
icon: |2
{% set bl = states('sensor.sm_s906b_battery_level_2') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s906b_battery_level_2') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
alignment: center
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.iphone_van_joyce_battery_state') %}
{% if state=='Charging' or state=='Full' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_van_joyce_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
- type: template
entity: sensor.iphone_van_joyce_battery_level
icon: |2
{% set bl = states('sensor.iphone_van_joyce_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.iphone_van_joyce_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
alignment: center
Does somebody know how to do it?
How do you do that ‘ambilight’ effect? Gimme dat code.
1 Like
Hi, the code is too long to paste here. Someone knows how I can share long code?
For example thermostat card has 4000 lines.
Hi, try like this:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.dimitri
fill_container: true
layout: vertical
icon_type: entity-picture
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
border: 0px;
flex-wrap: wrap;
align-content: flex-end !important;
}
- type: custom:mushroom-person-card
entity: person.joyce
layout: vertical
fill_container: true
icon_type: entity-picture
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0);
border: 0px;
flex-wrap: wrap;
align-content: flex-start !important;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s906b_is_charging_2') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s906b_is_charging_2
icon: mdi:power-plug
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
- type: template
entity: sensor.sm_s906b_battery_level_2
icon: |2
{% set bl = states('sensor.sm_s906b_battery_level_2') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.sm_s906b_battery_level_2') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
alignment: center
card_mod:
style: |
.chip-container.align-center {
justify-content: right !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('sensor.iphone_van_joyce_battery_state') %}
{% if state=='Charging' or state=='Full' %}
green
{% elif state=='Not Charging' %}
#6f6f6f
{% endif %}
entity: sensor.iphone_van_joyce_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
- type: template
entity: sensor.iphone_van_joyce_battery_level
icon: |2
{% set bl = states('sensor.iphone_van_joyce_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline
{% elif bl < 20 %} mdi:battery-10
{% elif bl < 30 %} mdi:battery-20
{% elif bl < 40 %} mdi:battery-30
{% elif bl < 50 %} mdi:battery-40
{% elif bl < 60 %} mdi:battery-50
{% elif bl < 70 %} mdi:battery-60
{% elif bl < 80 %} mdi:battery-70
{% elif bl < 90 %} mdi:battery-80
{% elif bl < 100 %} mdi:battery-90
{% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown
{% endif %}
icon_color: |2-
{% set bl = states('sensor.iphone_van_joyce_battery_level') | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} green
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
border: 0px;
}
alignment: center
card_mod:
style: |
.chip-container.align-center {
justify-content: left !important;
}
this shloud be the result
1 Like
One more request about how to handle icon colors:
The mushroom cover card. I would like the icon to be green when the door is closed, and red when it is open. Presently it is grey when closed, and blue when open.
I’m sure that I can do this with card_mod, as with the previous solution you provided, but I tried and it didn’t seem to work.
type: custom:mushroom-cover-card
entity: cover.garage_door
card_mod:
style: |
{% if is_state('cover.garage_door', 'closed') %}
:host { --mush-rgb-state-cover: var(--rgb-green-color) }
{% else %}
:host { --mush-rgb-state-cover: var(--rgb-red-color) }
{% endif %}
I also just tried using a regular icon_color with template code, but it doesn’t look like the cover card supports that.
Thanks!!
edit: nevermind, I was able to accomplish this using a template card instead of a cover card.
2 Likes
I must say your dashboards looks fantastic.
Best way to share code would probably be a GitHub repo.
Otherwise maybe pastebin.com can work.
Still finishing up this view but essentially the card is what Rhysb already posted with a few small tweaks! I’m still working on the whole dashboard but can make a post of the whole thing once ready, if anybody is interested.
The background moves also and was ‘stolen’ from another poster here too but I can’t find their post so apologies to them.
Any improvements or cool additions will be appreciated too!
Rhysb Media Card 'Tweaked'
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.kitchen
icon: mdi:music
use_media_info: true
use_media_artwork: false
show_volume_level: false
show_icon: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
font-size: 18px;
font-weight: 200;
}
.: |
mushroom-shape-icon {
display: none;
}
ha-card {
--ha-card-border-width: 0;
--rgb-state-media-player: var(--album-art-color);
--control-icon-size: 32px;
background-color: transparent;
margin-top: 172px;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') and not is_state(config.entity, 'off') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
width: 20rem;
align-self: center;
margin: 40px 40px 28px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0));
border-radius: 30px;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
mushroom-state-item {
text-align: center;
margin-left: -10px;
}
.actions {
--rgb-primary-text-color: var(--album-art-color);
--primary-text-color: rgb(var(--album-art-color));
{% if state_attr(config.entity, 'media_duration') %}
margin-top: 55px;
{% else %}
margin-top: 20px;
{% endif %}
margin-left: 57px;
width: 80%;
align-self: center;
}
- type: conditional
conditions:
- entity: media_player.kitchen
state_not: "off"
- entity: media_player.kitchen
state_not: idle
card:
entity: media_player.kitchen
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{% if is_state(config.entity, 'playing') %}
--paper-progress-container-color: rgba(var(--album-art-color), 0.2) !important;
{% endif %}
}
.: |
ha-card {
width: 60%;
align-self: center;
margin: -98px auto auto;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--album-art-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
background-color: transparent !important;
}
- type: custom:layout-card
layout_type: grid
layout:
margin: 0
padding: 0
card_margin: 0
grid-template-columns: 50% 50%
grid-template-rows: 100px
cards:
- type: picture
view_layout:
grid-column: 1
place-self: center end
entity: media_player.kitchen
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data: !include ../popups/mediabrowser_kitchen_sonos.yaml
image: /local/images/icons/sonos.png
card_mod:
style:
$: |
:host {
width: 80px !important;
margin-top: 100px;
}
.: |
ha-card {
width: 100%;
opacity: 50%;
background-color: transparent !important;
padding-bottom: 110px;
}
ha-card:hover {
opacity: 100%;
transform: scale(1.03);
}
- type: picture
view_layout:
grid-column: 2
place-self: center start
entity: media_player.kitchen
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data: !include ../popups/mediabrowser_kitchen_spotify.yaml
image: /local/images/icons/spotify.png
card_mod:
style:
$: |
:host {
width: 60px !important;
margin-top: 100px;
}
.: |
ha-card {
width: 100%;
opacity: 50%;
background-color: transparent !important;
margin-left: 20px;
padding-bottom: 110px;
}
ha-card:hover {
opacity: 100%;
transform: scale(1.03);
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.kitchen', 'idle') and not is_state('media_player.kitchen', 'off') and not is_state('media_player.kitchen', 'paused') %}
background: url( '{{ state_attr('media_player.kitchen', "entity_picture") }}' ) center no-repeat;
animation: Gradient 20s linear 3;
{% endif %}
filter: blur(100px) saturate(200%);
background-size: 70% 70%;
}
@media (max-width: 600px) {
ha-card:before {
background-size: 60% 60%;
filter: blur(70px) saturate(200%);
}
}
@keyframes Gradient {
0% {
background-position: 0% 50%;
}
25% {
background-position: 50% 0%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 100%;
}
100% {
background-position: 0% 50%;
}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
border-radius: 30px;
overflow: visible !important;
background-color: transparent;
border: none !important;
}
@media (min-width: 1200px) {
ha-card {
margin-top: 30px;
}
}
:host {
margin-top: 50px !important;
--album-art-color:
{% if not is_state('media_player.kitchen', 'idle') and not is_state('media_player.kitchen', 'off') %}
{{ states('sensor.kitchen_media_muted_color') }}
{% else %}
var(--rgb-indigo-color)
{% endif %};
}
13 Likes
Thank you.
I spent a lot hours, days. Even weeks to build this. I am new here and all what I did is based on what I found here. I did not finished yet but I am almost there. I need to add more devices to HA.
My code probably has some not necessary lines but I am trying keep it as clean as possible.
Special thanks to @rhysb
He is CSS Language Master.
1 Like
So I used pastebin to share long code.
5 Likes