Hi, can you share your code for this ?
thank you.
Hello,
One sample:
type: custom:mushroom-template-card
primary: Front Door Lock
secondary: |-
{% set state=states(entity) %}
{% if state=='locked' %}
Locked
{% elif state=='unlocked' %}
Unlocked
{% else %}
Error
{% endif %}
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-alert
{% else %}
mdi:alert
{% endif %}
layout: vertical
entity: lock.front_door_lock
tap_action:
action: toggle
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
1 Like
Thanks.
What about animation? Is it possible to do it at some state of the binary sensor?
Hi, is there any way to customize font size in mushroom-title-card? iād like to increase both title and subtitle font size. Thanks!
Yes, you can set a unique icon and animation in each state. You just have to substitute the right icon and animation in the right place. Scroll up in the topic and you will see plenty of examples.
1 Like
Have a look here:
Iām adapting @rhysb 's great media card and am struggling to align a grid layout-card with the Mushroom media card, all within a stack-in-card.
I could avoid the issue if I were able to reduce the space around the volume slider and buttons in a Mushroom media card. Iāve tried everything my limited CSS skills allow to do that. But, Iām also open to any other suggestions.
Basically, Iāve split things into two separate media cards, because I need volume controls on the same row as a chip card that calls a volume-related script.
What Iām trying to achieve:
Relevant part of the card config:
...more before; cards are inside a stack-in-card...
- type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: false
media_controls:
- play_pause_stop
- previous
- next
card_mod:
style: |
ha-card {
margin: 0px 0px 0px;
border-width: 0;
}
- type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_all_inside
volume_controls:
- volume_mute
- volume_set
- volume_buttons
media_controls: []
show_volume_level: true
use_media_info: false
icon_type: none
primary_info: none
secondary_info: none
card_mod:
style: |
ha-card {
--mush-rgb-disabled: 189,189,189;
--mush-rgb-indigo: 63, 81, 181;
border-color: rgb(0,0,0,0);
background-color: rgb(0,0,0,0);
box-shadow: none
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-equal
alignment: end
name: SYNC
tap_action:
action: call-service
service: script.sonos_whole_house_volume
data: {}
target: {}
card_mod:
style: |
ha-card {
margin-top: 13px; #To align button with volume slider
margin-right: 0px;
margin-left: 0px;
--chip-background: rgba(var(--rgb-disabled), 0.1);
--chip-box-shadow: none;
--chip-border-radius: 12px;
--chip-border-color: rgba(0, 0, 0, 0);
--chip-height: 40px;
--chip-padding: 10px;
}
box-shadow: none
layout:
grid-template-columns: 85% 15%
...more after...
Hope this is clear. Thanks very much in advance!
1 Like
Thanks for the excellent media card, @rhysb . Hereās an addition that you might find useful. I modified the logic for the animated icon so that it only animates if media is currenlty playing.
...
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;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: flicker 1s linear infinite alternate;
{% endif %}
{% elif media_type == 'movie' %}
--card-mod-icon: mdi:movie-roll;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: spin 2s linear infinite reverse;
{% endif %}
{% elif media_type == 'music' %}
--card-mod-icon: mdi:music;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: beat 1.3s ease-out infinite both;
{% endif %}
{% elif media_type == 'playlist' %}
--card-mod-icon: mdi:music;
{% if not is_state('media_player.sonos_all_inside', 'paused') %}
animation: beat 1.3s ease-out infinite both;
{% endif %}
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
}
...
2 Likes
not sure if you ever got an answer. I have tivimate and implayer working using the android tv integration and running service calls. Let me know if you want to see how i did it.
Playing around with the Team Tracker HACS Integration and Iām wondering if I can wrap it in a Mushroom Template card or utilize Mushroom in any way for more customization? Still figuring out also how Iād like to display a dedicated sports page as well. All Idea and layout suggestions welcome.
Sample Team Tracker Code
type: custom:teamtracker-card
entity: sensor.sp_dallas_cowboys
card_title: Dallas Cowboys Football
home_side: right
1 Like
Great idea 
. Can be done with a single line if like this:
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') }}
}
4 Likes
where did you place this code?
Yes, please 
One of my template cards shows lines with an extra empty line between lines and indentation before each line as you can see in the picture below.
Code:
type: custom:mushroom-template-card
primary: Garbage Collection
secondary: >-
{% set garbage_types = [
{'name':'Biotonne','date':state_attr('sensor.garbage_collection',
'Biotonne'),'message':states('sensor.biotonne_garbage_collection')},
{'name':'Gelber Sack','date':state_attr('sensor.garbage_collection',
'Gelber Sack'),'message':states('sensor.gelber_sack_garbage_collection')},
{'name':'Papiertonne','date':state_attr('sensor.garbage_collection',
'Papiertonne'),'message':states('sensor.papiertonne_garbage_collection')},
{'name':'RestmĆ¼ll','date':state_attr('sensor.garbage_collection',
'RestmĆ¼ll'),'message':states('sensor.restmull_garbage_collection')},
] | sort(attribute='date') %}
{% for garbage_type in garbage_types -%}
{% if as_timestamp(state_attr('sensor.garbage_collection', garbage_type.name)) < as_timestamp(now()) + 604800 -%}
{% if garbage_type.name == 'Biotonne' -%} Bio: {{ garbage_type.message }}
{% elif garbage_type.name == 'Gelber Sack' -%} Gelber: {{ garbage_type.message }}
{% elif garbage_type.name == 'Papiertonne' -%} Papier: {{ garbage_type.message }}
{% elif garbage_type.name == 'RestmĆ¼ll' -%} RestmĆ¼ll: {{ garbage_type.message }}
{% endif %}
{% endif -%}
{% endfor -%}
icon: mdi:trash-can
badge_icon: ''
icon_color: black
fill_container: true
multiline_secondary: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
1 Like
You absolutely rock! Awesome work and thank you so much!
Iāve made some changes in order to disable the animation when my Christmas lights are off (Itās a switch).
Summary
- type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:pine-tree
icon_color: green
entity: switch.christmas_lights
tap_action:
action: toggle
- type: template
icon: mdi:star
icon_color: yellow
tap_action:
action: none
- type: template
icon: mdi:grain
icon_color: red
tap_action:
action: none
- type: template
icon: mdi:gift
icon_color: red
tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(2)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -35px;
{% if is_state('switch.christmas_lights','on') %}
animation: star 8s ease infinite alternate;
{% else %}
display: none;
{% endif %}
}
@keyframes star {
0%, 100% { transform: translateY(-9px) rotate(0deg) scale(0.4); }
50% { transform: translateY(-9px) rotate(360deg) scale(0.6); }
}
mushroom-template-chip:nth-child(3)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -79px;
{% if is_state('switch.christmas_lights','on') %}
animation: flash 2s steps(1) infinite, lights 2s infinite;
clip-path: polygon(51% 15%, 24% 74%, 74% 74%);
{% else %}
display: none;
{% endif %}
}
@keyframes flash {
50% { transform: rotateY(180deg); }
}
@keyframes lights {
0%, 100% {--color: rgb(var(--rgb-red)); }
6.25% { --color: rgb(var(--rgb-deep-orange)); }
12.5% { --color: rgb(var(--rgb-orange)); }
18.75% { --color: rgb(var(--rgb-amber)); }
25% { --color: rgb(var(--rgb-yellow)); }
31.25% { --color: rgb(var(--rgb-lime)); }
37.5% { --color: rgb(var(--rgb-light-green)); }
43.75% { --color: rgb(var(--rgb-green)); }
50% { --color: rgb(var(--rgb-teal)); }
56.25% { --color: rgb(var(--rgb-cyan)); }
62.5% { --color: rgb(var(--rgb-light-blue)); }
68.75% { --color: rgb(var(--rgb-blue)); }
75% { --color: rgb(var(--rgb-indigo)); }
81.25% { --color: rgb(var(--rgb-deep-purple)); }
87.5% { --color: rgb(var(--rgb-purple)); }
93.75% { --color: rgb(var(--rgb-pink)); }
}
mushroom-template-chip:nth-child(4)$: |
mushroom-chip {
cursor: default !important;
}
ha-icon {
position: absolute;
left: -114px;
bottom: 8px;
{% if is_state('switch.christmas_lights','on') %}
animation: surprise 4s ease infinite;
{% endif %}
--chip-icon-size: 8px;
}
@keyframes surprise {
0%, 20%, 100% { transform: translateY(0); }
2.5% { transform: translateY(-2px) rotate(-27deg); }
5% { transform: translateY(-2px) rotate(21deg); }
7.5% { transform: translateY(-2px) rotate(-15deg); }
10% { transform: translateY(-2px) rotate(9deg); }
12.5% { transform: translateY(0); }
15% { transform: translateY(-1.2px) }
}
.: |
mushroom-template-chip:not(:first-child) {
--chip-background: none;
--chip-box-shadow: none;
--chip-border-width: 0px;
}
1 Like
Iām trying to optimize my Mushroom Climate Card 
Would love to have something like this:
Scenerio 1:
Hvac_action: heating (icon color is orange)
Actual temperature: 21,5Ā°C (shown in white in the icon)
Valve percentage opening: 18% (shown in the badge)
Scenerio 2:
Hvac_action: idle (icon color is grey)
Actual temperature: 19,3Ā°C (shown in white in the icon)
Valve percentage opening: 0% (shown in the badge or not active icon)
Scenerio 3:
Hvac_action: cooling (icon color is blue)
Actual temperature: 19,3Ā°C (shown in white in the icon)
Valve percentage opening: 25% (shown in the badge)
I think this can be achieved by using a horizontal stack with:
- a chips card for the icon and badge
- the standard climate card for the rest
However I donāt succeed in getting the result.
I tried to putt together all @rhysb pieces, but the result is not that good
Here is the code:
type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: template
icon: none
content: >-
{{state_attr('climate.living', 'current_temperature')|replace('.',
',')}} Ā°
entity: climate.living
icon_color: none
tap_action:
action: none
card_mod:
style: |
ha-card {
padding: 0px;
{{ '--chip-background: rgba(var(--rgb-orange));' if is_state(config.entity, 'heat') }}
{{ '--chip-background: rgba(var(--rgb-blue));' if is_state(config.entity, 'cool') }}
{{ '--chip-background: rgba(var(--rgb-grey));' if is_state(config.entity, 'idle') }}
}
ha-card:after {
content: "{{ states('sensor.alpha2_heat_control_ezr012b5_glv_1_valve_opening') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-blue-grey));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
font-size: 11px;
}
.content {
white-space: pre-wrap;
}
- type: custom:mushroom-climate-card
entity: climate.living
icon: none
icon_type: none
layout: horizontal
fill_container: true
show_temperature_control: true
tap_action:
action: more-info
Any idea to get the initial requested result?
Thx
hallo nice man
Iāve also been working on this wow also set it up for the world cup but nothing comes in to me how did you get this spin thanks in advance!
Nicely simplified, Thanks! Iāve updated my own configuration accordingly.
1 Like