How did you do that with that DSM version in DiskStation Manager entity item?
Tried several things but canāt get the current version to be displayed.
Maybe you can post complete code?
Hello everyone,
First of all, many thanks for all the ideas and help in this topic, itās really great.
Iāve read just about every topic about Mushroom Chips Card animations.
But Iām stuck on a configuration that I canāt solve.
I can apply the animation to the first chip but not to the second.
Could someone tell me where the error is in my code?
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.garbage
state_not: Inconnu
chip:
type: template
entity: sensor.garbage
content: |-
{% if is_state('sensor.garbage', 'Encombrant') %}
Encombrant
{% elif is_state('sensor.garbage', 'Poubelle Verte') %}
Poubelle verte/marron
{% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
Poubelle jaune
{% else %}
Pas de poubelle
{% endif %}
icon: |-
{% if is_state('sensor.garbage', 'Encombrant') %}
fas:recycle
{% elif is_state('sensor.garbage', 'Poubelle Verte') %}
ios:trash-fill
{% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
ios:trash-fill
{% else %}
ios:trash-slash-fill
{% endif %}
icon_color: |-
{% if is_state('sensor.garbage', 'Encombrant') %}
#4682B4
{% elif is_state('sensor.garbage', 'Poubelle Verte') %}
#228B22
{% elif is_state('sensor.garbage', 'Poubelle Jaune') %}
#FFD700
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card{
--chip-background: rgba(66,65,77, 0.50);
}
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: sensor.308_charging_mode
state: 'No'
chip:
type: template
entity: sensor.308_charging_mode
icon: ios:bolt-car-fill
content: |-
{% if is_state('sensor.308_charging_mode', 'Slow') %}
Reste {{ states('sensor.308_charging_remaining_time')}}
{% elif is_state('sensor.308_charging_mode', 'Quick') %}
Reste {{ states('sensor.308_charging_remaining_time')}}
{% else %}
DƩconnectƩe
{% endif %}
double_tap_action:
action: none
icon_color: |-
{% if is_state('sensor.308_charging_mode', 'Slow') %}
#228B22
{% elif is_state('sensor.308_charging_mode', 'Quick') %}
#FF8C00
{% else %}
grey
{% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card{
--chip-background: rgba(66,65,77, 0.50);
}
alignment: left
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
mushroom-template-chip:nth-child(2)$: |
ha-state-icon {
animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
.: |
ha-card {
--chip-spacing: 0.5em;
}
Many thanks in advance
Have a read of my guide here:
But to make it easy, because you are using conditional chips you need to specify that first. as per the below.
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
mushroom-conditional-chip:nth-child(2):
mushroom-template-chip$: |
ha-state-icon {
animation: surprise 3s ease infinite;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-6px) rotate(-14deg); }
5% { transform: translateY(-6px) rotate(11deg); }
7.5% { transform: translateY(-6px) rotate(-8deg); }
10% { transform: translateY(-6px) rotate(5deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-3px) }
}
.: |
ha-card {
--chip-spacing: 0.5em;
}
Thanks a lot, I missed that part, sorry 
No need for apology, sometimes all you need is a fresh pair of eyes after 2 hours of smashing your head into the wall trying to fix an issue 
2 Likes
Hey Guys i need help.
I created a mushroom template card in a conditional card. I want to change the size but it doesnāt work.
If I created the card without the conditinal card it worked.
Where is my mistake?
type: conditional
conditions:
- entity: switch.fahrender_ritter
state: 'on'
card:
type: custom:mushroom-template-card
primary: ''
icon: |-
{% if is_state('switch.fahrender_ritter','on') -%}
mdi:bus
{%- else -%}
mdi:bus-stop
{%- endif %}
icon_color: |-
{% if is_state('switch.fahrender_ritter','on') -%}
purple
{%- else -%}
disabled
{%- endif %}
tap_action:
action: toggle
layout: horizontal
secondary: ''
entity: switch.fahrender_ritter
picture: ''
multiline_secondary: false
fill_container: true
card_mod:
style:
.: |
:host {
--mush-icon-size: 45px;
height: 50px !important;
width: px;
}
ha-state-icon {
{% if is_state('switch.fahrender_ritter', 'on') %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes beat {
25% { transform: scale(1); }
50% { transform: scale(1.1); }
50% { transform: scale(1.1); }
25% { transform: scale(1); }
}
Try like this:
card_mod:
style: |
:host {
--mush-icon-size: 45px;
}
ha-card {
height: 60px !important;
width: px;
}
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: beat 1.3s ease-out infinite both;
{% else %}
{% endif %}
}
@keyframes beat {
25% { transform: scale(1); }
50% { transform: scale(1.1); }
50% { transform: scale(1.1); }
25% { transform: scale(1); }
}
Specificity is important in CSS. Try to use :host as little as possible. Better to drill down to the element you actually want to style.
1 Like
The Synology DSM intergration includes an Update entity.
Here is the code:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Synology NAS
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: DiskStation Manager
secondary: |-
{% if is_state(entity, 'off') %}
{{ state_attr('update.braavos_dsm_update', 'installed_version') | replace('DSM','') | replace(' Update ','.') }}
{% else %}
{{ state_attr('update.braavos_dsm_update', 'latest_version') | replace('DSM','') | replace(' Update ','.') }}
{% endif %}
icon: mdi:nas
entity: update.braavos_dsm_update
icon_color: blue
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
badge_icon: '{{ ''mdi:check-bold'' if is_state(entity, ''off'') else ''mdi:help'' }}'
badge_color: '{{ ''green'' if is_state(entity, ''off'') else ''orange'' }}'
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: button.braavos_reboot
icon_color: white
icon: mdi:restart
content_info: none
tap_action:
action: toggle
confirmation:
text: Are you sure you want Restart?
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
- type: entity
entity: button.braavos_shutdown
icon_color: white
icon: mdi:power
content_info: none
tap_action:
action: toggle
confirmation:
text: Are you sure you want Shutdown?
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-primary-text-color), 0.05);
--chip-border-width: 0;
--icon-color: rgb(var(--rgb-white));
}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
top: 16px;
width: -webkit-fill-available;
right: 12px;
position: absolute;
}
.chip-container {
right: 0px;
position: absolute;
}
1 Like
Thank you, thatās work!
Hello everyone,
I would like to display the air pressure level as a pie chart:
Code:
type: custom:mushroom-template-card
primary: Kompressor
secondary: |-
{% if is_state('switch.kompressor','on') %}
{{states('sensor.kompressor_power') | round (0)}} W
{% endif %}
icon: mdi:gas-cylinder
icon_color: |
{% if is_state('switch.kompressor','on') %}
blue
{% endif %}
entity: switch.kompressor
tap_action:
action: toggle
layout: horizontal
multiline_secondary: false
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states('sensor.druck_to_percentage') }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
in my overview of the garage:
Code:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage
secondary: >-
{{states('sensor.garage_temp_temperature') | round (1)}}Ā°C |
{{states('sensor.garage_temp_humidity') | round (0)}}%
icon: |-
{% if is_state('binary_sensor.garagentorkontakt_contact','on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
icon_color: |-
{% if is_state('light.garage_licht','on') %}
orange
{% endif %}
badge_color: red
badge_icon: |-
{% if is_state('binary_sensor.garagetorturkontakt_contact','on') %}
mdi:door-open
{% endif %}
entity: light.garage_licht
tap_action:
action: navigate
navigation_path: /lovelace-newhome/Garage
hold_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
ha-card {
z-index: 1;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.garage_temp_temperature
color: '#ff33ff'
y_axis: secondary
height: 60
hours_to_show: 24
points_per_hour: 4
line_width: 5
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
labels: false
labels_secondary: false
points: false
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
left: 3px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
card_mod:
style: |
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
Unfortunately I canāt do that because of the Mini Graph. Can you help me?
Try like this:
Replace with your own sensors. FYI not called a pie chart. Its a radial bar.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Garage
secondary: >-
{{states('sensor.outside_temperature') | round (1)}}Ā°C |
{{states('sensor.outside_humidity') | round (0)}}%
icon: |-
{% if is_state('binary_sensor.bedroom_wardrobe_left_contact','on') %}
mdi:garage-open-variant
{% else %}
mdi:garage-variant
{% endif %}
icon_color: |-
{% if is_state('light.bed_light','on') %}
orange
{% endif %}
badge_color: red
badge_icon: |-
{% if is_state('binary_sensor.bedroom_wardrobe_left_contact','on') %}
mdi:door-open
{% endif %}
entity: light.garage_licht
tap_action:
action: navigate
navigation_path: /lovelace-newhome/Garage
hold_action:
action: toggle
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states('sensor.downstairs_bathroom_temperature_humidity_pressure') }}% 0%,
var(--card-background-color) 0% 100%);
z-index: 1;
}
.shape:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
- type: custom:mini-graph-card
entities:
- entity: sensor.processor_temperature
color: '#ff33ff'
y_axis: secondary
height: 60
hours_to_show: 24
points_per_hour: 4
line_width: 5
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
labels: false
labels_secondary: false
points: false
card_mod:
style: |
ha-card {
position: absolute !important;
height: 100%;
width: 100%;
top: 0px;
left: 3px;
--ha-card-border-width: 0;
}
ha-card:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(to right, var(--card-background-color) 20%, transparent);
}
card_mod:
style: |
ha-card:active {
transform: translateY(1.5px);
transition: 0s;
box-shadow: 0 0.5px 2px 0 rgba(0, 0, 0, 0.16);
}
Thanks!
My English is probably not the best.
Is it possible to color only the radial bar depending on the state of the compressor?
Yes. Like this:
Replace with your own binary sensor or other device.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
{% if states('binary_sensor.yourdevice') == 'on' %}
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states('sensor.downstairs_bathroom_temperature_humidity_pressure') }}% 0%,
var(--card-background-color) 0% 100%);
{% endif %}
z-index: 1;
}
.shape:after {
content: '';
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
Thanks, works great!
1 Like
hi rhysb, how we can add circular indicator in the icon of your card such as:
background: radial-gradient(var(--card-background-color) 66%, transparent 0%), conic-gradient(rgb(var(--rgb-orange)) {{ states(config.entity) }}% 0%, var(--card-background-color) 0% 100%);
Iāve asked that before, but I am still getting some sort of issues with the code you post, even with UI Minimalist installed.
What should I look into not the specific case below but in general?
Last question.
Which entity did you use for health?
I do see the binary for security status but non for health?
In this case doesnt look like the issue is theme. You have a badge that doesnt have its z-index set so the badge is behind the graph.
Try and add this.
.: |
mushroom-state-info {
z-index: 1;
}
mushroom-badge-icon {
z-index: 1;
}
I notice that i missed the badge existing in my first response. Ill update my initial response to include it
1 Like
Thank you!
1 Like
I have a idea about something but before trying to create what i have in mind I would like to know if it is even possible with Mushroom cards?
Basscily itās a normal card with all the bells and whissles but with a vertical bar next to it that can be used as a slider to set level or in worst case indicate the current level?
/edit:
Looks like i found my answer in the Bar card topic using stack-in-card + card-mod or the layout card it should be doableā¦
Can someone confirm?