Super thanks,
You`re crazy good at this 
Best regards
Thekholm
1 Like
Background color of the button, as you helped me with the Media card.
For media:
card_mod:
style:
mushroom-media-player-media-control$: |
mushroom-button {
--bg-color: rgba(189, 189, 189, 0.2);
}
.: |
mushroom-button {
--bg-color: rgba(189, 189, 189, 0.2);
}
For climate:
card_mod:
style:
mushroom-media-climate-control$: |
mushroom-button-group {
--bg-color: rgba(189, 189, 189, 0.2);
}
.: |
mushroom-button {
--bg-color: rgba(189, 189, 189, 0.2);
}
But I Dont get the + - temp buttons to change as in the picture, only the mode button:
You can change the Mushroom Climate Card buttons like this:
type: custom:mushroom-climate-card
entity: climate.air_conditioner
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
6 Likes
Love this!! Iām having an issue wiith auto-entities card for some reasonā¦ Iāve also used the one you pasted for batteries but the list will not populate for either oneā¦ I get a big red ! and thatās itā¦
I know this is for the mushroom card but for the life of me I cannot figure out why the auto entity will not populateā¦ any ideas why.
As always Thank you and excellent job!!
1 Like
Share your code and Iāll have a look.
I have all the cards installed and browser refreshedā¦ the popup happens just as it should but the list does not populateā¦
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: group.all_lights
state: 'on'
chip:
type: template
icon: mdi:lightbulb
content: >-
{{ expand(states.group.all_lights) | selectattr( 'state', 'eq', 'on') |
list | count }}
entity: group.all_lights
icon_color: grey
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Lights On
content:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
card_mod:
style: |
ha-card {
padding: 4px 12px !important;
}
- entity_id: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
layout: horizontal
secondary_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-state-light), 0.1);
}
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
Iāam almost there!
How to get the state on the right side and donāt get the shadow of the card? I can get one or the other.
This is what I have know.
type: custom:stack-in-card
cards:
- type: picture-entity
image: >-
https://img.freepik.com/free-photo/modern-stylish-scandinavian-kitchen-interior-with-kitchen-accessories-bright-white-kitchen-with-household-items_169016-4791.jpg?w=1800&t=st=1665996359~exp=1665996959~hmac=cc45d77acabe81fa736605220e5492e14c627ee692fbf5b26416a2316d753cb1
entity: light.matrum
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
entity: light.matrum
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_matrum_card
primary: ''
secondary: ''
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_matrum_card
state: 'on'
card:
type: entities
entities:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style: |
ha-card {
box-shadow: none !important;
}
Do you have a group.all_lights?
Funny thing as luck would have it I do have a group called all_lights
I do get the countā¦ the problem is the popup which it pops up but thatās where I get the error as itās not showing the lights that are onā¦ I get the error
1 Like
That worked, so there doesnāt seem to be anything wrong with the code you are using.
Here is a very simple Popup. Can you see if this works?
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:mushroom
icon_color: red
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Mushroom Test
content:
type: custom:mushroom-template-card
primary: Yay! It Worked
icon: mdi:mushroom
icon_color: red
Yes that works great! 
1 Like
So the issue is not with browser_mod. Try this now:
type: custom:auto-entities
filter:
include:
- group: group.all_lights
state: 'on'
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
exclude: []
card:
type: custom:layout-card
cards: []
layout_type: masonry
sort:
method: friendly_name
Ok for some strange reason I reloaded the browser and itās now workingā¦I donāt get it. I cleared my hisotry and reloaded the browserā¦and it didnāt workā¦ now it doesā¦
I donāt get itā¦ but okay.
Sorry for making you do this for nothingā¦
But Thank you!
1 Like
Try like this:
type: custom:stack-in-card
cards:
- type: picture-entity
image: >-
https://img.freepik.com/free-photo/modern-stylish-scandinavian-kitchen-interior-with-kitchen-accessories-bright-white-kitchen-with-household-items_169016-4791.jpg?w=1800&t=st=1665996359~exp=1665996959~hmac=cc45d77acabe81fa736605220e5492e14c627ee692fbf5b26416a2316d753cb1
entity: light.matrum
show_state: false
show_name: false
camera_view: auto
aspect_ratio: '3'
tap_action:
action: toggle
theme: Mushroom
- type: custom:gap-card
height: 2
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: auto 33px
margin: '-4px -4px -8px -4px;'
cards:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
entity: light.matrum
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''red'' }}'
fill_container: false
multiline_secondary: false
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
- type: custom:mushroom-template-card
entity: input_boolean.mushroom_matrum_card
icon: >-
{{ 'mdi:chevron-up' if is_state(entity, 'on') else 'mdi:chevron-down'
}}
icon_color: black
hold_action:
action: none
card_mod:
style: |
ha-card {
align-items: flex-end;
background: none;
--ha-card-box-shadow: 0px;
}
mushroom-shape-icon {
--shape-color: none !important;
}
- type: conditional
conditions:
- entity: input_boolean.mushroom_matrum_card
state: 'on'
card:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
.: |
ha-card:after {
content: '';
border-bottom: solid 2px rgba(var(--rgb-disabled), 0.2);
margin: 12px 0px -12px;
}
- type: custom:mushroom-template-card
primary: Mushroom
secondary: Name
icon: mdi:mushroom
icon_color: orange
card_mod:
style:
mushroom-state-info$: |
.container {
display: table !important;
}
.secondary {
display: table-cell;
text-align: right;
width: 100%;
font-size: 14px !important;
font-weight: bold !important;
color: var(--primary-text-color) !important;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
2 Likes
Worked! 
I don*t know how to thank you for all help, but THANKS!
Best regards
Thekholm
1 Like
What syntax am I missing to apply opacity to ha-card as well as the blue/red bits to the temp control. If I put a pipe after style : the opacity gets applied but the blue/red bits dont. Thanks (I thought the pipe was yaml line continuation syntax ?)
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: center / cover url('/local/Kitchen.png') no-repeat;
padding: 0px;
opacity: 0.8;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
ha-card {
opacity: 0.8;
}
Perhaps this is what you are trying to do?
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: rgba(var(--rgb-card-background-color), 0.8) url( '/local/Kitchen.png' ) center / cover no-repeat;
padding: 0px;
background-blend-mode: overlay;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
No, not quite. I wanted to apply the opacity to the card with that code itās white. Thanks for your reply.
1 Like
Yeah, sorry. I re-read what you were asking
Try this:
card_mod:
style:
mushroom-climate-temperature-control$:
mushroom-input-number$: |
#container {
background: none;
padding: 0px;
}
#container .button {
height: 100%;
width: 30%;
}
#container .button:nth-child(1) {
background: rgba(var(--rgb-blue), 0.2);
}
#container .button:nth-child(3) {
background: rgba(var(--rgb-red), 0.2);
}
.: |
ha-card {
background: rgba(var(--rgb-card-background-color), 0.8) url( '/local/Kitchen.png' ) center / cover no-repeat;
background-blend-mode: overlay;
}
2 Likes
Thank you! You do so much great stuff and add a lot of value! Should really have your own cookbook with all them templates, tweaks and animations you make. There are so many on here so itās getting hard to track them 
Justā¦ thanks!
2 Likes