If you still have issues, just post the code. I’ll take a look.
can you share the code of one of them? 
Anyone using the new sections (experimental) layout with mushroom cards?
Seems mostly OK but with a chips card, I get this extra padding/space under the chips card elements. Works OK in a vertical (layout-card) view type but seems to just show up in the sections layout. When I hover over the chips card, the border is drawn around the space too so looks like it’s the styling within the chips card not working quite right with sections.I’ve tried playing with card-mod borders and padding but not managed to get rid of the space so far. Any thoughts?
2 Likes
I didn’t find a solution either. There seems to be a minimum height on a card based on what I see…
I can reduce the space up, but not down.
Yes that would seem to make sense.
Guys, there is one issue that I have not yet been able to resolve with Jay @LiQuid_cOOled, I was just wondering if maybe someone has encountered something similar and has already solved this emerging artifact during animation in a mobile companion.
We are talking about shape pulsating animation, if shape pulsating animation is turned on (it doesn’t matter with or without icon animation), a blinking radius square appears around the icon from time to time.
Has anyone encountered something similar?
It’s happens only in mobile companion, in desktop all works fine.
Tile card from HA core changes its color slightly when you move the cursor over it.
How to achieve the same effect for Mushroom cards?
type: custom:mushroom-template-card
primary: Hover Color
secondary: example
icon: mdi:home
card_mod:
style: |
ha-card:hover {
background-color: rgba(255,0,0, 0.1);
}
8 Likes
I’m happy with this stack in a card but some recent change to HA has resulted in a line across the mushroom entity card.
Here is the yaml for the card. I think I need to change something relating to the card_mod style for the mushroom entity card but I am not sure how to fix this.
Thanks for any assistance!
type: custom:stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.linktap_tap_front_battery
icon: mdi:battery-charging
icon_color: >-
{% if states ('sensor.linktap_tap_front_battery') | int(0) < 30 %}
red {% elif states ('sensor.linktap_tap_front_battery') | int(0) < 50
%} orange {% else %} green {% endif %}
content: '{{ states (''sensor.linktap_tap_front_battery'') }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
- type: template
entity: sensor.linktap_tap_front_signal
icon: mdi:wifi
icon_color: >-
{% if states ('sensor.linktap_tap_front_signal') | int < 30 %} red
{% elif states ('sensor.linktap_tap_front_signal') | int < 50 %}
orange {% else %} green {% endif %}
content: '{{ states ("sensor.linktap_tap_front_signal") }}%'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
alignment: justify
card_mod:
style: |
ha-card {
position: absolute;
top: 5px;
right: 15px;
width: 60px;
--chip-spacing: -12px;
--chip-background: none;
}
Just add card_mod to your first entity-card:
- type: custom:mushroom-entity-card
entity: switch.linktap_tap_front
name: Front
fill_container: true
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
}
1 Like
Thank you.
At random, I found out that the problem occurs due to my following card settings:
:host {
--icon-size: 64px !important;
perspective: 900px;
}
Namely because of the size of the icon. Default icon size is animated without this square artifact. Does anyone have any ideas on how this issue can be resolved?
Hello, I need your help, on the standard fan card that comes on top, the fan rotation speed on the icon works depending on the speed of the physical fan. And in the code below, the fan icon rotates at a constant, maximum speed, regardless of the actual fan speed. How can I make the icon in the lower code also change the rotation speed depending on the speed of the real fan?
type: custom:mushroom-fan-card
entity: fan.esphome_web_a345e4_pwm_fan
icon_animation: true
show_percentage_control: false
show_oscillate_control: false
collapsible_controls: false
fill_container: true
type: custom:mushroom-template-card
primary: Spin
entity: fan.ventilation_pwm_fan1
icon: mdi:fan
icon_color: red
card_mod:
style: |
ha-state-icon {
{% if is_state(config.entity, 'on') %}
animation: rotate .5s infinite linear}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-359deg);
}
}
{% endif %}
I know this is a very minor cosmetic issue but after removing the line, I notice the main entity card is a little wider than normal and not quite centred. Does anyone know what is causing this and how can it be fixed?
One option is to make the stack-in-card tighter/smaller so the entity card is not stretched.
The other is to align the entity card content to the middle so that it looks centred.
This will adjust the fan based on the speed percentage. The speeds are based on a 6 step fan so the code may need adjusted.
type: custom:mushroom-template-card
entity: fan.bedroom_fan
icon: mdi:fan
card_mod:
style: |
ha-state-icon {
animation:
{% if states(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set speed =
'rotation infinite linear' %}
{% if perc == 0 %} 0s {{speed}}
{% elif perc <= 15 %} 3s {{speed}}
{%- elif perc <= 33 %} 2.5s {{speed}}
{%- elif perc <= 50 %} 2s {{speed}}
{%- elif perc <= 67 %} 1.5s {{ speed}}
{%- elif perc <= 83 %} .75s {{ speed}}
{%- else %} 0.5s {{speed}}
{% endif %}
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
Please post the code for an expedited solution.
It works thanks!!!
Only there is a problem when I turn off the fan it continues to be active and rotate.
So my percentage hits 0 and yours is at 12 when the fan is off. When you turn on your fan to the lowest speed, what is the percentage?
This may work, but only if the percentage starts a 12 and goes up.
type: custom:mushroom-template-card
entity: fan.bedroom_fan
icon: mdi:fan
card_mod:
style: |
ha-state-icon {
animation:
{% if states(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int %}
{% set speed =
'rotation infinite linear' %}
{% if perc <= 12 %} 0s {{speed}}
{% elif perc <= 15 %} 3s {{speed}}
{%- elif perc <= 33 %} 2.5s {{speed}}
{%- elif perc <= 50 %} 2s {{speed}}
{%- elif perc <= 67 %} 1.5s {{ speed}}
{%- elif perc <= 83 %} .75s {{ speed}}
{%- else %} 0.5s {{speed}}
{% endif %}
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
1 Like