You got the full working code for this, it looks awesome.
I did, but its missing the top. Did you find a way to get rid of the icon circle?
Hello all. I need some help with card mod. I would like to remove / change the white-space: nowrap; element on the Entity Card when they are in a grid so that long text is not limited to one line. I have found the setting in the .primary element but for the life of me I can not get it to change. Plus when i change it in Firefox inspect it changes all Mushroom Entity Cards in the grid. Thanks for any info.
Hi @rhysb ,
Iām trying to get this working for a template card where I want the icon to wobble instead of the whole card (your example fit into above example). Somehow it doesnāt work. Can you see whatās missing, or is wobbling not a feature for a mushroom-shape-icon ?
card_mod: null
style: |
{% set state=states('binary_sensor.drying_machine') %}
{% if state == 'on' %}
mushroom-shape-icon {
animation: wobbling 1s linear infinite alternate;
animation-duration: 0.1s;
{%- else -%}
animation-duration: 0.0s;
{%- endif %}
}
@keyframes wobbling {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
}
entity: binary_sensor.drying_machine
fill_container: false
icon: mdi:tumble-dryer
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''green'' }}'
layout: vertical
multiline_secondary: false
primary: Droog
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
tap_action:
action: more-info
type: custom:mushroom-template-card
Thanks a lot in advance !
Kr,
Bart
I made some history stats entities for tracking the time I spent at home or away.
Time are being showed in a translated state like 36,24 is shown as 36,78.
But when I use the UI entities it is shown correctly such as :
Is there a way to display time based entites like that in Mushroom ?
My lights are RGBWW. So for color it use RGB for kelvin (color_temp) it use color_temp and leave the RGB part alone.
Try this:
entity: binary_sensor.drying_machine
fill_container: false
icon: mdi:tumble-dryer
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''green'' }}'
layout: vertical
multiline_secondary: false
primary: Droog
secondary: '{{ ''On'' if is_state(entity, ''on'') else ''Off'' }} '
tap_action:
action: more-info
type: custom:mushroom-template-card
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{% set state = states(config.entity) %}
{% if state == 'on' %}
--icon-animation: wobbling 0.1s ease-in-out infinite alternate;
{% endif %}
}
@keyframes wobbling {
0% {
transform: rotate(-5deg);
}
100% {
transform: rotate(5deg);
}
}
.: |
ha-card {
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
}
1 Like
Sorry, donāt have any such lights to test with.
So, figured how to individually reference Chips.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:cookie
icon_color: brown
content: 1 Cookie
- type: template
icon: mdi:cookie
icon_color: brown
content: 2 Cookies
- type: template
icon: mdi:cookie
icon_color: brown
content: 3 Cookies
card_mod:
style:
mushroom-template-chip:nth-child(3)$: |
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
100% {
transform: rotate(360deg);
}
}
Just change the number in nth-child(n) for the appropriate Chip.
14 Likes
Be careful when you use card_mod. I will not bring card_mod retro-compatibility accros updates. A code refactoring can break your all dashboard 
Styling using ha-card and mushroom css variables is safe but styling using nested selector is unsafe with updates.
I think you should use button-card if you want better customization 
1 Like
Thanks rhysb! with the above code I was able to work out my wrap issue too. 
type: grid
cards:
- type: custom:mushroom-entity-card
entity: switch.front_living_room_watch_fetch_tv
fill_container: true
layout: vertical
card_mod:
style:
mushroom-state-info:
$: |
.primary {
white-space: normal !important;
}
Thank-you Thank-you. Thank-you.
It was driving me crazy for 3 weeks now. lol.
1 Like
Been trying to change font size on āchipsā is that even possible?
Thanks!
Youāre my hero !!! works like a charm !
Is there any way to have larger ICONS ?
1 Like
Yep, like this.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:elephant
content: Jumbo Size
icon_color: grey
card_mod:
style: |
ha-card {
--chip-font-weight: normal;
--chip-font-size: 20px;
}
2 Likes
Sure, like this.
type: custom:mushroom-template-card
primary: Jumbo
secondary: ''
icon: mdi:elephant
icon_color: grey
card_mod:
style: |
:host {
--mush-icon-size: 300px;
}
1 Like
For some reason I canāt get the snowflake to rotate when itās running. Do you know what I am doing wrong?
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Daniels
secondary: |
Currently: {{ state_attr('climate.daniel_s', 'hvac_action') }}
icon: |-
{% set mode = states('climate.daniel_s') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.daniel_s','hvac_action') %}
{% if status == 'idle' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
card_mod:
styles: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--icon-box-shadow: 0px 0px;
animation: rotation linear infinite;
{%- set status = state_attr('climate.daniel_s','hvac_action') %}
{%- if status == 'cooling' or status == 'heating' %}
animation-duration: 3s;
{%- endif %}
}
entity: climate.daniel_s
tap_action:
action: more-info
Thereās more to the card than the code I posted, I only posted the relevant bit as the rest was unecessary for the post.
1 Like
Try something like this:
ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
Donāt get me wrongā¦ i very much like all the things we are doing with/to the mushroom cards butā¦
Arenāt we moving far far away from itās intention? My understanding of mushroom cards was to be able to build a ābeautiful dashboard easilyā. With all the added code and add-ons (stack-card, card mod) arenāt we at risk of (re)creating UI Lovelace minimalist and in the end have so much overlap we can get rid of one?
7 Likes