where is that card coming from?
Indentation is wrong.
type: custom:stack-in-card
cards:
- type: grid
square: false
cards:
- …
1 Like
It’s the new tabbed-card 
You can do this in the “Raw configurator editor”. You can open it via three dots menu while editing dashboard.
yeah found it in Hacs
You mind sharing - looks simple and awesome!
Hi thank your for sharing your code.
i tried to add this to my card including the animations that you recently provided. But somehow the animations don’t work. can you please tell me where i have to make changes in code ?
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.smart_ac_control_wr2991201792
hvac_modes:
- heat
- cool
- fan_only
show_temperature_control: true
layout: horizontal
name: Schlafzimmer Klima
icon: mdi:air-conditioner
double_tap_action:
action: more-info
- type: custom:stack-in-card
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_temperature
primary_info: state
secondary_info: name
name: Temperature
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.wohnzimmer_humidity
primary_info: state
secondary_info: name
name: Humidity
icon_color: blue
- type: custom:mini-graph-card
entities:
- entity: sensor.wohnzimmer_temperature
name: Temperature
color: '#00bb33'
- entity: sensor.wohnzimmer_humidity
name: Humidity
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}
12 Likes
You can reverse the Mushroom Card like this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: red
card_mod:
style:
mushroom-state-info$: |
.container {
transform: scaleX(-1);
text-align: right;
}
.: |
ha-card {
transform: scaleX(-1);
transition: 0s;
}
7 Likes
Is there a way to animate the icon in a mushroom-chips-card?
Sorry, couldn’t find the solution scrolling through the whole thread.
My code (thats’ currently not working):
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.solar_poweractueel
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 99%, 0% 99%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
You can place a border around the Mushroom Title Card like this:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: 🍄 Mushrooms
alignment: center
card_mod:
style: |
mushroom-title-card {
display: block;
border-radius: 14px;
border: solid rgba(var(--rgb-green), 0.5);
--title-padding: 14px;
}
5 Likes
Hi,
Try this animation: rays 2s infinite; instead of your code --icon-animation: rays 2s infinite;
Best regards
Thekholm
1 Like
I went through the previous posts and saw that animation works when the code is placed below the mushroom card and not stack in card. I changed in that way and it worked.
It would need to be applied to the Chips like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.solar_poweractueel
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
animation: rays 2s infinite;
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
2 Likes
Yes, added one for you:
1 Like
You can change the various aspects of the Mushroom Card, primary and secondary text, like this:
type: custom:mushroom-template-card
primary: Mushrooms
secondary: 42 Grown
icon: mdi:mushroom
icon_color: red
card_mod:
style: |
ha-card {
--card-primary-font-size: 14px;
--card-primary-font-weight: bold;
--primary-text-color: rgb(var(--rgb-blue));
--card-secondary-font-size: 20px;
--card-secondary-font-weight: bolder;
--secondary-text-color: rgb(var(--rgb-green));
}
10 Likes
With the last updates now the border appears on this card (temperature, humidity entity etc)
how can i change it ?
Are you running core-2022.11 beta?
No currently im on 2022.10.4