Still the same behaviour. Anyway thanks. I will add style to all my popup cards. 
1 Like
trying to change the background of the conditional-chips in the top right corner kinda like in the screenshot
if i use --chip-background: whatever color it obviously only colors the single chips, but i want it to like like a bar/area.
maybe someone got an idea
type: vertical-stack
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
--ha-card-border-radius: 0px;
}
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
background: none;
--ha-card-box-shadow: 0px;
}
icon: |-
{% set mode = states('sensor.personhome') %}
{% if mode == '1' %}
mdi:account
{% elif mode == '2' %}
mdi:account-supervisor
{% elif mode == '3' %}
mdi:account-group
{% else %}
mdi:account
{% endif %}
entity: group.home
badge_icon: >-
{{ 'mdi:home' if is_state(entity,'home') else
'mdi:home-export-outline' }}
badge_color: '{{ ''green'' if is_state(entity,''home'') else ''red'' }}'
icon_color: '{{ ''white'' if is_state(entity,''home'') else ''disabled'' }}'
tap_action:
action: navigate
navigation_path: person
- type: custom:mushroom-chips-card
alignment: end
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-box-shadow: none;
--chip-spacing: -5px;
--chip-border-radius: 10px;
}
chips:
- type: conditional
conditions:
- entity: binary_sensor.lueften
state: 'on'
chip:
type: template
entity: binary_sensor.lueften
icon: mdi:water-percent
icon_color: red
tap_action:
action: navigate
navigation_path: humidity
- type: conditional
conditions:
- entity: vacuum.roborock_vacuum_s5
state_not: docked
chip:
type: template
double_tap_action:
action: none
icon: mdi:robot-vacuum
icon_color: green
hold_action:
action: none
entity: vacuum.roborock_vacuum_s5
- type: conditional
conditions:
- entity: sensor.hacs
state_not: '0'
chip:
type: template
double_tap_action:
action: none
icon: fas:store
tap_action:
action: navigate
navigation_path: /hacs
hold_action:
action: none
icon_color: orange
- type: conditional
conditions:
- entity: binary_sensor.home_assistant_versions_update_available
state_not: 'off'
chip:
type: template
double_tap_action:
action: none
entity: binary_sensor.home_assistant_versions_update_available
icon: mdi:package
icon_color: orange
hold_action:
action: none
tap_action:
action: navigate
navigation_path: /config/dashboard
- type: conditional
conditions:
- entity: sensor.devices_with_low_battery
state_not: '0'
chip:
type: template
entity: sensor.devices_with_low_battery
icon: mdi:battery-alert
icon_color: red
tap_action:
action: navigate
navigation_path: batteries
- type: conditional
conditions:
- entity: fan.ventilator
state: 'on'
chip:
type: template
double_tap_action:
action: none
entity: fan.ventilator
icon: mdi:fan
icon_color: green
tap_action:
action: none
hold_action:
action: none
- type: conditional
conditions:
- entity: switch.adguard_filtering
state: 'off'
chip:
type: template
double_tap_action:
action: none
icon: mdi:shield-alert
icon_color: blue
tap_action:
action: navigate
navigation_path: raspberry-pi
hold_action:
action: none
- type: conditional
conditions:
- entity: switch.mase_pc
state: 'on'
chip:
type: entity
entity: switch.mase_pc
icon_color: blue
content_info: none
icon: mdi:monitor
tap_action:
confirmation:
text: PC ausschalten?
action: call-service
service: hassio.addon_stdin
data:
addon: core_rpc_shutdown
input: Mase-PC
hold_action:
action: none
double_tap_action:
action: none
...
...
...
var() is for when you want to use the value of a variable. For assigning a value to a variable you would just use --rgb-state-media-player: 72, 133, 237;.
2 Likes
I’ve been quietly following the development of the Mushroom Cards in addition to the beautiful community adaptations available in this thread. Beautiful work, truly.
I’ve ran into an issue. I wish to use a dashboard in kiosk mode and hide the header, but have the possibility to edit the dashboard. I wish to emulate the following button with a Mushroom chip.
I’ve noticed the URL changes when you press the button and have tried to create an Action chip with the URL, but I still wont be in Edit Dashboard mode unless I manually refresh the page after pressing the chip. I’ve looked at the process via Inspect Element and seen that some classes get added to the dashboard when I press the original Edit Dashboard button. Any way to emulate these with card mod or similar?
Hi
Thank you. I actually got it working eventually by looking at @Cadster post just after your post about badges on chip cards but your way above is alot cleaner. So thank you and sorry for delay, I will go with your way moving forward 
Its amazing what you and the community can do.
1 Like
Many, many thanks for your help!!
1 Like
Hello
if you can wait a few days i am working on a similar card. I am developing a work that I have done before, especially for android tv. This new card will be a remote control card. You will be able to see and control all the images playing on your TV.
3 Likes
for that i am happy to wait … the mockups look great
Does anyone know how to remove those spaces ?
type: custom:vertical-stack-in-card
cards:
- type: conditional
conditions:
- entity: sensor.plex_lauflix
state: '0'
card:
type: custom:mushroom-title-card
subtitle: >-
{% set cnt = states("sensor.tautulli_watching") | int(0) %}{% if cnt >=
0%}🎦{{ states.sensor.tautulli_watching.state }} {{ 'personen kijken' if
cnt> 1 else 'persoon kijkt' }} naar plex{% endif %}
subtitle_tap_action:
action: navigate
navigation_path: /nieuwe-dashboard/plex
- type: custom:mushroom-title-card
subtitle: >-
{% if states.update | selectattr('state', 'eq', 'off')
|map(attribute='entity_id') | list %}Er is een update beschikbaar!{% endif
%}
subtitle_tap_action:
action: navigate
navigation_path: /nieuwe-dashboard/updates
- type: conditional
conditions:
- entity: light.all
state: 'on'
card:
type: custom:mushroom-title-card
title: ''
subtitle: >-
{% if states.light | rejectattr('attributes.entity_id', 'defined') |
selectattr('state', 'eq', 'on') | list | count != 0 %}{% set light_count
= states.light | rejectattr('attributes.entity_id', 'defined') |
selectattr('state', 'eq', 'on') | list | count %}{% if light_count == 1
%}💡1 Lamp staat aan {% else %}💡{{ light_count }} Lampen staan aan {%
endif %}{% endif %}
subtitle_tap_action:
action: navigate
navigation_path: /nieuwe-dashboard/lampen
My variation of your idea @rhysb. Sticky header and media player with popup.
Like always good job. Many thanks. I do not use node red so it is based on your previous version.
Question about this part (I used variables to have different colors in dark and light mode):
mmp-progress$: |
paper-progress {
--paper-progress-container-color: rgba(var(--progress-bar), 0.08) !important;
--paper-progress-active-color: rgba(var(--progress-bar), 0.6) !important;
}
and theme file:
Mushroom:
# Nothing here as it's the default HA theme since 2022.11
modes:
light:
progress-bar: 0, 0, 0
dark:
progress-bar: 255, 255, 255
Is it any way to do that just in card mod?
10 Likes
I use the mushroom entity card with waze integration. Previously, like the default entity card, it used to give the travel time and units. For example “13 min”
However, ever since some update, it now gives it as HH:MM:SS - so instead of saying “13 min” it says “13:00”
Any ideas of how to change this back?
how did you manage that the mediaplayer at the bottom used the full screen width?
1 Like
Waiting on this … awesome work!
mind sharing your navigation bar?
type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
- type: template
icon: mdi:home
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
- type: template
icon: mdi:lan
tap_action:
action: navigate
navigation_path: network
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: none;
--chip-spacing: 0;
--chip-height: 42px;
--chip-border-width: 0px;
margin-left: 10px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.epson_xp_760_series
state_not: unavailable
chip:
type: template
icon_color: disabled
icon: mdi:printer
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
{% if is_state("sensor.epson_xp_760_series", "printing") %}
animation: blink 1s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: switch.desktop
state: 'on'
chip:
type: template
icon_color: |-
{% if is_state("input_boolean.home_mode", "off") %}
red
{% else %}
disabled
{% endif %}
icon: mdi:desktop-classic
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |-
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
{% if is_state("input_boolean.home_mode", "off") %}
animation: blink 1s linear infinite;
{% endif %}
}
- type: conditional
conditions:
- entity: sensor.glances_cpu_load
state_not: '0'
chip:
type: template
icon_color: disabled
icon: mdi:nas
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: binary_sensor.rpi_power_status
state: 'off'
chip:
type: template
icon_color: disabled
icon: mdi:home-assistant
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
- type: conditional
conditions:
- entity: switch.adguard_protection
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:shield-check
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
alignment: end
card_mod:
style:
mushroom-template-chip:
$: |
mushroom-chip {
cursor: default !important;
}
.: |
ha-card {
--chip-background: none;
--chip-spacing: 0;
--chip-padding: 0.4em 0 0 0 ;
--chip-height: 30px;
--chip-border-width: 0px;
}
card_mod:
style: |
:host {
position: sticky;
top: var(--header-height);
z-index: 1;
}
ha-card {
background: rgba(var(--rgb-card-background-color), 0.6);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 4px 0 4px 0;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.6);
border-radius: 0px;
border-width: 0px;
margin: -8px -8px 0px -8px;
border-bottom-width: 1px;
}
1 Like
I’m trying to build my “custom vacuum”-card to select a specific room to be cleaned for my neato botvac.
I’m trying to add an select card on top of the vacuum card which is probably the wrong way because the pop-up is not overlayed
Using the select-card its a real pop-up.
Currently i’m using this code.
type: custom:stack-in-card
cards:
- type: custom:mushroom-vacuum-card
entity: vacuum.robbi
commands:
- start_pause
- return_home
- stop
name: Robbi
icon_animation: true
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}a
- type: custom:mushroom-select-card
entity: input_select.robbi_raume
icon_type: none
secondary_info: none
primary_info: none
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
width: 50%;
--ha-card-border-width: 0;
}
- type: custom:mushroom-entity-card
entity: vacuum.robbi
icon: mdi:texture-box
icon_color: red
primary_info: none
secondary_info: none
tap_action:
action: call-service
service: neato.custom_cleaning
data:
mode: 2
navigation: 2
category: 4
zone:
'[object Object]': null
target:
entity_id: vacuum.robbi
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
right: 0px;
width: 13%;
--ha-card-border-width: 0;
}
Any idea what to do? Or maybe someone created such a mushroom-style-card.
2 Likes
Might not be quite what you want, but what I do is have a helper switch on the dashboard which toggles on/off the kiosk mode hide function. That way I can use hidden and when I want to edit, hit the toggle, top bar shows, edit away, then toggle to hide again.
The hide function is a feature of kiosk mode. Like this
kiosk_mode:
entity_settings:
- entity:
input_boolean.hide_sidebar: 'on'
hide_sidebar: true
hide_header: true
hello @rhysb
I asked this question a while ago but then did not go further with this question. Hopefully this can be realized?
thanks in advance!
hello first of all very nice that you have made this media player very nice and handy i have adjusted it a bit to my taste now i have a question is it possible if i use my sonos for tv sound then i get black in the screen where normally the picture comes from the song would it be possible to do this based on everything the media title is on TV is this status so know it but just don’t know how to add it? thanks in advance!
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_beam
icon: mdi:play
use_media_info: true
use_media_artwork: false
show_volume_level: true
media_controls:
- play_pause_stop
- previous
- next
fill_container: false
card_mod:
style:
mushroom-state-info$: |
.primary:before {
content: "{{ (state_attr(config.entity, "friendly_name")) }} - ";
}
.: |
mushroom-shape-icon {
display: flex;
{% set media_type = state_attr(config.entity, 'media_title') %}
{% if media_type == 'TV' %}
--card-mod-icon: mdi:television-classic;
animation: flicker 1s linear infinite alternate;
{% else %}
--card-mod-icon: mdi:music;
animation: beat 1.3s ease-out infinite both;
{% endif %}
{{ 'animation: none;' if not is_state(config.entity, 'playing') }}
}
@keyframes flicker {
0%, 31.98%, 32.98%, 34.98%, 36.98%, 39.98%, 67.98%, 68.98%, 95.98%, 96.98%, 97.98%, 98.98%, 100% { --icon-color: rgba(var(--rgb-indigo), 1); }
32%, 33%, 35%, 36%, 37%, 40%, 68%, 69%, 96%, 97%, 98%, 99% { --icon-color: rgba(var(--rgb-indigo), 0.6); }
}
@keyframes beat {
0%, 60% { --icon-symbol-size: 21px; }
5%, 17%, 57% { --icon-symbol-size: 22px; }
10%, 20%, 51% { --icon-symbol-size: 23px; }
25%, 45% { --icon-symbol-size: 24px; }
30%, 39% { --icon-symbol-size: 25px; }
33% { --icon-symbol-size: 26px; }
}
ha-card {
--ha-card-border-width: 0;
}
mushroom-state-info$: |
.primary:before {
content: "{{ (state_attr(config.entity, "media_artist")) }} - ";
}
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
background: url('/local/images/idle.png') center no-repeat;
{% if not is_state(config.entity, 'idle') %}
background: url( '{{ state_attr(config.entity, "entity_picture") }}') center no-repeat;
{% endif %}
background-size: contain;
margin: 4px 4px 16px;
filter: drop-shadow(4px 4px 6px rgba(0, 0, 0, 0.5));
border-radius: var(--control-border-radius);
{% set media_type = state_attr(config.entity, 'media_content_type') %}
{% if media_type == 'music' %}
aspect-ratio: 16 / 9;
{% elif media_type == 'movie' %}
aspect-ratio: 2 / 3;
{% else %}
aspect-ratio: 1 / 1;
{% endif %}
}
- type: conditional
conditions:
- entity: media_player.sonos_beam
state_not: 'off'
- entity: media_player.sonos_beam
state_not: idle
card:
entity: media_player.sonos_beam
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: true
info: true
progress: false
controls: true
more_info: false
type: custom:mini-media-player
toggle_power: false
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(var(--mush-rgb-indigo, 63, 81, 181), 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 12px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(var(--mush-rgb-indigo, 63, 81, 181));
--mmp-border-radius: 12px !important;
--ha-card-border-width: 0;
}
card_mod:
style: |
ha-card:before {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
content: "";
position: absolute;
height: 100%;
width: 100%;
background: url('/local/idle_art.png') center no-repeat;
{% if not is_state('media_player.sonos_beam', 'idle') %}
background: url( '{{ state_attr('media_player.sonos_beam', "entity_picture") }}' ) center no-repeat;
{% endif %}
filter: blur(150px) saturate(200%);
background-size: 100% 100%;
}
ha-card {
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
}
here are the possible if sonos is on tv source
playing
source_list: TV
group_members: media_player.sonos_beam, media_player.sonos_ra
volume_level: 0.04
is_volume_muted: false
media_content_id: x-sonos-htastream:RINCON_48A6B83ABBD601400:spdif
media_content_type: music
media_title: TV
shuffle: false
repeat: off
queue_size: 1
icon: phu:sonos-beam
friendly_name: Sonos Beam
supported_features: 981567
source: TV
So if the source TV is there will be an image of TV that I have in the www folder, so if you did that, if nothing is playing, but it won’t work, hopefully you get it now?
I tried to add a radial bar for valve opening to a climate card. I cannot find what to use for the icon background color. Currently i get the card background, but i want the colored icon background.
Which variable is the correct one?
type: custom:mushroom-climate-card
entity: climate.thermostat_kueche_climate
name: Küche
fill_container: true
show_temperature_control: true
collapsible_controls: true
hvac_modes:
- auto
- heat
- 'off'
layout: horizontal
icon: bha:thermostat
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 75%),
conic-gradient(rgb(var(--rgb-orange))
{{ (states('sensor.thermostat_kueche_valve_state') | float) | round(0) }}% 0%,
var(--card-background-color) 0% 100%);
transform: rotateY(180deg);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
Second try was to add the valve bar to an climate card modified to show the temperature rather then the icon.
I managed to show the bar, but it was not correctly centered.
type: custom:mushroom-climate-card
entity: climate.thermostat_kueche_climate
name: Küche
icon: none
fill_container: true
show_temperature_control: true
collapsible_controls: true
hvac_modes:
- auto
- heat
- 'off'
layout: horizontal
tap_action:
action: more-info
card_mod:
style:
mushroom-shape-icon$: |
.shape:after {
content: "{{ states('sensor.t1_temperature') }}°";
font-size: 14px;
position: absolute;
}
.shape {
{% set mode = states('config.entity') %}
--shape-color: var(--rgb-
{%- if mode == 'heat' -%}
orange
{%- elif mode == 'off' -%}
blue
{%- else -%}
grey
{% endif %}), 0.2);
}
.: |
mushroom-badge-icon:after {
content: "{{ states('sensor.thermostat_kueche_valve_state') }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-black));
color: rgb(var(--rgb-white));
font-weight: bolder;
border-radius: 50%;
top: 0;
width: 100%;
height: 100%;
font-size: 0.8em;
}
If i try the same for a template card with adaptive background color i dont know how to combine them.
I want the bar to use the icon color on the icon background color.
type: custom:mushroom-template-card
primary: AZ {{ states("sensor.atc_t4_1b9d_temperature") }}°C
secondary: |-
{{ states("sensor.thermostat_kueche_temperatur") }}°C - {{
states("sensor.thermostat_kueche_valve_state") }}%
entity: sensor.thermostat_kueche_temperatur
icon: mdi:pot-steam
layout: horizontal
tap_action:
action: more-info
icon_color: |
{% set battery_level = states(entity) %}
{% if battery_level < '15' %}
blue
{% elif battery_level < '17' %}
teal
{% elif battery_level < '18' %}
green
{% elif battery_level < '19' %}
light-green
{% elif battery_level < '20' %}
lime
{% elif battery_level < '21' %}
yellow
{% elif battery_level < '22' %}
amber
{% elif battery_level < '24' %}
orange
{% elif battery_level < '27' %}
deep-orange
{% else %}
red
{% endif %}
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: radial-gradient(var(--card-background-color) 60%, transparent 0%), conic-gradient(config.icon_color {{ (states('sensor.thermostat_arbeitszimmer_valve_state') | float) | round(0) }}% 0%, var(--card-background-color) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
{% set battery_level = states(config.entity) %}
{% if battery_level < '15' %}
background: rgba(var(--rgb-blue),0.30);
{% elif battery_level < '17' %}
background: rgba(var(--rgb-teal),0.30);
{% elif battery_level < '18' %}
background: rgba(var(--rgb-green),0.30);
{% elif battery_level < '19' %}
background: rgba(var(--rgb-green),0.30);
{% elif battery_level < '20' %}
background: rgba(var(--rgb-lime),0.30);
{% elif battery_level < '21' %}
background: rgba(var(--rgb-yellow),0.30);
{% elif battery_level < '22' %}
background: rgba(var(--rgb-amber),0.30);
{% elif battery_level < '24' %}
background: rgba(var(--rgb-orange),0.30);
{% elif battery_level < '27' %}
background: rgba(var(--rgb-deep-orange),0.30);
{% elif battery_level == 'unknown' %}
background: rgba(var(--rgb-secondary-text-color),0.30);
{% else %}
background: rgba(var(--rgb-red),0.5);
{% endif %}
}
Maybe someone can help me
1 Like
icon_color is not defined in the mushroom-climate-card, so you can’t use {{ config.icon_color }}. Change it to background: var(--shape-color); instead.