hi, is it possible to add shortcuts to the mushroom media player card? for example:
shortcuts:
columns: 4
buttons:
- type: script
name: Qmusic
id: script.play_qmusic_kantoor
- type: script
name: Arrow rock
id: script.play_arrow_rock
- type: script
name: Radio 10
id: script.play_radio_10
- type: script
name: Radio 538
id: script.play_radio_538
I apprecite that this is a fairly broad question but something is holding back my adoption of some of the great multi-faceted Mushroom cards in this thread.
Why are Mushroom template cards are seemingly so resource intensive ?
As soon as I deploy them my resource use rockets to the point that a R Pi4 become unusable and a VM on Proxmox with 2 cores from an i7 and 8GB slows too.
Is there an obvious explanation for this and/or a way to mitigate it beyond just throwing more and more horsepower at the problem ?
Edited to send an @ to @piitaya who is the founding father @rhysb who has been the most remarkable adopter !
Hello
Since version 3.0.1 my icons on the home assistant application are not centered.
They are centered on the Web version.
Do you have any idea what’s wrong ?
I have a similar piece of code that I just haven’t been able to get working since the update. I swapped out ha-icon to ha-state-icon and for some reason this one icon doesn’t animate while other ones with similar code do
card_mod:
style:
mushroom-shape-icon:
$: |
.shape ha-state-icon
{
{{ '--icon-animation: rotation 1s linear infinite;' if not is_state('climate.bedroom_ac', 'off') }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@shogun168 I had similar issue and was advised to strip it back to…
card_mod:
style: |
mushroom-shape-icon {
{{ '--icon-animation: ....
}
There didn’t seem to be a need for the $ and ha-state-icon and the | can go after the style.
Hope that works for you too.
Perfect, that fixed it for me. Thanks a bunch
Do you have any custom theme ? I noticed something similar but less visible.
Same issue here, it even messes with all of the fancy animations.
I found that line-height is to blame.
I added this to my themes to get the spacing right.
paper-font-body1_-_line-height: 0.8rem
However, having the line-height fixed in Mushroom itself would be better, as this messes with the spacing of other things.
Thanks for the information. I will look what I can do to fix that 
Would it be possible to do the same on chips? I’m trying to figure out how to use the entity picture as the icon. I’m using a template chip because I would like the border of the chip to be green if binary sensor is on. I’m already using this on a entity card but it doesn’t work copy paste to a chip:
card_mod:
style: |
ha-card {
{% if is_state(‘binary_sensor.1234’,‘on’) %}
border: solid 3px green; box-shadow: none;
{%endif%}
}
Thanks
Thanks! (and also to others answering). This indeed works like a charm again. Now to do about 50ish icons (among others all my chargeable battery indicators icons where customized to show an icon based on how full they are and show an animated icon if they are charging 
)
Any advice on updating the following card-mod styling to work with v.3 please?
card_mod:
style:
mushroom-state-info$: |
.primary {
font-size: 16px !important;
}
.secondary {
font-size: 13px !important;
}
I have tried the following…
card_mod:
style: |
mushroom-state-info > div > span.primary {
font-size: 16px !important;
}
mushroom-state-info > div > span.secondary {
font-size: 13px !important;
}
I need that text a little larger so I may read it without my glasses. 
Each template is evaluated on the server via web socket to get the jinja2 support. If you only use one entity per template, it should be ok.
But if you have many complex templates and many my templates, it will be cpu intensive. Do you have a example of template card config you use?
Performance is the main reason we don’t propose template support to tile card yet.
Hi
How i make this local image work
card_mod:
style: |
ha-card {
background-image:
{% if not is_state(config.entity, ‘off’) %}
url( ‘{{ state_attr( config.entity, “entity_picture” ) }}’ );
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),0.8);
background-blend-mode: overlay;
{% else %}
url('/local/server/musica5.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-color: rgba(var(--rgb-card-background-color),0.8);
background-blend-mode: overlay;
{% endif %}
--rgb-state-media-player: var(--rgb-blue);
height: 155px !important;
}Hi @rhysb
After the latest updates it seems that all animations from the five groups you posted have stopped working.
I can’t exactly tell if it is because of the HA 2023.7 update or the card mod though but I currently have all up-to-date and no animations working.
Is this a bug and will be fixed? or do I need to take some more intensive measures?
It relates to the breaking change where ha-icon is now ha-state-icon for Mushroom cards.
Try to replace all your references to ha-icon to ha-state-icon instead.
Also then refresh browser cache/app cache.
Just changing that fixed most animations for me. But a few needed a few more modifications. If it still doesnt work after changing to ha-state-icon post your yaml and i will try and look to see if i can get it working for you 
Try this:
card_mod:
style: |
:host {
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 13px;
}
Thank you. That works great alongside the tweak for animated icon.
card_mod:
style: |
mushroom-shape-icon {
{{ '--icon-animation: pulse 3s linear infinite;' if is_state('sensor.myenergi_zappi_plug_status', 'Charging') }}
}
:host {
--mush-card-primary-font-size: 16px;
--mush-card-secondary-font-size: 13px;
}
Hmm. Not worked, but this yes:
card_mod:
style: |
mushroom-shape-icon {
{{ 'animation: blinker 2s linear infinite;' if is_state(config.entity, 'on') }}
}
@keyframes blinker { 10% { opacity: 0; } }
ha-state-icon {
{{ '--icon-animation: blinker 2s linear infinite;' if is_state(config.entity, 'on') }}
}
@keyframes blinker { 80% { opacity: 0; } }
in mushroom-shape-icon animation, in ha-state-icon –icon-animation
