im trying your card, but does not have the content in background, im only changed with my entity your code.
can you help me? could be a problem of my tv?
Works great thanks, would you know how I can I add the device entity name to the secondary_information, and make the card collapsable with the power button in horizontal layout when device is off?
Edit: The media controls disappear when adding these two lines for some reason.
collapsible_controls: true
layout: horizontal
Also, the card doesn’t seem to work well with light theme? Everything is unreadable.
Trying to get pic to switch background images by state on and off. It works when on but no image when off. Asking for any help on this.
Heres the code.
type: custom:mushroom-template-card
primary: null
entity: input_boolean.crucial_velocity_helper
icon: null
icon_color: grey
layout: vertical
picture: null
fill_container: false
multiline_secondary: false
tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
double_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.crucial_velocity_helper
card_mod:
style:
.: |
mushroom-state-info {
text-align:;
}
ha-card {
{{ 'background: center / cover no-repeat url("/local/images/Music1.gif");' if is_state(config.entity, 'on') }}
width: 100px;
height: 100px;
margin: auto;
}
mushroom-state-item {
height: 96px;
}
mushroom-state-info$: |
.primary {
white-space: normal !important;
overflow: hidden;
}
Good evening guys, I’m building my dashboard entirely with mushrooms, in view of Christmas I wanted to know if it was possible to color the icon in this way. I’m currently using a card button, this is the code
entity: light.albero
aspect_ratio: 1/1
color: auto
name: ' '
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
styles:
img_cell:
- justify-content: center
card:
- border-radius: 20px
icon: null
name:
- justify-self: start
- font-weight: bold
- font-size: 15px
- padding-left: 15px
state:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
state:
- value: 'on'
styles:
icon:
- animation: pulse 10s infinite
extra_styles: |
@keyframes pulse {
0% {
-moz-filter: contrast(96%) linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%;);
filter: contrast(96%) linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 154, 0, 1) 10%, rgba(208, 222, 33, 1) 20%, rgba(79, 220, 74, 1) 30%,
rgba(63, 218, 216, 1) 40%,
rgba(47, 201, 226, 1) 50%,
rgba(28, 127, 238, 1) 60%,
rgba(95, 21, 242, 1) 70%,
rgba(186, 12, 248, 1) 80%,
rgba(251, 7, 217, 1) 90%,
rgba(255, 0, 0, 1) 100%;);
}
10% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #0800ff);
filter: contrast(96%) drop-shadow(3px 3px 15px #0800ff);
}
20% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #fff800);
filter: contrast(96%) drop-shadow(3px 3px 15px #fff800);
}
30% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #ffbb00);
filter: contrast(96%) drop-shadow(3px 3px 15px #ffbb00);
}
40% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 10px #00edff);
filter: contrast(96%) drop-shadow(3px 3px 15px #00edff);
}
50% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #ff00f2);
filter: contrast(96%) drop-shadow(3px 3px 15px #ff00f2);
}
60% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFFF00);
filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
}
70% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #00FF00);
filter: contrast(96%) drop-shadow(3px 3px 15px #00FF00);
}
80% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #FFFF00);
filter: contrast(96%) drop-shadow(3px 3px 15px #FFFF00);
}
90% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #5200ff);
filter: contrast(96%) drop-shadow(3px 3px 15px #5200ff);
}
100% {
-moz-filter: contrast(96%) drop-shadow(3px 3px 5px #ff0000);
filter: contrast(96%) drop-shadow(3px 3px 15px #ff0000);
}
show_state: false
type: custom:button-card
I had a request to make smaller climate controls, so i did these ones in pastel.
These ones can go as small as 140px, but if you want bigger use the other card.
features:
- type: climate-hvac-modes
hvac_modes:
- 'off'
- heat
- cool
type: tile
entity: climate.bedroom_aircon
hide_state: false
tap_action:
action: toggle
icon: none
vertical: false
state_content: state
name: ' '
card_mod:
style:
ha-tile-icon$: |
.shape {
--tile-icon-color: none !important;
}
ha-tile-info$: |
.primary {
font-family: Montserrat;
font-size: 1.4em !important;
font-weight: 600 !important;
line-height: 2em !important;
margin-left:-50px !important;
text-align: start;
}
.primary:after {
content:'{{ state_attr('climate.bedroom_aircon','temperature') }}°C';
text-transform: Uppercase;
}
.secondary {
font-family: Montserrat;
font-size: 1.2em !important;
color: {% if is_state('climate.bedroom_aircon', 'off') %} var(--contrast8) {% else %} var(--contrast60) {% endif %} !important;
line-height: 1.5em !important;
margin-left:-50px !important;
text-transform: Uppercase;
text-align: start;
}
.: |
ha-card {
--ha-card-border-width: 0;
background: {% if is_state('climate.bedroom_aircon', 'cool') %}
#579ce2
{% elif is_state('climate.bedroom_aircon', 'heat') %}
#F29472
{% endif %};
padding-bottom:5px;
height: 140px !important;
width: 140px;
box-shadow: none;
}
5 Likes
Hello everybody,
I want change the slider-bg-color if the states of cover changes to closed
Thanks
Quinquelhas
mode: horizontal
style: |
ha-card {
width: 360px;
border: none;
background-color: #E2E2E2;
box-shadow: 2px 2px 4px 0px rgba(89,89,89,1);
}
cards:
- type: custom:mushroom-cover-card
entity: cover.shellyswitch25_68c63af92742
show_tilt_position_control: false
show_position_control: true
name: Estores
show_buttons_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
--slider-bg-color: white !important;
--slider-color: #FEBF50 !important;
}
mushroom-shape-icon$: |
.shape {
--icon-color: #838281 !important;
--shape-color: #FEBF50 !important;
}
mushroom-cover-buttons-control$:
mushroom-button:nth-child(1):
$: |
ha-icon {
--card-mod-icon-color: #FF9800;
}
.button {
background: white !important;
}
mushroom-button:nth-child(2):
$: |
ha-icon {
--card-mod-icon-color: #FF9800;
}
.button {
background: white !important;
}
mushroom-button:nth-child(3):
$: |
ha-icon {
--card-mod-icon-color: #FF9800;
}
.button {
background: white !important;
}
mushroom-button$: |
ha-icon {
--card-mod-icon-color: #FF9800;
}
.button {
background: white !important;
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 15px;
--card-secondary-font-size: 15px;
--primary-text-color: #FF9800;
--secondary-text-color: #008CB6;
font-family: Copperplate;
}
sytle: |
ha-card {
border: none;
}
hi guys, I’m trying to figure out how to make the fan icon rotating. if I put this animation to the specific conditional card, will rotate the fan and the number together.
i will paste my code, thank you in advantage if someone can help me.
what I would do:
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: null
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: weather
entity: weather.casa_ventura
show_conditions: false
show_temperature: true
double_tap_action:
action: none
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.assorbimento_casa
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: energia
hold_action:
action: none
icon: mdi:home-lightning-bolt-outline
icon_color: ''
content: '{{ int(states("sensor.assorbimento_casa")) }} W'
- type: conditional
conditions:
- entity: input_boolean.modalita_natale
state: 'on'
- entity: light.divano
state: 'on'
chip:
type: template
entity: light.divano
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: luci-interne
icon_color: green
icon: mdi:pine-tree
- type: conditional
conditions:
- entity: cover.gruppo_cover_all
state: open
chip:
type: template
double_tap_action:
action: none
icon: mdi:window-shutter-alert
icon_color: ''
hold_action:
action: toggle
tap_action:
action: navigate
navigation_path: tapparelle
content: '{{ states("sensor.number_cover_open") }}'
entity: cover.gruppo_cover_all
- type: conditional
conditions:
- entity: binary_sensor.contact_cancelletto_contact
state: 'on'
chip:
type: template
icon: mdi:door-open
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_cancelletto_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_cancelletto_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: binary_sensor.contact_portone_contact
state: 'on'
chip:
type: template
icon: mdi:gate-alert
icon_color: '#D70D0D'
tap_action:
action: navigate
navigation_path: telecamere
hold_action:
action: none
double_tap_action:
action: none
entity: binary_sensor.contact_portone_contact
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
animation: {% if is_state('binary_sensor.contact_portone_contact', 'on') %} blink 1s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0.2;}
}
- type: conditional
conditions:
- entity: light.gruppo_luci_interno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_interno
icon: mdi:lightbulb
icon_color: amber
content: '{{ states("sensor.number_indoor_lights_on") }}'
tap_action:
action: navigate
navigation_path: luci-interne
hold_action:
action: toggle
double_tap_action:
action: none
- type: conditional
conditions:
- entity: light.gruppo_luci_esterno
state: 'on'
chip:
type: template
entity: light.gruppo_luci_esterno
icon_color: amber
icon: mdi:coach-lamp-variant
tap_action:
action: navigate
navigation_path: luci-esterne
hold_action:
action: toggle
content: '{{ states("sensor.number_outdoor_lights_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.gruppo_termosifoni_all
state: 'on'
chip:
type: template
entity: switch.gruppo_termosifoni_all
icon_color: red
icon: mdi:radiator
tap_action:
action: toggle
hold_action:
action: none
content: '{{ states("sensor.number_heater_on") }}'
double_tap_action:
action: none
- type: conditional
conditions:
- entity: climate.group_all
state_not: 'off'
chip:
type: template
entity: climate.group_all
tap_action:
action: navigate
navigation_path: condizionatori
hold_action:
action: toggle
double_tap_action:
action: none
icon: mdi:fan
icon_color: blue-grey
content: '{{ states("sensor.number_climate_on") }}'
card_mod:
style:
div:
mushroom-conditional-chip:nth-child(10) mushroom-template-chip:
$: |
mushroom-chip ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
this card pleas: Mushroom Cards - Build a beautiful dashboard easily 
- Share your Projects! - Home Assistant Community (home-assistant.io)
I’m trying to animate an icon but I can’t seem to get it working, does any one knows why?
entity: input_boolean.maquina_lavar_anim
icon: mdi:dishwasher
layout: vertical
type: custom:mushroom-entity-card
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
hi, can someone me tell me what we do wrong?
i think that we have the good code, the wash machine card mode code its work,
card_mod: null
style: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;' if states('sensor.wasmachine_watt') | float > 5 }}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
but the code on miy dryer not and the micro wave whats is not good?
this is code microwave
card_mod:
style: |
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 25%;
margin: 10%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(90deg, white 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(90deg, transparent 0%, white 50%, transparent 100%); }
66% { background: linear-gradient(90deg, transparent 0%, transparent 50%, white 100%); }
}
thank you voor you help
and this is dryer and we have change, but not work
- type: custom:mushroom-template-card
primary: Droger
secondary: |2
{{ states("sensor.droger_watt") }} watt |
{{ states("sensor.droger_kwh_per_dag") }} kwh
icon: >-
{{ 'mdi:tumble-dryer'if states('sensor.droger_watt') | float(0) >
5 else 'mdi:tumble-dryer' }}
layout: vertical
icon_color: |-
{% if states("sensor.droger_watt") | float(0) > 5 %}
green
{% endif %}
tap_action:
action: more-info
entity: input_boolean.droger
double_tap_action:
action: null
card_mod:
style: |
ha-state-icon {
{{'animation: shake 400ms ease-in-out infinite, drum 1s infinite;' if states('sensor.droger_watt') | float > 4 }}
transform-origin: 50% 65%;
}
@keyframes shake {
0%, 100% { transform: rotate(4deg); }
50% { transform: rotate(-4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
Something like this?
Not by default. Requires card mod:
type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: mdi:pine-tree-variant-outline
card_mod:
style: |
ha-card {
width: fit-content;
}
ha-state-icon {
--icon-symbol-size: 30px;
animation: ping 2s ease-in-out infinite;
}
@keyframes ping {
0%, 100% {filter: drop-shadow(0px 0px 10px rgba(var(--rgb-green), 1));}
33% {filter: drop-shadow(0px 0px 10px rgba(var(--rgb-red), 1));}
66% {filter: drop-shadow(0px 0px 10px rgba(var(--rgb-amber), 1));}
}
1 Like
This should work.
mushroom-slider {
{% if states('cover.yourcover') == 'on' %}
--slider-bg-color: white !important;
{% else %}
--slider-bg-color: blue !important;
{% endif %}
}
1 Like
Try like this:
card_mod:
style:
mushroom-conditional-chip:nth-child(11):
mushroom-template-chip$: |
ha-state-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
--ha-card-border-width: 0;
}
Looks very nice. Will U share your dashboard code ?
nothing change… the fan icon stay stuck in his position, no animation… 
Look at the updated animations. How animations are applied changed early in the year.
1 Like
Do you have card mod installed from HACS? And can you show me where you put the code please?
Has anyone been able to mimic Hue app light card, or something like the Bubble card?
@rhysb
Basically I have setup a reminder which reminds me after 30 days. The yellow circular progress-bar works and the days left are updated accordingly.
How can I have a badge showing 17 in it using mushroom-template-card?
Something like the below mushroom-template-card (they are photoshopped)
Kindly guide.
Show the code for what you already have please.