That’s great! I have another solution that I will post tonight.
1 Like
You should be able to most of that with Mushroom and card_mod now.
1 Like
Very nice, thanks
For the blur to work correctly on iOS we need to enable HW acceleration. To do that we can add the following lines:
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
Once we add it to the Mushroom Media Player we have:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card::before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
{% if not is_state('media_player.currently_playing', 'idle') %}
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
filter: blur(150px) saturate(400%);
background-size: 100% 100%;
{% endif %}
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
--ha-card-border-width: 0;
{% if not is_state('media_player.currently_playing', 'idle') %}
background: url( '{{ state_attr("media_player.currently_playing", "entity_picture") }}' ), linear-gradient(to left, transparent, rgb(var(--rgb-card-background-color)) 50%);
{% if state_attr('media_player.currently_playing', 'media_content_type') == 'tvshow' %}
background-size: auto 100%, cover;
{% else %}
background-size: 50% auto, cover;
{% endif %}
background-position: right;
background-repeat: no-repeat;
background-blend-mode: saturation;
{% endif %}
}
Thanks to @theandouz for help to track down the issue and testing 
4 Likes
Hi,
how could I use this weather icon package with the Mushroom Template card? I would like to make my own weather card with template card and with this icon set.
Thanks in advanced!
Here is a version with full artwork that would suit a tablet layout. It dynamically adjusts to the aspect ratio of the media, but you can fix it to a square aspect ratio with aspect-ratio: 1 / 1;.
Mushroom Media Player Blurred Album Art Tablet Mode:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.currently_playing
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
volume_controls:
- volume_buttons
- volume_set
fill_container: false
card_mod:
style: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
animation: spin 2s linear infinite reverse;
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'tvshow' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.currently_playing
state_not: 'off'
- entity: media_player.currently_playing
state_not: idle
card:
entity: media_player.currently_playing
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--rgb-indigo-color), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--rgb-indigo-color));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.currently_playing', 'idle') %}
background: url( '{{ state_attr('media_player.currently_playing', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
Updated with rounded art corners and idle album art.
42 Likes
Wow @rhysb you are a machine! Just want to thank you for your help in this group. I’ve been using HASS for +5 years and mushroom + your tips have changed my look and feel tremendously!
Would you have a solution (or alternative route) for my Q posted here?
1 Like
This is an example I did a while ago. It should get you started.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
primary: >-
{{ state_attr(entity, 'temperature') | round(1) }} °C
secondary: '{{ states(entity) | title }}'
icon: none
entity: weather.weatherflow_hourly_based_forecast
picture: >-
{% set condition = states(entity) %} {% if condition == 'partlycloudy' and
is_state('sun.sun', 'below_horizon') %}
{% set condition = condition + '-night' %}
{% endif %} /local/weather_icons/anim/{{ condition }}.svg
card_mod:
style: |
ha-card {
--icon-border-radius: 0;
}
1 Like
You can do it like this.
Mushroom Title Single Line:
type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bathroom
subtitle: >-
{{ states('sensor.bathroom_sensor_temperature') | round(1) }}°C / {{
states('sensor.bathroom_sensor_humidity') | round(1) }}%
card_mod:
style:
mushroom-title-card$: |
.header {
display: table !important;
}
.subtitle {
display: table-cell;
text-align: right;
width: 100%;
}
7 Likes
Et Voila! That worked. Thanks
1 Like
What is the best way to add a second row to the left of the double right row? (see photo)
Also I wonder; How do you add the content to make it all be in one row? I made a huge vertical and horiziontal card, that start to look quite messy now (see photo) Is it any easier way to do it, and still keep the row properly?
@rhysb jumped the gun a bit. Main title starts to wrap pretty quickly, especially on mobile but also on dekstop. See screenshot. Played around with the width % n above code but could not get if fixed. Suggestions?
I think I have the same type of layout. See this post.
My code (filling the gaps):
type: vertical-stack
cards:
- type: custom:mod-card
card:
type: custom:mushroom-title-card
title: Bedroom Robin
subtitle: '{{ states(''sensor.04_038521_temperature'') | round(1) }}°C'
card_mod:
style:
mushroom-title-card$: |
.header {
display: table !important;
}
.subtitle {
display: table-cell;
text-align: right;
width: 65%;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.led_strip_robin
use_light_color: true
show_brightness_control: true
show_color_control: true
show_color_temp_control: false
fill_container: false
collapsible_controls: false
icon: mdi:led-strip-variant
- type: custom:mushroom-light-card
entity: switch.ikea_switch_lampjes_robin
fill_container: true
name: Robin Nightlight
icon: mdi:lightbulb
- type: horizontal-stack
cards:
- type: custom:mushroom-light-card
entity: light.slaapkamer_gitte_111
show_brightness_control: true
collapsible_controls: false
use_light_color: false
- entity: climate.robin
type: custom:mushroom-climate-card
hvac_modes:
- heat_cool
show_temperature_control: true
tap_action:
action: more-info
1 Like
I dont suppose anyone has a mushroom conditional card that shows when any of the Thermostats or TRVs are calling for heat ?
I can get a conditional card to work with just 1 main entity but I want the overall status to show me the source calling it in a mushroom card.
This is the code that give me the friendly name of the climate entity and lists them vertically
{{
states.climate|selectattr('state','eq','heat')|map(attribute='attributes.friendly_name')|list|join('\n')
}}
I have 5 sources it could be, so if we can get into 2 columns to not have to expand the card, that would be amazing too.
This conditional card is not working as will only show on 1 condition and doesnt work with OR
Thanks in advance
Martyn
I’m trying to change the icon color (not the circle around it) to a permanent color in the theme. I can change it by adding:
mushroom-shape-icon$: |
ha-icon {
--icon-color: white!important;
}
on the card itself, but how can I add it with card-mod into the theme as a default?
`
EDIT:
card-mod-card: |
mushroom-shape-icon {
--icon-color: white!important;
}
Vacuum part 
Home Assistant air conditioner button
- icon picture changes depending on the state of the air conditioner.
type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'') }} °C'
primary: Midea
entity: input_boolean.notify_home3
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
action: navigate
navigation_path: klima
layout: vertical
picture: |
{% if is_state('climate.146235046506144_climate', 'off') %}
/local/icons/klima.png
{% elif is_state('climate.146235046506144_climate', 'cool') %}
/local/png/klimablue.PNG
{% elif is_state('climate.146235046506144_climate', 'heat') %}
/local/png/klimared.PNG
{% else %}
/local/icons/klima.png
{% endif %}
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: #1a1a2a;, 1.25);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
card_mode:
style: |
:host {
background: rgba(var(--rgb-primary-background-color), 0.5);
border-radius: 50px;!important
}
line_width: 8
line_color: '#FF6384'
icon pictures :
klima :
klima red:
klima blue :
Current beahviour of the button navigates to air conditoner page but you can change it with editing tap_action part. For example this code directly turns on and off the airconditioner instead of navigating to the page.
type: custom:mushroom-template-card
secondary: '{{ states(''sensor.hue_motion_temp_yatak_odasi'') }} °C'
primary: Midea
icon: mdi:weather-partly-cloud
fill_container: false
multiline_secondary: false
tap_action:
action: toggle
entity: climate.146235046506144_climate
layout: vertical
picture: |
{% if is_state('climate.146235046506144_climate', 'off') %}
/local/icons/klima.png
{% elif is_state('climate.146235046506144_climate', 'cool') %}
/local/png/klimablue.PNG
{% elif is_state('climate.146235046506144_climate', 'heat') %}
/local/png/klimared.PNG
{% else %}
/local/icons/klima.png
{% endif %}
style: |
mushroom-card {
background-size: 42px 42px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
ha-card {
background: #1a1a2a;, 1.25);
margin-top: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
card_mode:
style: |
:host {
background: rgba(var(--rgb-primary-background-color), 0.5);
border-radius: 50px;!important
}
line_width: 8
line_color: '#FF6384'
6 Likes
Hi Rhys, is it possible to change the font-size of the target temperature? I’ve been trying with no success (in #container .span ) :
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .span {
font-size: 40px;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
.: |
host {
--mush-icon-size: 40px;
--mush-card-primary-font-size: 28px;
--mush-card-secondary-font-size: 22px;
}
Thank you!
Working on my dashboard and I can’t seem to get the person card to show a mdi:car when the status is state is set to driving (or Driving). It shows the Home badge when the state is set to driving. all other badges seem to reference zones that I have configured in home assistant. Any way to get the badge to show a car when the person is driving?
- type: custom:mushroom-person-card
entity: person.ally
use_entity_picture: true
layout: vertical
hide_name: true
hide_state: false
badge_icon: |-
{% if is_state('person.ally', 'Driving') %}
mdi:car
{% endif %}
card_mod:
style: |
ha-card {
--badge-icon-size: 1.0em;
}
:host {
--mush-icon-size: 84px;
--mush-badge-size: 33px;
height: 110px;
margin-left: -18px !important;
}
1 Like
Thanks, been having a play with this today and it seems to work but only if I hold the button… if I just click it the animation stops playing as soon as the mouse button is released.
Is there any way to force it to finish up the animation ?
Here is what I have so far;
- type: custom:mushroom-template-card
primary: ''
secondary: Leave
icon: mdi:hand-wave-outline
layout: vertical
icon_color: green
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.leave
card_mod:
style: |
ha-card:active mushroom-shape-icon {
display: flex;
animation: wave 2.5s;
}
@keyframes wave {
0% { transform: rotate( 0.0deg); }
10% { transform: rotate(14.0deg); } /* The following five values can be played with to make the waving more or less extreme */
20% { transform: rotate(-8.0deg); }
30% { transform: rotate(14.0deg); }
40% { transform: rotate(-4.0deg); }
50% { transform: rotate(10.0deg); }
60% { transform: rotate( 0.0deg); } /* Reset for the last half to pause */
100% { transform: rotate( 0.0deg); }
}
ha-card {
background: var(--card-background-color);
box-shadow: 0 0 4px 0px lightgrey !important;
width: auto;
border-radius: 10px;
margin-bottom: 2px;
}
Also, I seem to be having issues with some animations since the above applies it to the entire shape not just the icon… so when I try to do clipping I get white blank parts… can’t for the life of me figure out the right syntax though that will still allow me to use ha-card:active and the normal ha-card styling, along with selecting the ha-icon too.