The screenshot from the video if from an older version of Mushroom Cards. Your screenshot is from the new/current version. Use entity picture is now in the dropdown ‘Icon type’ and hide state/name are located under ‘Primary/Secondary Information’ dropdowns.
1 Like
Animations are working OK for me in Android app. What OS are you on?
For Chips you will need to use animation: instead of --icon-animation:.
Thanks, now it works 
1 Like
My take on this one:
type: custom:mushroom-chips-card
chips:
- type: template
content: |-
{{ states('sensor.current_weather') }} /
{{ states('sensor.aqara_outdoor_weather_temperature') }} °C
icon: |-
{% if is_state('weather.ort', 'sunny') %}
mdi:weather-sunny
{% elif is_state('weather.ort', 'partlycloudy') %}
mdi:weather-partly-cloudy
{% elif is_state('weather.ort', 'cloudy') %}
mdi:weather-cloudy
{% elif is_state('weather.ort', 'rainy') %}
mdi:weather-rainy
{% elif is_state('weather.ort', 'partly-rainy') %}
mdi:weather-partly-rainy
{% elif is_state('weather.ort', 'pouring') %}
mdi:weather-pouring
{% elif is_state('weather.ort', 'fog') %}
mdi:weather-fog
{% elif is_state('weather.ort', 'hail') %}
mdi:weather-hail
{% elif is_state('weather.ort', 'hazy') %}
mdi:weather-hazy
{% elif is_state('weather.ort', 'lightning') %}
mdi:weather-lightning
{% elif is_state('weather.ort', 'lightning-rainy') %}
mdi:weather-lightning-rainy
{% elif is_state('weather.ort', 'partly-lightning') %}
mdi:weather-partly-lightning
{% elif is_state('weather.ort', 'snowy') %}
mdi:weather-snowy
{% elif is_state('weather.ort', 'snowy-heavy') %}
mdi:weather-snowy-heavy
{% elif is_state('weather.ort', 'snowy-rainy') %}
mdi:weather-snowy-rainy
{% elif is_state('weather.ort', 'partly-snowy') %}
mdi:weather-partly-snowy
{% elif is_state('weather.ort', 'partly-snowy-rainy') %}
mdi:weather-partly-snowy-rainy
{% elif is_state('weather.ort', 'clear-night') %}
mdi:weather-night
{% elif is_state('weather.ort', 'night-partly-cloudy') %}
mdi:weather-night-partly-cloudy
{% endif %}
icon_color: >-
{% if is_state('weather.ort', 'sunny') %} #FFF900 {% elif
is_state('weather.ort', 'partlycloudy') %} #B3B6B7 {% elif
is_state('weather.ort', 'cloudy') %} #626567 {% elif
is_state('weather.ort', 'rainy') %} #5757BE {% elif
is_state('weather.ort', 'partly-rainy') %} #4E4DD8 {% elif
is_state('weather.ort', 'pouring') %} #2E9AFE {% elif
is_state('weather.ort', 'fog') %} #C0C0C0 {% elif
is_state('weather.ort', 'hail') %} white {% elif
is_state('weather.ort', 'hazy') %} grey {% elif
is_state('weather.ort', 'lightning') %} #D9D401 {% elif
is_state('weather.ort', 'lightning-rainy') %} #D9D401 {% elif
is_state('weather.ort', 'partly-lightning') %} #D9D401 {% elif
is_state('weather.ort', 'snowy') %} #FFFFFF {% elif
is_state('weather.ort', 'snowy-heavy') %} #FFFFFF {% elif
is_state('weather.ort', 'snowy-rainy') %} #FFFFFF {% elif
is_state('weather.ort', 'partly-snowy') %} #FFFFFF {% elif
is_state('weather.ort', 'partly-snowy-rainy') %} #FFFFFF {% elif
is_state('weather.ort', 'clear-night') %} #FFF900 {% elif
is_state('weather.ort', 'night-partly-cloudy') %} #B3B6B7 {%
endif %}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-icon {
{%- set sensor = states('weather.ort') %}
{%- if sensor == 'sunny' %}
animation: sunny 8s ease-in-out infinite alternate;
{%- elif sensor == 'partly-cloudy' %}
animation: cloudy 10s ease-in-out infinite, sun 2s infinite;
{%- elif sensor == 'cloudy' %}
animation: cloudy 10s ease-in-out infinite;
{%- elif sensor == 'rainy' %}
animation: cloudy 10s ease-in-out infinite, rain 1.5s infinite;
{%- elif sensor == 'pouring' %}
animation: cloudy 10s ease-in-out infinite, pouring 1s infinite;
{%- elif sensor == 'fog' %}
animation: cloudy 10s ease-in-out infinite, fog 4s infinite;
{%- elif sensor == 'hail' %}
animation: cloudy 10s ease-in-out infinite, hail 2s infinite;
{%- elif sensor == 'lightning' %}
animation: cloudy 10s ease-in-out infinite, lightning 4s infinite;
{%- elif sensor == 'snow' %}
animation: cloudy 10s ease-in-out infinite, snow 4s infinite;
{%- elif sensor == 'clear-night' %}
animation: moon 10s linear infinite, stars 5s linear infinite;
{%- endif %}
}
@keyframes cloudy {
0%, 100% { transform: translateX(3px); }
30% { transform: translateX(-1px); }
45% { transform: translateX(1.5px); }
75% { transform: translateX(-3.2px); }
}
@keyframes sun {
50% { clip-path: polygon(0 67%, 18% 55%, 16% 31%, 41% 12%, 67% 24%, 77% 59%, 100% 64%, 100% 100%, 0 100%); }
}
@keyframes sunny {
70% { transform: rotate(360deg) scale(1); }
80% { transform: scale(1); }
90% { transform: scale(1.15); }
100% { transform: scale(1); }
}
@keyframes rain {
50% { clip-path: polygon(0 0, 100% 0, 100% 73%, 71% 73%, 50% 39%, 29% 73%, 0 73%); }
}
@keyframes pouring {
0%, 50%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 83%, 54% 83%, 62% 47%, 47% 46%, 38% 83%, 0 83%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 70%, 75% 70%, 80% 48%, 63% 48%, 54% 94%, 32% 94%, 46% 46%, 30% 46%, 23% 72%, 0 72%); }
}
@keyframes fog {
0%, 26%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 59%, 60% 59%, 60% 74%, 100% 74%, 100% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 26% 100%, 26% 76%, 0 76%); }
}
@keyframes hail {
0%, 26%, 51%, 76%, 100% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 47% 69%, 56% 55%, 43% 43%, 31% 58%, 48% 68%, 63% 100%, 0 100%); }
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 62% 100%, 61% 86%, 74% 74%, 61% 60%, 46% 69%, 60% 87%, 63% 100%, 0 100%); }
75% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 56% 83%, 42% 68%, 27% 81%, 37% 100%, 0 100%); }
}
@keyframes lightning {
10%, 15% { clip-path: polygon(0 0, 100% 0, 100% 100%, 47% 100%, 69% 55%, 66% 40%, 48% 39%, 24% 100%, 0 100%); transform: scale(1.1); }
10.1%, 15.1% { clip-path: inset(0 0 0 0); transform: scale(1); }
}
@keyframes snow {
50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 65% 100%, 76% 73%, 57% 49%, 34% 56%, 26% 79%, 37% 100%, 0 100%); }
51% { clip-path: inset(0 0 0 0); }
}
@keyframes moon {
0%, 100% { transform: rotate(12deg); }
30% { transform: rotate(-6deg); }
45% { transform: rotate(8deg); }
75% { transform: rotate(-10deg); }
}
@keyframes stars {
0%, 3.1%, 14.1% { clip-path: inset(0 0 0 0); }
3% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 99% 62%, 68% 62%, 62% 44%, 76% 34%, 100% 34%, 99% 0%); }
14% { clip-path: polygon(1% 1%, 0% 99%, 99% 100%, 100% 25%, 51% 45%, 38% 34%, 36% 0); }
}
4 Likes
Would like this too, I would like to have some icons bigger (for example the main scene I use) just so they are easier to notice
Is there a way to permanently color an icon?
I tried the following, but the icon always remains gray:
type: custom:mushroom-entity-card
entity: script.watch_netflix
secondary_info: none
primary_info: name
tap_action:
action: call-service
service: script.watch_netflix
data: {}
target: {}
hold_action:
action: none
double_tap_action:
action: none
layout: vertical
name: Netflix
fill_container: false
icon_color: red
1 Like
You can change the Mushroom icon size globally by adding these lines to your theme:
mush-icon-size: 42px
mush-icon-symbol-size: 0.5em
Icon size is the size of the icon and shape (surrounding circle). Icon symbol size is the size of the icon on it’s own. By default it is half the size of the overall size.
You can specify it per card with the following CSS in card_mod:
card_mod:
style: |
ha-card {
--icon-size: 42px;
--icon-symbol-size: 0.5em;
}
6 Likes
Hi!
I want to try to have a template switch in a mushroom chip, but i cant get it to work. Anyone mind looking at the code?
i want to be able to toggle the smart plug on and off with a tap, but want the state to show based on power consumption.
switch:
- platform: template
switches:
blind:
friendly_name: "Heater"
unique_id: heater
value_template: >-
{% if states('sensor.smartplug_heater_2nd_floor_power') | float > 4 %}
heating
{% else %}
idle
{% endif %}
turn_on:
service: switch.toggle
target:
entity_id: switch.smartplug_heater_2nd_floor
turn_off:
service: switch.toggle
target:
entity_id: switch.smartplug_heater_2nd_floor
Thanks! That’s what I needed
1 Like
You can do it with card_mod like this:
card_mod:
style: |
ha-card {
--rgb-disabled: var(--rgb-red);
}
Try returning on / off instead of heating / idle for the value template.
Thanks!
5 Likes
Thanks!
That means i can’t get “custom” states on the template switch then? Let’s say i want it to say idle, or charging? Is there no way to achieve that? Could i rename the on/off state with card mod?
Yes, just use a Mushroom Template Chip and you can have it say anything you like.
Is it normal there is no icon for the Weather chip?
It would seem there isn’t one for exceptional.
Default HA weather card doesn’t show a proper icon for exceptional either.
What exactly is exceptional weather anyway? Seems rather subjective. Exceptional for me would be a heavy rain storm and lots of lightning.
Aah, i am very new at templating, but starting to look into it.
Do you know if there is a similar setup to what i am looking for with the mushroom template that i can play with?
Really appreciate all your help!