Which cameras are you using?
I couldnt see any examples of how to fix up the mushroom light card when using type: custom:fold-entity-row
Code below image
type: custom:fold-entity-row
head:
type: section
label: Colour Changing Lights
icon: mdi:lightbulb-group
entities:
- type: custom:mushroom-light-card
entity: light.front_balcony_wall_lamps_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.front_balcony_downlight
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.front_corner_downlight
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.front_patio_downlights_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.front_patio_pendant_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.floodlight_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.entryway_downlight
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.stairway_landing_downlight
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.fireplace_led_strip_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.mouse_lamp_light
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.master_bedroom_bedside_lamps_group
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
- type: custom:mushroom-light-card
entity: light.upstairs_lounge_lamp
use_light_color: true
show_brightness_control: true
show_color_temp_control: true
show_color_control: true
collapsible_controls: true
Good morning, already shared. Check out Daros’ posts in this thread and you’ll even find different versions.
have a beautiful Sunday
Moss
1 Like
thank you. it worked.
1 Like
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
4 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