I’ve added one for Air Purifier too 
3 Likes
Hm still unable to get either of these 2 to work.
You need to change the border-radius, like this:
card_mod:
style: |
mushroom-shape-icon {
display: flex;
animation: cool 15s ease-in-out infinite;
border-radius: 50%;
}
@keyframes cool {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-cyan), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
Like this:
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
Just remove the card-mod at the bottom then. This one:
card_mod:
style: |
ha-card {
background: transparent;
--ha-card-box-shadow: none;
}
If I do that I get the shadow around the stack in card.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
mushroom-state-info$: |
.primary {
text-align: center;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
I only want the shadow around the mushroom cards.
Odd, that didn’t work either.
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[te]mperature/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
- type: custom:auto-entities
card:
type: entities
filter:
include:
- area: Temperature Sensors
entity_id: /[hu]midity/
options:
type: custom:mushroom-template-card
primary: '{{ states[entity].name }}'
secondary: '{{ states(entity) | title }}'
picture: null
hold_action:
action: toggle
double_tap_action:
action: more-info
layout: null
tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.primary {
text-align: center;
}
.: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;
}
ha-card {
background: transparent;
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2px;
--icon-border-radius: 0;
}
exclude: []
Your text is longer than the width of the card…
Legend, ta.
1 Like
Oops that worked when I shrunk it.
Any idea about the box shadow of the stack-in-card? I want to keep the mushroom card shadow but not the stack-in-card
1 Like
Ohw that it’s perfect thank you
1 Like
Yeah. Kinda fixed it. But it doesn’t yet take into account if the light IS NOT an rgb light.
So, color lights works fine. But the slider cant read normal none rgb lights as they are brightness only I guess.
Looking at you @rhysb
Edit: code updated twice
code for card, two in one :D
type: horizontal-stack
cards:
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.bella_ledlight
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
primary_info: none
secondary_info: none
fill_container: false
- type: custom:mushroom-light-card
entity: light.bella_ledlight
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon_type: none
name: RGB Light
- type: custom:my-slider-v2
entity: light.bella_ledlight
vertical: true
styles:
card:
- height: 113px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return
"rgba(var(--mush-rgb-disabled), 0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: |
[[[
return `rgb(${entity.attributes.rgb_color})`
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
- type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:mushroom-light-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: false
primary_info: none
secondary_info: none
fill_container: false
- type: custom:mushroom-light-card
entity: light.vardagsrum_golvlampa_tv_soffa_light
use_light_color: true
show_brightness_control: false
show_color_temp_control: false
show_color_control: false
collapsible_controls: true
icon_type: none
name: Normal Light
- type: custom:my-slider-v2
entity: light.vardagsrum_golvlampa_tv_soffa_light
vertical: true
styles:
card:
- height: 113px
- width: 35px
container:
- border-radius: 12px
track:
- background: >
[[[ if (entity.state == "off") return "rgba(var(--mush-rgb-disabled),
0.2)";
else return "rgba(var(--mush-rgb-amber), 0.2)";
]]]
progress:
- background: |
[[[ if (entity.state == "off") return "rgb(var(--mush-rgb-disabled))";
else return "rgb(var(--mush-rgb-amber))";
]]]
thumb:
- width: 0px
card_mod:
style: |
ha-card {
padding: 12px 12px 12px;
}
Can you post a screenshot of what you’re seeing? Mine might be a little different I believe.
Yep, that’s what I have too! I see what you did with the RGB Light. Very impressive! I believe this as close as we can get to it right now but I definitely want to somehow figure out how to include these two buttons below.
That opens the door for me to do pop-ups for individual light controls vs. more-info pop-up to change the color/temperature. Just a better design and UI experience that way.
I want a border like this around the mushroom title card, with a transparent background.
How do I do this?
Where do you want them? Do a photoshop drawing and show me, and I’ll give it a try.
This is what I’m looking for.
One compact card with a vertical slider that controls the temperature and RGB control.
Everything in a normal mushroom light card but with a vertical slider rather then a horizontal slider. All the same controls and options
4 Likes
Hi there. I was curious if you are still using the custom sidebar card for your dashboard or if you have recreated it using a stack? The custom card does indeed look slick but I am having the bottom-card-not-showing or must-refresh-to-see-sidebar issue that others are having in many other threads. I think I may be able to submit a PR for a modified sidebar card that fixes the bottomCard issue by this weekend… but I’ve thought that for the past few weekends before getting busy 
If you are using the custom card, are you having any reliability issues? If not, would you be opposed to sharing how you built the sidebar manually?
Thanks!
@rhysb This morning I found myself thinking that with all the hundreds of customizations you’ve helped this community implement, I wonder what the latest production version of your own mobile view looks like. You had before shared your dark/light versions of the primary home card, room cards, etc., and I wonder if they have changed much over the months? My base model still uses the layout you used back in the “early days” of mushroom and I was curious if you wouldn’t mind to post a refreshed view of what you yourself use? Even if not, thanks again for all of the contribution here - it’s really awesome.
4 Likes