Post the full config please including any stacks you have the card in.
Here:
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.stploop_tv
volume_controls:
- volume_set
- volume_mute
- volume_buttons
show_volume_level: true
layout: horizontal
name: ' '
secondary_info: none
media_controls:
- repeat
- next
- play_pause_stop
- previous
- shuffle
- on_off
collapsible_controls: false
card_mod:
style:
mushroom-media-player-volume-control$: |
mushroom-slider {
position: absolute;
left: 68px;
width: 152px !important;
}
Works for me…
Hmm not sure, maybe this works a bit easier for you?
type: vertical-stack
cards:
- type: custom:mushroom-media-player-card
entity: media_player.dimitris_pc
volume_controls:
- volume_set
- volume_mute
- volume_buttons
show_volume_level: true
layout: horizontal
name: ' '
secondary_info: none
media_controls:
- repeat
- next
- play_pause_stop
- previous
- shuffle
- on_off
collapsible_controls: false
card_mod:
style: |
mushroom-state-item {
flex: 0.15;
}
@Faecon Not sure this will achieve the results you were looking for, but with Mushroom I occasionally use .shape:before and .shape:after with ha-state-icon psuedo elements to obtain a second :before and :after for the targeted element. It would require your own if statements as @dimitri.landerloos pointed out and specific shape styling.
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-symbol-size: 75px !important;
--icon-size: 75px !important;
}
.shape:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
margin-top: 11px;
margin-left:4px;
background:green;
}
.shape:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
margin-top: 11px;
margin-left:-40px;
background:yellow;
}
.: |
ha-state-icon:after {
content: "";
height:10px;
width: 10px;
position: absolute;
margin-top: 11px;
margin-left:34px;
background:red;
}
ha-state-icon:before {
content: "";
height:10px;
width: 10px;
position: absolute;
margin-top: 11px;
margin-left: 12px;
background:blue;
}
card_mod:
style: |
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
padding-bottom:28px;
background-color: none;
}
3 Likes
And you can just keep going and going @Faecon.
Its just about positioning the elements right.
type: custom:mushroom-template-card
icon: mdi:test-tube
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: none;
--icon-symbol-size: 75px !important;
--icon-size: 75px !important;
}
.shape:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
bottom: 27px;
right: 32px;
background: yellow;
}
.shape:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
bottom: 27px;
left: 12px;
background: green;
}
.: |
ha-state-icon {
color: transparent !important;
}
ha-state-icon:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 11px;
left: 34px;
background: red;
}
ha-state-icon:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 11px;
left: 12px;
background: blue;
}
mushroom-shape-icon:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 7px;
left: 23px;
background: purple;
}
mushroom-shape-icon:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 25px;
left: 38px;
background: orange;
}
mushroom-state-item:after {
content: "";
height: 10px;
width: 10px;
position: absolute;
bottom: 35px;
left: 34px;
background: lime;
}
mushroom-state-item:before {
content: "";
height: 10px;
width: 10px;
position: absolute;
top: 37px;
left: 19px;
background: aqua;
}
ha-card {
box-shadow: none;
--ha-card-border-width: 0px;
padding-bottom:28px;
background: none;
}
1 Like
2 is more than enough 
2 Likes
You have definitely created an environment where folks should be reluctant to offer their experience/ advice…props to you👍
Say what? I was just building on what you did? Like an improv “yes and” thing…
Sorry if it came across as diminishing your work.
Hello, please how to set if the sensor.load_l1 is greater than 500W to display the entity?
Thank you very much in advance for your help.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Kuchyň
secondary: '{{ states(''sensor.teplomer_obyvak_temperature'') | round(0) }} °C'
icon: mdi:silverware-fork-knife
entity: switch.tasmota_11
tap_action:
action: navigate
navigation_path: master_bedroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
ha-card {
background: none;
border: 0px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: sensor.load_l
state: '> 500'
chip:
type: template
icon_color: disabled
icon: mdi:toaster-oven
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
{% if is_state('group.master_bedroom_lights', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
--ha-card-background: transparent;
--card-mod-icon-color: orange;
border-style: none;
}
Use numeric state instead like this:
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.average_kwh
above: 500
chip:
type: template
2 Likes
Hi, i’m trying to customize the lights card.
I have them setup with auto-entity and by double tapping it opens a popup with all members in the group, however the interaction is not perfect.
What I would like to achieve:
When tapping the icon, it toggles the entire group. So on tap_action but only on the icon and not on the entire card. This to prevent false positives when scrolling or when trying to double_tap.
I would then like a double_tap_action on the rest of the card to open the entire group OR a button which is rendered on the far right. If possible I would like to do this with card_mod and not with stacking cards to make it user friendly with the auto entity and over 70 lights.
My current code:
type: custom:auto-entities
card:
square: false
type: grid
columns: 1
card_param: cards
filter:
include:
- domain: light
entity_id: /group/
options:
type: custom:mushroom-light-card
use_light_color: true
icon_type: icon
show_brightness_control: true
show_color_control: false
collapsible_controls: true
show_color_temp_control: true
fill_container: false
layout: horizontal
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
content:
type: custom:auto-entities
card:
square: false
columns: 1
type: grid
filter:
include:
- group: this.entity_id
options:
type: custom:mushroom-light-card
use_light_color: true
show_brightness_control: true
show_color_control: true
collapsible_controls: true
show_color_temp_control: true
fill_container: false
layout: horizontal
tap_action:
action: toggle
hold_action:
action: more-info
sort:
method: name
show_empty: true
card_param: cards
exclude: []
show_empty: true
I’ve thought of a solution myself, including the auto entity.
I now show 2 light cards covering eachother. For the top one I only show the icon with a tap action and for the lower one the entire card with a double tap action.
If others are interested, hereby the code
type: custom:auto-entities
card:
square: false
type: grid
columns: 2
card_param: cards
filter:
include:
- domain: light
entity_id: /group/
options:
type: custom:stack-in-card
cards:
- type: custom:mushroom-light-card
entity: this.entity_id
show_brightness_control: true
collapsible_controls: true
use_light_color: true
show_color_control: true
tap_action:
action: none
double_tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: ' '
content:
type: custom:auto-entities
card:
square: false
columns: 1
type: grid
filter:
include:
- group: this.entity_id
options:
type: custom:mushroom-light-card
use_light_color: true
show_brightness_control: true
show_color_control: true
collapsible_controls: true
show_color_temp_control: true
fill_container: false
layout: horizontal
hold_action:
action: more-info
sort:
method: name
show_empty: true
card_param: cards
show_color_temp_control: true
layout: horizontal
card_mod:
style: |
ha-card {
position: absolute
top: 0px;
right: 0px;
width: calc(100%);
--ha-card-border-width: 0px;
}
- type: custom:mushroom-light-card
entity: this.entity_id
primary_info: none
tap_action:
action: call-service
service: light.toggle
target:
entity_id: this.entity_id
secondary_info: none
card_mod:
style: |
ha-card {
position: absolute;
top: 0px;
left: 0px;
width: 66px;
color: none;
icon: none;
--ha-card-border-width: 0px;
}
exclude: []
show_empty: true
sort:
method: domain
Is it possible to change the elapsed time from an “about” to a precise time? So if the change was 1 hour and 18 Minutes ago, the tile doesn’t say 1 hour? It is really nerving for the cards I use, as they should show me the elapsed time of running programmes.
Good day, everyone. Thank you for your hard work to make this cards available for HA community. I build my dashboard using different card and everything is working great, but I have a problem with spacing between a first card and the rest of the cards. How I can reduce this ?
type: horizontal-stack
cards:
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout: {}
cards:
- type: custom:mushroom-person-card
entity: person.yevgeniy
primary_info: name
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
width: fit-content;
margin-left: 25%;
top: 10px;
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sm_s918u_battery_state
icon: >-
{% set state=states('sensor.sm_s918u_battery_state') %} {% if
state=='Charging' %}
mdi:cellphone-charging
{% else %}
mdi:cellphone
{% endif %}
icon_color: >-
{% set state=states('sensor.sm_s918u_battery_state') %} {% if
state=='Charging' %}
green
{% else %}
white
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.sm_s918u_battery_level
icon: >-
{% set bl = states('sensor.sm_s918u_battery_level') | int %} {%
if bl < 10 %} mdi:battery-outline {% elif bl < 20 %}
mdi:battery-10 {% elif bl < 30 %} mdi:battery-20 {% elif bl < 40
%} mdi:battery-30 {% elif bl < 50 %} mdi:battery-40 {% elif bl <
60 %} mdi:battery-50 {% elif bl < 70 %} mdi:battery-60 {% elif
bl < 80 %} mdi:battery-70 {% elif bl < 90 %} mdi:battery-80 {%
elif bl < 100 %} mdi:battery-90 {% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown {% endif %}
icon_color: >-
{% set bl = states('sensor.sm_s918u_battery_level') | int %} {%
if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %} red
{% elif bl < 40 %} orange {% elif bl < 50 %} orange {% elif bl <
60 %} orange {% elif bl < 70 %} green {% elif bl < 80 %} green
{% elif bl < 90 %} green {% elif bl < 100 %} green {% elif bl ==
100 %} green {% else %} grey {% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 55px;
margin-left: 60%;
top: -120px;
background: none;
--chip-border-width: 0;
}
- type: custom:layout-card
layout_type: custom:vertical-layout
layout: {}
cards:
- type: custom:mushroom-person-card
entity: person.irina
primary_info: name
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
width: fit-content;
margin-left: 17%;
top: 10px;
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.irinab_iphone_battery_state
icon: >-
{% set state=states('sensor.irinab_iphone_battery_state') %} {% if
state=='Charging' %}
mdi:cellphone-charging
{% else %}
mdi:cellphone
{% endif %}
icon_color: >-
{% set state=states('sensor.irinab_iphone_battery_state') %} {% if
state=='Charging' %}
green
{% else %}
white
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.irinab_iphone_battery_level
icon: >-
{% set bl = states('sensor.irinab_iphone_battery_level') | int %}
{% if bl < 10 %} mdi:battery-outline {% elif bl < 20 %}
mdi:battery-10 {% elif bl < 30 %} mdi:battery-20 {% elif bl < 40
%} mdi:battery-30 {% elif bl < 50 %} mdi:battery-40 {% elif bl <
60 %} mdi:battery-50 {% elif bl < 70 %} mdi:battery-60 {% elif
bl < 80 %} mdi:battery-70 {% elif bl < 90 %} mdi:battery-80 {%
elif bl < 100 %} mdi:battery-90 {% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown {% endif %}
icon_color: >-
{% set bl = states('sensor.irinab_iphone_battery_level') | int %}
{% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl < 30 %}
red {% elif bl < 40 %} orange {% elif bl < 50 %} orange {% elif
bl < 60 %} orange {% elif bl < 70 %} green {% elif bl < 80 %}
green {% elif bl < 90 %} green {% elif bl < 100 %} green {% elif
bl == 100 %} green {% else %} grey {% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 55px;
margin-left: 50%;
top: -120px;
background: none;
--chip-border-width: 0;
}
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout: {}
cards:
- type: custom:mushroom-person-card
entity: person.sonia
primary_info: name
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
width: fit-content;
margin-left: 10%;
top: 10px;
background: none;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.sonia_bolembakhs_iphone_battery_state
icon: >-
{% set
state=states('sensor.sonia_bolembakhs_iphone_battery_state') %} {%
if state=='Charging' %}
mdi:cellphone-charging
{% else %}
mdi:cellphone
{% endif %}
icon_color: >-
{% set
state=states('sensor.sonia_bolembakhs_iphone_battery_state') %} {%
if state=='Charging' %}
green
{% else %}
white
{% endif %}
tap_action:
action: none
hold_action:
action: none
- type: template
entity: sensor.sonia_bolembakhs_iphone_battery_level
icon: >-
{% set bl = states('sensor.sonia_bolembakhs_iphone_battery_level')
| int %} {% if bl < 10 %} mdi:battery-outline {% elif bl < 20 %}
mdi:battery-10 {% elif bl < 30 %} mdi:battery-20 {% elif bl < 40
%} mdi:battery-30 {% elif bl < 50 %} mdi:battery-40 {% elif bl <
60 %} mdi:battery-50 {% elif bl < 70 %} mdi:battery-60 {% elif
bl < 80 %} mdi:battery-70 {% elif bl < 90 %} mdi:battery-80 {%
elif bl < 100 %} mdi:battery-90 {% elif bl == 100 %} mdi:battery
{% else %} mdi:battery-unknown {% endif %}
icon_color: >-
{% set bl = states('sensor.sonia_bolembakhs_iphone_battery_level')
| int %} {% if bl < 10 %} red {% elif bl < 20 %} red {% elif bl
< 30 %} red {% elif bl < 40 %} orange {% elif bl < 50 %} orange
{% elif bl < 60 %} orange {% elif bl < 70 %} green {% elif bl <
80 %} green {% elif bl < 90 %} green {% elif bl < 100 %} green
{% elif bl == 100 %} green {% else %} grey {% endif %}
tap_action:
action: none
hold_action:
action: none
card_mod:
style:
.: |
ha-card {
width: 55px;
margin-left: 43%;
top: -120px;
background: none;
--chip-border-width: 0;
}
- type: custom:layout-card
layout_type: custom:horizontal-layout
layout: {}
cards:
- type: custom:mushroom-alarm-control-panel-card
entity: alarm_control_panel.alarmo
states:
- armed_home
- armed_away
fill_container: true
layout: horizontal
primary_info: state
secondary_info: none
icon_type: entity-picture
card_mod:
style:
mushroom-state-item$: |
.container {
display: flex;
flex-direction: column !important;
}
mushroom-state-info$: |
.container {
width: 83%;
align-items: center;
}
mushroom-shape-avatar$: |
.picture {
display: flex;
border-radius: 50%;
{% if states(config.entity) == 'home' %}
animation: pinggreen 6s infinite;
{% else %}
animation: pingred 6s infinite;
{% endif %}
}
@keyframes pinggreen {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
@keyframes pingred {
0% {box-shadow: 0 0 5px 3px rgba(var(--rgb-red), 0.9);}
100% {box-shadow: 0 0 5px 15px transparent;}
}
.: |
ha-card {
--icon-size: 72px;
width: fit-content;
margin-left: 30%;
top: 10px;
background: none;
}
card_mod:
style: |
ha-card {
height: 80px !important;
}
Thank you in advances for help.
I am still worried if the sensor sensor.pv_power is greater than 1W so that the color of the icon lights up.
Thank you very much.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Goodwe Inverter
secondary: '{{ states(''sensor.inverter_temperature_air'') | round(1) }} °C'
icon: mdi:solar-power-variant
entity: sensor.pv_power
tap_action:
action: navigate
navigation_path: /lovelace/fve
hold_action:
action: toggle
icon_color: >-
{{ 'orange' if is_state(entity, '> 1')
else 'disabled' }}
fill_container: true
layout: horizontal
multiline_secondary: false
i’m tried also last configuration and shows the same result:
But if i press the speaker icon changed look but power icon has hide.
why i have this behavior?
thanks for time you dedicate to me
Yes the media player device needs to be on for it to show the slider. That is standard behaviour with the mushroom cards. To turn the media player back off you just press the icon normally.
This should work:
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Goodwe Inverter
secondary: '{{ states(''sensor.inverter_temperature_air'') | round(1) }} °C'
icon: mdi:solar-power-variant
entity: sensor.average_kwh
tap_action:
action: navigate
navigation_path: /lovelace/fve
hold_action:
action: toggle
icon_color: |-
{% if states(config.entity) | float > 1 %}
orange
{% else %}
disabled
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: false
2 Likes
Post the code for the card. Are you using an entity card, are you using a template card, etc. I dont know so i cant help 
Sorry, here is one of the Cards:
type: conditional
conditions:
- condition: state
entity: binary_sensor.waschmaschine_lauft
state: 'on'
card:
type: tile
entity: binary_sensor.waschmaschine_lauft
vertical: true
name: Waschmaschine
color: blue
state_content:
- last-changed
- sensor_value
tap_action:
action: none
icon: mdi:washing-machine