This changes the color of the card without animation. I ask for animation.
Your question wasn’t exactly clear. Are you looking for the color to go from right to left? Are you talking about the little blip in the icon? Both?
Please be more specific, the word animation is not enough when asking for assistance.
That’s why I attached an animated GIF that shows how when you click on a card, its color changes to darker, the color change is animated, expanding circle.
You’ve submitted over 250 pull request so I assume you know how to be specific. The GIF wasn’t clear as well as your follow up responses.
Maybe this will get you headed in the right direction. It sound like you already have the animation code for expanding circle
ype: custom:mushroom-template-card
primary: Animation
secondary: example
icon: mdi:home
icon_color: green
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
transform: rotate(360deg);
transition: 500ms;
background-color: rgba(0,255,0, .2);
border-radius: 50%;
}
ha-card:active {
background-color: rgba(0,255,0, 0.1);
}
2 Likes
I think we are transmitting on different frequencies… I didn’t ask about animating the icon, I asked about animating the color change of the card (its background) after clicking (activating). For Tile cards this change is animated, I would like to achieve a similar effect for Mushroom. If you think my question isn’t specific enough, please just ignore it. Anyway, thanks and best regards.
Hello! I am trying my best but get stuck…
I tried the guide from @rhysb and I almost got it!
This is how my card looks right now. (it is a “house” battery for a boat)
The left border around the thermometer is wrong, also the color of the icon is wrong. That should be round and green and also follow the bard-card color imho. 
The bar-card portion seems to be working just swell, but the mushroom-template-card or the grid-layout part is the problem I think.
Any pointers?
This is my code:
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.victron_bluetooth_state_of_charge
icon: mdi:thermometer
icon_color: |
{% set soc = states(entity) | int %}
{% if soc > 35 %}
green
{% elif soc > 25 %}
orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:bar-card
entity: sensor.victron_bluetooth_state_of_charge
name: Forbruksbatteri
height: 42px
min: '0'
max: '100'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-green))
from: 35
to: 100
- color: rgb(var(--mush-rgb-orange))
from: 25
to: 35
- color: rgb(var(--mush-rgb-red))
from: 0
to: 25
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
margin-left: 20px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
Hello, please help:
in the 1st part, you need the entire text to fit, and it is also desirable to remove this arrow and do it through custom:fold-entity-row
In the 2nd you need to move these arrows to the left
In the 3rd you need to move the icon to the left
Can someone help me out I’m getting crazy over this. It all worked well untill october last year and after that it stopped and i tried a backup of before then and still it doesnt work anymore. I just copy and past from these post the animation, the one below. It worked like i said but what i try it doesn’t work anymore. All the animations stopped only the one for blinking works, why i don’t understand. I just want to use it exactly without changes from this forum but still doesn’t work. Everything is up to date i use HA OS, i have hacs, card mod and mushroom installed.
The indents are not shown for some reason but i just copied paste it from here
type: custom:mushroom-template-card
primary: ‘Camera #2’
icon: mdi:cctv
icon_color: deep-purple
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
–icon-animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
The animation posts have been updated.
type: custom:mushroom-template-card
primary: ‘Camera #2’
icon: mdi:cctv
icon_color: deep-purple
card_mod:
style: |
ha-state-icon {
animation: scan 5s ease-in-out infinite;
transform-origin: 90% 80%;
}
@keyframes scan {
0%, 100% { transform: rotate(20deg); }
50% { transform: rotate(-15deg); }
}
Going forward please post your code using the community standards found here See #11
Hello. Can someone please tell me if I am using the mushroom drop-down card inside the browser mod pop-up window
Is it possible to use overflow: visible So the drop-down list doesn’t get cropped due to the height of the pop-up card.
I don’t want to change the height of the pop-up card if I don’t have to. I can’t figure it out.
Like this?
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 42px auto
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
entity: sensor.basement_sensor
icon: mdi:thermometer
icon_color: |
{% set soc = states(entity) | int %}
{% if soc > 35 %}
#4caf50
{% elif soc > 25 %}
orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
background: none;
border: none;
}
- type: custom:bar-card
entity: sensor.basement_sensor
name: Forbruksbatteri
height: 42px
min: '0'
max: '100'
entity_row: true
severity:
- color: rgb(var(--mush-rgb-green))
from: 35
to: 100
- color: rgb(var(--mush-rgb-orange))
from: 25
to: 35
- color: rgb(var(--mush-rgb-red))
from: 0
to: 25
positions:
icon: 'off'
indicator: 'off'
card_mod:
style: |
ha-card {
padding: 12px;
border: none;
margin-left: 20px;
--bar-card-border-radius: 12px;
--mush-rgb-red: 244, 67, 54;
--mush-rgb-pink: 233, 30, 99;
--mush-rgb-purple: 156, 39, 176;
--mush-rgb-deep-purple: 103, 58, 183;
--mush-rgb-indigo: 63, 81, 181;
--mush-rgb-blue: 33, 150, 243;
--mush-rgb-light-blue: 3, 169, 244;
--mush-rgb-cyan: 0, 188, 212;
--mush-rgb-teal: 0, 150, 136;
--mush-rgb-green: 76, 175, 80;
--mush-rgb-light-green: 139, 195, 74;
--mush-rgb-lime: 205, 220, 57;
--mush-rgb-yellow: 255, 235, 59;
--mush-rgb-amber: 255, 193, 7;
--mush-rgb-orange: 255, 152, 0;
--mush-rgb-deep-orange: 255, 87, 34;
--mush-rgb-brown: 121, 85, 72;
--mush-rgb-grey: 158, 158, 158;
--mush-rgb-blue-grey: 96, 125, 139;
--mush-rgb-black: 0, 0, 0;
--mush-rgb-white: 255, 255, 255;
}
bar-card-value {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-name {
margin: 12px;
font-size: 12px;
font-weight: bolder;
}
bar-card-backgroundbar {
opacity: 0.2;
filter: brightness(1);
}
1 Like
Can you post your code? I am unfamiliar with the Mushroom Dropdown card.
Worked perfectly! Thank you 
No problem, happy to assist! Forgot to swap out my entities, but you probably figured that out fast
1 Like
For question #1 You could probably squeeze the dropdown in with my updated settings and avoid the custom:fold-entity-row
square: false
columns: 6
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: mdi:home
icon_color: blue
tap_action:
action: navigate
navigation_path: /lovelace
layout: vertical
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
top: -3px;
left: -5px;
border: none;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity:sensor.processor_use
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
left: -20px;
width: 5em;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.memory_use_percent
primary_info: state
secondary_info: name
name: Memory
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
width: 5em;
left: -20px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.server_cpu_temperature
primary_info: state
secondary_info: name
name: CPU
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
left: -20px;
width: 5em;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-entity-card
entity: sensor.disk_use_percent
primary_info: state
secondary_info: name
name: Storage
icon_type: none
layout: vertical
card_mod:
style: |
ha-card {
left: -20px;
width: 5em;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
- type: custom:mushroom-template-card
primary: ''
alignment: center
secondary: ''
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
icon_color: gray
tap_action:
action: toggle
layout: vertical
entity: input_boolean.information1
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
border: none;
left: -10px;
top: -3px;
width: 15px;
--card-primary-font-size: 14px;
--card-secondary-font-size: 10px;
}
2 Likes
For question #2 , I would suggest using a layout card inside a stacked card to control the column widths
For question #3, just add a left: -5px;
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
margin: 0px 0px 0px 0px
cards:
- type: custom:fold-entity-row
clickable: true
tap_action:
action: fire-dom-event
fold_row: true
head:
type: custom:mushroom-template-card
primary: Статистика интернет соединения
icon: mdi:web
icon_color: blue
tap_action:
action: fire-dom-event
fold_row: true
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
margin-top: -10px;
border: none;
}
entities:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
margin-left: -25px;
background: transparent;
box-shadow: none;
}
cards:
- type: custom:uptime-card
card_mod:
style: |
ha-card {
margin-top: -10px;
background: transparent;
box-shadow: none;
}
entity: binary_sensor.internet_reachable
hours_to_show: 24
title_adaptive_color: true
status_adaptive_color: true
icon: mdi:web
ko_icon: mdi:web-cancel
update_interval: 30
severity: 10
icon_adaptive_color: true
alias:
ok: Connected
ko: Disconnected
title_template: Интернет
bar:
height: 30
spacing: 4
amount: 24
- type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin-top: -20px;
background: transparent;
box-shadow: none;
}
horizontal: true
cards:
- type: vertical-stack
cards:
- type: markdown
content: >
<h2><font color= lightgrey><ha-icon
icon="mdi:speedometer"></ha-icon> Speedtest</font></h2>
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-border-width: 0;
}
- type: tile
name: Server
icon: mdi:speedometer
entity: sensor.speedtest_ping
state_content:
- server_name
- server_country
color: blue
- type: custom:vertical-stack-in-card
cards:
- type: grid
square: false
columns: 1
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.speedtest_download
icon: mdi:arrow-down
icon_color: '#6afff3'
content: |
{% if is_number(states(entity)) %}
{{ states(entity)|round(0) }} Mbps
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
- type: template
entity: sensor.speedtest_ping
icon: mdi:timer
icon_color: '#fff38e'
content: |
{% if is_number(states(entity)) %}
{{ states(entity) }} ms
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
- type: template
entity: sensor.speedtest_upload
icon: mdi:arrow-up
icon_color: '#bf71ff'
content: |
{% if is_number(states(entity)) %}
{{ states(entity)|round(0) }} Mbps
{% else %}
Unavailable
{% endif %}
tap_action:
action: more-info
hold_action:
action: more-info
double_tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-border-width: 0;
--chip-font-size: 11px;
--chip-font-weight: none;
}
alignment: center
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 90% 10%
margin: 0px 0px 0px 0px
cards:
- type: custom:fold-entity-row
clickable: true
tap_action:
action: fire-dom-event
fold_row: true
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
}
head:
type: custom:mushroom-template-card
primary: Статистика торрент-сервера
icon: mdi:download
icon_color: blue
tap_action:
action: fire-dom-event
fold_row: true
card_mod:
style: |
ha-card {
background: transparent;
box-shadow: none;
margin-top: -10px;
border: none;
}
entities:
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
margin-left: -25px;
background: transparent;
box-shadow: none;
}
cards:
- type: entities
card_mod:
style: |
ha-card {
margin-top: -15px;
}
entities:
- entity: sensor.radarr_queue
name: Фильмы на закачке
secondary_info: none
- entity: sensor.qbittorrent_none
name: Статус
- entity: sensor.qbittorrent_active_torrents
name: Активные торренты
secondary_info: none
- entity: sensor.qbittorrent_download_speed
name: Скорость загрузки
- entity: sensor.qbittorrent_upload_speed
name: Скорость раздачи
Going forward please do not post all of the code, especially for 3 problems you are looking to resolve. It’s a difficult process to filter through 800+ lines of code.
Damn I love this thread (and also part1). It’s so cool to see, what you are all doing here. respect!
I am testing since 2 weeks, but can’t get the simplest thing working correctly 
type: custom:mushroom-template-card
icon: mdi:battery
entity: switch.steckdose_wanddisplay_switch_0
icon_color: green
primary: Wandpanel
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
I got this code to show me a loading battery. The battery-icon is always loading.
I try to start a little more simple. I only want to change the color of the icon, but nothing works.
My plan is:
Use this card as a button, if the state is ‘off’ color is grey and no animation. But if the state is ‘on’ I will see this animation and the color green.
I am sure if I do it right, it would be possible to do.
Can anybody give me some help?
Thanks a lot
Hey, I think I misspoke, The code I have is not using the Mushroom drop down anymore, I’m using a different drop down. The same problem happens for both though. I need a way for the drop down to NOT get cropped forcing me to scroll the whole card
I know when using other cards such as the todo list card, when you add something it automatically resizes the card. I’d be fine with that too on the pop-up card… But what I would really like is to use the overflow in card_mod, if possible in a pop up window, so the drop down appears outside of the boundries of the pop-up
This probably doesn’t belong in the mushroom forum anymore, because i swapped my drop down list, but I’ll paste the code here anyways.
type: custom:mini-media-player
entity: media_player.living_room_2
background: /local/echo2.jpg
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
content:
type: custom:stack-in-card
cards:
- type: entities
entities:
- entity: input_select.content
name: platform
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Pandora
card:
type: entities
entities:
- entity: input_select.pandora_stations
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- type: call-service
name: 'Pandora Radio '
icon: mdi:pandora
action_name: Play Music...
service: script.alexa_pandora_living
data:
- Pandora
state_color: false
show_header_toggle: true
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Amazon
card:
type: entities
entities:
- entity: input_text.text
type: custom:text-input-row
- type: call-service
name: 'Amazon Music '
icon: mdi:music
action_name: Play Music...
service: script.alexa_amazon_living
data:
- AMAZON_MUSIC
state_color: false
show_header_toggle: true
- type: conditional
conditions:
- condition: state
entity: input_select.content
state: Apple
card:
type: entities
entities:
- entity: input_text.text
type: custom:text-input-row
- type: call-service
name: Apple Music
icon: mdi:apple
action_name: Play Music...
service: script.alexa_apple_living
data:
- Apple
state_color: false
show_header_toggle: true
- type: custom:mini-media-player
entity: media_player.living_room_2
group: false
source: true
info: true
hide:
icon: true
volume: false
power: true
play: true
source: true
progress: true
name: true
stop: true
volume_stateless: false
toggle_power: true
replace_mute: stop
card_mod:
style: |
:host {
--mini-media-player-accent-color: #bfb6bd;
}
ha-card {
overflow
}
card_mod:
style: |
ha-card {
overflow: visible !important;
}
ha-card > div {
overflow-x: clip;
}
group: true
source: null
info: null
hide:
icon: true
volume: true
power: true
controls: true
source: true
progress: true
shortcuts:
columns: 6
buttons:
- icon: mdi:sofa
type: script
id: script.alexa_livingroom
- icon: mdi:pot-steam
type: script
id: script.alexa_kitchen
- icon: mdi:toilet
type: script
id: script.alexa_bathroom
- icon: mdi:movie-check
type: script
id: script.alexa_movieroom
- icon: mdi:desk
type: script
id: script.alexa_office
- icon: mdi:bed-king
type: script
id: script.alexa_bedroom
card_mod:
style:
mmp-shortcuts $: |
mmp-button:nth-of-type(0) ha-icon {
color: cyan;
}
mmp-button:nth-of-type(1) {
background-color: rgb(50,50,50,.6);
}
style: |
ha-card {
height: 250px;
}
tts:
platform: alexa
Hi, I’m trying to add a second line of text to the Chip card, so I can add things like template sensors, but can’t figure it out. How do I go abouts doing so?
This should work for you…
type: custom:mushroom-template-card
icon: mdi:battery
entity: switch.steckdose_wanddisplay_switch_0
icon_color: |-
{% if is_state(config.entity,'on') %}
green
{% else %}
grey
{% endif %}
primary: Wandpanel
card_mod:
style:
mushroom-shape-icon: |
ha-state-icon {
animation: {{ 'charge 3s linear infinite' if is_state(config.entity, 'on') else 'none' }}
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
1 Like