i tried the suggestions but i cant get rid of the empty space on top and bottom of the card. i can use padding from bottom and top with card_mod, and it will move the text up or down, but in the process also make the card larger. how do i get rid of the empty space? i want to stack around 8 of these, so removing empty space would be great.
The space is the gap between cards. A few suggestionsā¦
- Theme
--row-gap. However this will be universally applied. - Use a vertical stack and theme
--stack-card-gap. However this will be universaly applied to all vertical stacks. - Use a container card with card-mod to style
--row-gap. e.g. vertical-stack. With card-mod 3.4.5 you will need to usecustom:mod-cardto be able to apply card-mod to vertical stack. With v4.0.0-beta.4 vertical-stack is natively supported. - With card-mod v4.0.0-beta.4 style
--row-gapdirectly to the section which is now supported. You can edit the section in YAML to apply card-mod directly. - Use another container card that allows to set gap between cards. e.g. expander-card (MelleD fork) with card
expanded: true,display: grid,gap: 0andshow-button-users: [](Last setting removes the expand/collpase title). expander-card is active in maintenance and a good option in my opnion, but perhaps not if you donāt want that functionaility.
Hey community!
I am having trouble with animating a template chip icon under a conditional chip.
I have tried many different variations, but canāt seem to figure it out.
This is my current code. The card_mod code I am focusing on is at the very end.
type: conditional
conditions:
- condition: state
entity: sensor.gdacs_tropical_cyclone_count
state: '0'
chip:
type: template
icon: mdi:weather-hurricane
icon_color: red
content: |
{% set storms = states.geo_location
| selectattr('attributes.source','equalto','gdacs')
| selectattr('attributes.event_type','equalto','Tropical Cyclone')
| list %}
{% set n = storms | length %}
{% if n == 1 %}
{{ storms[0].name.split(': ',1)[1].split('-')[0] | title }}
{% else %}
{{ n }} storms
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Hurricanes
fullscreen: true
size: fullscreen
content:
type: iframe
url: https://www.accuweather.com/en/hurricane
card_mod:
style: |
ha-card {
height: 90vh !important;
margin: 0;
padding: 0;
}
iframe {
height: 90vh !important;
border: none !important;
}
card_mod:
style:
.: >
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)}
}
mushroom-template-chip$:
mushroom-chip$:
ha-state-icon$:
.: |
:host {
animation: spin 4s linear infinite !important;
transform-origin: 50% 50%;
}
The first card mod changes a browser_mod popup
And here is the DOM in the HTML
Any help would be much appreciated!!!
This is not working for me.
My card:
type: custom:mushroom-template-card
primary: Lights
secondary: ""
icon: mdi:lightbulb
tap_action:
action: navigate
navigation_path: lights
double_tap_action:
action: none
hold_action:
action: none
color: amber
vertical: true
features_position: bottom
card_mod:
style: |
ha-state-icon {
--icon-symbol-size: 40px;
}
Take a look at recent examples. There has been Breaking Changes as of late
Test this outā¦
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
Double check that your conditional setup is correct. The :nth-child will go to (2) if you assign another entity to the condition.
Thank you for your reply!
I applied your code, and it doesnāt seem to be spinning the icon. I did a hard refresh on the page and whatnot as well to double check.
Is there anything else I can show you that might help to troubleshoot? Here is the full YAML for the entire Mushroom Chip block and a screenshot of the Hurricane icon. I am unsure if this will tell anything.
type: custom:mushroom-chips-card
chips:
- type: entity
entity: input_select.house_status
tap_action:
action: none
icon_color: primary
- type: weather
entity: weather.forecast_home
show_conditions: true
show_temperature: true
- type: conditional
conditions:
- condition: state
entity: sensor.gdacs_tropical_cyclone_count
state: "0"
chip:
type: template
icon: mdi:weather-hurricane
icon_color: red
content: |
{% set storms = states.geo_location
| selectattr('attributes.source','equalto','gdacs')
| selectattr('attributes.event_type','equalto','Tropical Cyclone')
| list %}
{% set n = storms | length %}
{% if n == 1 %}
{{ storms[0].name.split(': ',1)[1].split('-')[0] | title }}
{% else %}
{{ n }} storms
{% endif %}
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Active Hurricanes
fullscreen: true
size: fullscreen
content:
type: iframe
url: https://www.accuweather.com/en/hurricane
card_mod:
style: |
ha-card {
height: 90vh !important;
margin: 0;
padding: 0;
}
iframe {
height: 90vh !important;
border: none !important;
}
card_mod:
style:
mushroom-template-chip:nth-child(1)$: |
ha-state-icon {
animation: spin 1s linear infinite;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
alignment: center
Shift the word card_mod: all the way to the left.
2 Likes
Yes. That ended up working! Thanks a ton 
@LiQuid_cOOled , @Ojima
Just wanted to leave a thank you both for finally getting my circulation pump animation working.
I was bashing my head against the examples, trying minimal setups, yet nothing worked. Copied the hurricane code and almost jumped from excitement as it spun on my cluttered test dashboard. A few adaptations later and it finally works.
I think it was that pesky | at styles, but Iām not sure. Itās not the first time it feels like Iām doing the same thing over and over and suddenly it works. And people say C++ is hardā¦
If anyone happens to need an example of several mushroom chips with different card_mod styles on top of the animation, here is my (shortened) code:
In the end, separating the animation form ha-card with .: | was the last puzzle piece.
type: custom:mushroom-chips-card
chips:
- type: template
<<card goes here>>
- type: entity
<<card goes here>>
- type: entity
<<card goes here>>
- type: template
icon: mdi:sync
entity: switch.shelly_mini1pmg3_temp_klaeranlage_switch_0
icon_color: "{{ 'accent' if states(entity) == 'on' else 'grey' }}"
card_mod:
style: |
ha-card {
border: none;
--chip-background: none;
--chip-icon-size: 30px;
}
card_mod:
style:
mushroom-template-chip:nth-child(4)$: |
ha-state-icon {
{%if states('switch.shelly_mini1pmg3_temp_klaeranlage_switch_0') == 'on' %}
animation: spin 1s linear infinite;
{%endif%}
}
@keyframes spin {
100% { transform: rotate(-360deg); }
}
.: |
ha-card {
--chip-font-size: 16px;
--chip-icon-size: 26px;
border: none;
--chip-background: none;
}
:host {
--mush-chip-spacing: 0px; /* default is 8px */
}
3 Likes
@LiQuid_cOOled : Hi! Would you have an idea and can help me please? Many many thanks in advance!!