@rhysb Is it possible to animate chips’s icons ?Thanks in advance.
hello how did you make the title card with that line ?
Does anyone know a way to automatically pad the chips/buttons in this card, or change their width, so that they always fit the variable width of the stack-in-card that they are in? On wider screens there is abundant space, and on smaller screens they don’t fit and instead align vertically.
I tried card-mod --chip-padding: auto; and --chip-width: auto; but no good.
Does anybody have a vacuum specific page that combines the best of mushroom with a map, sort of like this example of @djbrooks022.
Would love to get some inspiration, saw some already with the standard vacuum card bit would like some additional features. Trying to skip using the vacuum app altogether for a great WAF 
.
2 Likes
All credit and thanks to @rhysb of course from this post and previous ones.
In answer to your inquiry, YES it is possible (Check the last card in the grid)
Create two helpers:
- input_boolean.testing
- input_number.test_number
- replace the file paths with yours
EDIT: Added last chip for Active Filling tank with property “object-fit: contain !important;” (Finally got it)
type: grid
columns: 1
square: false
cards:
- primary: '{{ states(entity) }}'
secondary: Testing
type: custom:mushroom-template-card
entity: input_boolean.testing
icon: none
layout: vertical
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
border-radius: 50%;
{{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
}
.shape {
{{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
{{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
- type: custom:mushroom-template-card
entity: input_boolean.testing
primary: Test
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
layout: vertical
secondary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1.5s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
icon_color: ''
badge_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('input_number.test_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
secondary: Test Number
icon: none
layout: vertical
entity: input_boolean.testing
icon_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: url("/local/my-icons/ufh-96.png") no-repeat center;
background-size: contain;
--shape-color: none;
--shape-animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
}
@keyframes clip {
0% {clip-path: inset(60% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: entity
entity: input_number.test_number
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: mdi:sprinkler
icon_color: light-blue
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
.content {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:faucet'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waterfall'' if is_state(entity, ''on'') else ''mdi:waterfall'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 1s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(0 0 80% 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
picture: /local/my-icons/water 5.png
icon: '{{ ''mdi:waterfall'' if is_state(entity, ''on'') else ''mdi:waterfall'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.avatar {
animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
object-fit: contain !important;
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
5 Likes
Thanks a lot! It’s perfect!
Does anyone have tips on modifying the javascript so that using the color slider for RGBW or RGBWW cards doesn’t set the white(s) to 0? What I need it to do is use the service call to set rgbw or rgbww color and assign the RGB from the slider while keeping the original W or WW values for the whites.
I’m still using the bottomCard, every now and then I’m having the refresh-to-see issue, but most of the time the tablet displays the cards correctly. If you have a fix for it that would be great!
Sounds great, I’ll try to get it up and tested as soon as I can and will let you know. Are you up for a re-post of some of your current tablet views? I use the posts from folks like yourself, berkans, rhysb, etc. who have so graciously shared code and pictures to try and form both my tablet and smartphone views, and I’m just about there. But I got overwhelmed this weekend when I realized the past three weekends or so I’d stopped working towards a vision and spent time just mucking away with animations and CSS tricks 
Do you mind sharing any new pics of the tablet views if you have them? Thanks again and I’ll be in touch as soon as I find time to (hopefully) fix the bottomCard on sidebar-card.
Don’t know if this is the place, but since it’s primarily all mushroom:
For completely starting in April 2022, at the age of 22 in a small apartment, I love how far I have come
in such a short time and what I have planned/ahead. Let me know your thoughts!
Video Walkthrough:
https://youtu.be/PIS08GvT9FM
12 Likes
They’re all different.
Have anyone tried adding some mushroom cards inside the new tabbing card?
hallo very nice dashboard I would like the code of this if possible and I like the weather map very nice which one is this can you share it with my ?
Still haven’t been able to figure this out.
Hi,
It’s possible to activate layout mode horizontal for mushroom-light-card only when whe are on PC ?
I wan’t to be in default mode on mobile.
Thanks
What weather map are you referring to?
I’m using the:
- Weather card (with hourly instead of day to day)
- Sun Card (HACS)
- Clock Weather Card (HACS)
1 Like
Very beautiful and practical! Can you share your code?
@rhysb card mod doesn’t seem to work on stack-in-card? How to achieve something like the following with mushroom cards then?
I want cards stacked like that, separated by a line.
Now I tried stacking 2 template cards horizontally, and then stacking those vertically, but the line border-bottom does not work.
First try
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-template-card
# left aligned title card 1
- type: custom:mushroom-template-card
# right aligned numbers card 1
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin-right: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 54px;
}
- type: custom:stack-in-card
cards:
# card 2
Then I though about a rough setup like this, but the lines are not connected:
Second try
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
# left aligned title 1
card_mod:
style: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px 54px;
}
- type: custom:mushroom-template-card
# left aligned title 2
# etc
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
# right aligned numbers 1
card_mod:
style:
mushroom-state-info$: |
* {
text-align: end;
}
.: |
ha-card {
margin-right: 8px;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
# right aligned numbers 2
# etc
card_mod:
style: |
ha-card {
box-shadow: none;
}
My second try looks something like this. It’s just not quite neat enough yet.
Hope you can help with some CSS magic 
2 Likes
Anything in particular you’re looking for?