Hello. Hoping someone can help. Iām trying to add a Mushroom Person Card. In all the videos I watch there are features in the videos that I donāt have.
For example, I donāt have the option to āUse entity pictureā
Also, I donāt have the option for āHide stateā or āHide nameā.
Thanks for any help.
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.
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 
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); }
}
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
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;
}
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
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!
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.