one last one, how do i remove the entity shape colour?
Hey Tempus, happy days! I stole the one from Mini Media Player.
Mushroom Media Player with Progress Bar:
type: custom:stack-in-card
cards:
- type: custom:mushroom-media-player-card
entity: media_player.office
name: Media Player
icon: mdi:play
use_media_artwork: false
fill_container: false
use_media_info: true
show_volume_level: false
media_controls:
- previous
- play_pause_stop
- next
collapsible_controls: true
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.office
state_not: 'off'
- entity: media_player.office
state_not: idle
card:
entity: media_player.office
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(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 0px 12px 12px;
--mmp-progress-height: 42px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(63, 81, 181);
--ha-card-border-radius: 12px;
}
You can adjust the progress bar height with --mmp-progress-height:
7 Likes
Add this to the Mushroom Card:
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
2 Likes
Do you know how to fix this issue I’m having, can’t get the fan icons to show up.
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 14px !important;
}
primary: Thermostat
secondary: |
Currently: {{ state_attr('climate.3family_room', 'hvac_action') }}
icon: |-
{% set mode = states('climate.3family_room') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: |-
{% set status = state_attr('climate.3family_room','hvac_action') %}
{% if status == 'off' %}
grey
{% elif status == 'cooling' %}
blue
{% elif status == 'heating' %}
red
{% else %}
grey
{% endif %}
tap_action: none
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 10px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #6f6f6f;
}
entity: climate.3family_room
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: #2d2d2d;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.3family_room
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: custom:mushroom-chips-card
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0 0.2em
}
alignment: justify
chips:
- type: template
content: '{{state_attr(entity, ''current_temperature'')}} °F'
entity: climate.3family_room
icon: mdi:home-thermometer
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='cool' %}
blue
{% elif state=='heat' %}
red
{% else %}
grey
{% endif %}
style: |
ha-card {
margin-left: 6px;
}
- type: template
entity: climate.3family_room
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: weather
entity: weather.home
show_conditions: true
show_temperature: false
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Humidity'
entity: sensor.vaughan_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
- type: template
icon: |-
{% if is_state(entity, 'off') %}
mdi:chevron-down
{% elif is_state(entity, 'on') %}
mdi:chevron-up
{% endif %}
tap_action:
action: toggle
entity: input_boolean.thermostat_dropdown
icon_color: disabled
style: |
ha-card {
--chip-icon-size: 1em
}
- type: conditional
conditions:
- entity: input_boolean.thermostat_dropdown
state: 'on'
card:
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.3family_room_temperature
primary_info: state
secondary_info: name
name: Inside
icon_color: green
- type: custom:mushroom-entity-card
entity: sensor.vaughan_temperature
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.6px;
--st-mode-background: #2d2d2d;
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.3family_room
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
Auto low:
name: Auto
icon: mdi:fan-auto
Low:
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.3family_room_temperature
name: Inside Temperature
color: '#4caf50'
- entity: sensor.vaughan_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
5 Likes
You can dynamically change the color of the Chip icon like this:
card_mod:
style:
mushroom-conditional-chip:nth-child(1):
mushroom-template-chip$: |
ha-icon {
{% set r = state_attr('light.lounge_cabinet_light', 'rgb_color')[0] %}
{% set g = state_attr('light.lounge_cabinet_light', 'rgb_color')[1] %}
{% set b = state_attr('light.lounge_cabinet_light', 'rgb_color')[2] %}
color: rgb( {{r}}, {{g}}, {{b}} ) !important;
}
.: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
Change the number of nth-child(1): to address each chip.
2 Likes
Okay so I took a deeper look into it and its also not working on safari on the iphone. I think theres an CSS / safari problem, I found several threads on the internet about grayscaling and problems on safari, but no solution works for me.
Is anyone got this to work?
Maybe your thermostat doesn’t support it?
icon_color: >-
{% if (state_attr('sensor.woonkamer_temperature','temperature') | int < 20) %} green
{% elif (state_attr('sensor.woonkamer_temperature','temperature') | int => 20) %} red
{% else %} cyan
{% endif %}
Damn. Yeh it would be nice lol
1 Like
Very cool, Thank you!!!
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
background-color: rgba(255, 255, 255, .1);
}
cards:
- type: custom:mushroom-media-player-card
entity: media_player.sonos_pair
name: Media Player
icon: mdi:play
use_media_artwork: true
fill_container: false
use_media_info: true
show_volume_level: true
media_controls:
- on_off
collapsible_controls: true
tap_action:
action: toggle
- type: conditional
conditions:
- entity: media_player.sonos_pair
state_not: "off"
- entity: media_player.sonos_pair
state_not: idle
card:
entity: media_player.sonos_pair
hide:
icon: true
name: true
runtime: true
source: true
power: true
state_label: true
volume: false
info: true
progress: false
controls: false
more_info: false
type: custom:mini-media-player
toggle_power: true
group: true
card_mod:
style:
mmp-progress$: |
paper-progress {
{{ '--paper-progress-container-color: rgba(63, 81, 181, 0.2) !important;' if is_state(config.entity, 'playing') }}
}
.: |
ha-card {
margin: 30px 12px 12px;
--mmp-progress-height: 10px !important;
height: var(--mmp-progress-height);
--mmp-accent-color: rgb(255, 170, 0);
--ha-card-border-radius: 2px;
}
3 Likes
This has been asked before but I can’t find it? Any idea why I’m getting this thin line using the stack-in-card?!
This is the number of people home. I use the following for the badge icon.
{% set athome = states.person|selectattr('state', '==', 'home')|list|count %} {% if athome >= 0 %}
{{ 'mdi:numeric-' + athome|string + '-circle' }}
{% endif %}
2 Likes
Any ideas on combining or altering mushroom media card attributes? In my case, my living room tv is a samsung smart tv and connected to it, I use my nvidia shield. Id love to use the media card with the entity as my shield tv, so i get all the playback info and artwork, but be able to use the volume slider to control my samsung tv, and not the volume on the shield tv, which only controls the sound on the shield specifically and not my actual tv volume. I hope this makes sense. Something ive struggled with alot as I actually really enjoy using the HA app to control my tv via media cards. Open to all ideas here, maybe its something really easy im just missing.
Thank you mate.
One last one if im allowed 
How do i mask or cut the bottom of the Chip circle so the top section where the image is cuts it off?
So i can learn, how do know which CSS object top use? is there a list somewhere??
type: custom:stack-in-card
cards:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Back Patio
secondary: >-
{{ states('sensor.bom_beerburrum_humidity') | round(0) }}% | {{
states('sensor.bom_beerburrum_current_temperature') | round(0) }}°C
icon: mdi:grill
entity: light.area_back_patio_lights_group
icon_color: '{{ ''white'' if is_state(entity, ''on'') else ''white'' }}'
tap_action:
action: toggle
hold_action:
action: more-info
double_tap_action:
action: more-info
fill_container: true
layout: horizontal
card_mod:
style: |
:host {
--mush-icon-size: 130px;
height: 100px;
background: url('https://img.freepik.com/free-vector/terrace-with-mountain-lake-view-home-villa-hotel-area-with-sofa-ottoman-stand-wooden-patio-with-scenery-nature-landscape-background-with-rocks-water-pond-cartoon-vector-illustration_107791-11419.jpg?t=st=1658807264~exp=1658807864~hmac=8ec279678398cc8813f10112ecb27e57af9e4d4da6e42611c78c0a6e290e0946&w=1380') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color), 0.9);
margin-left: -33px !important;
}
mushroom-shape-icon {
--shape-color: rgba(var(--rgb-{{ 'orange' if is_state('light.area_back_patio_lights_group', 'on') else 'grey' }}), 0.3) !important;
}
- square: false
columns: 9
type: grid
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: |-
{% set state=states('light.back_patio_light_switch') %}
{% if state=='on' %}
hue:bulb-group-ceiling-round
{% elif state=='off' %}
hue:bulb-group-ceiling-round
{% elif state=='unavailable' %}
hue:bulb-group-ceiling-round
{% endif %}
entity: light.back_patio_light_switch
icon_color: |-
{% set state=states('light.back_patio_light_switch') %}
{% if state=='on' %}
orange
{% elif state=='off' %}
disabled
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor')%}
{% if state=='on' %}
mdi:door-sliding-open
{% elif state=='off' %}
mdi:door-sliding-lock
{% endif %}
entity: binary_sensor.dining_room_sliding_door_sensor
icon_color: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor')%}
{% if state=='on' %}
orange
{% elif state=='off' %}
green
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
badge_icon: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor_vibration')%}
{% if state=='on' %} mdi:vibrate {% elif state=='off' %}
mdi:vibrate-off {% elif state=='unavailable' %} mdi:vibrate-off {%
endif %}
badge_color: >-
{% set
state=states('binary_sensor.dining_room_sliding_door_sensor_vibration')%}
{% if state=='on' %} orange {% elif state=='off' %} green {% elif
state=='unavailable' %} red {% endif %}
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
icon: >-
{% set
state=states('binary_sensor.void_lounge_sliding_door_sensor')%}
{% if state=='on' %}
mdi:door-sliding-open
{% elif state=='off' %}
mdi:door-sliding-lock
{% endif %}
entity: binary_sensor.void_lounge_sliding_door_sensor
icon_color: >-
{% set
state=states('binary_sensor.void_lounge_sliding_door_sensor')%}
{% if state=='on' %}
orange
{% elif state=='off' %}
green
{% elif state=='unavailable' %}
red
{% endif %}
layout: vertical
badge_icon: >-
{% set
state=states('binary_sensor.void_lounge_sliding_door_sensor_vibration')%}
{% if state=='on' %} mdi:vibrate {% elif state=='off' %}
mdi:vibrate-off {% elif state=='unavailable' %} mdi:vibrate-off {%
endif %}
badge_color: >-
{% set
state=states('binary_sensor.void_lounge_sliding_door_sensor_vibration')%}
{% if state=='on' %} orange {% elif state=='off' %} green {% elif
state=='unavailable' %} red {% endif %}
card_mod:
style: |
mushroom-shape-icon {
--shape-color: none !important;
}
card_mod:
style: |
ha-card {
height: 155px;
background-size: cover;
background-blend-mode: underlay;
background-color: rgba(var(--rgb-card-background-color), 0.1);
{% if is_state('light.area_back_patio_lights_group', 'on') %}
box-shadow: 0 0 7px rgba(255, 152, 0, 0.8);
{% endif %}
}
1 Like
Try This…
type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: grid
square: false
columns: 2
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
padding-bottom: 1px !important;
}
entity: sensor.kaira_ac
primary: Klima
secondary: |
Currently: {{ states('climate.146235046506144_climate') }}
icon: |-
{% set mode = states('climate.146235046506144_climate') %}
{% if mode == 'off' %}
mdi:power
{% elif mode == 'cool' %}
mdi:snowflake
{% elif mode == 'heat' %}
mdi:fire
{% elif mode == 'heat_cool' %}
mdi:autorenew
{% else %}
mdi:home-thermometer
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='off' %} white {% elif
state=='cool' %} blue {% elif state == 'heat' %} red {% else %}
grey {% endif %}
tap_action: none
card_mod:
style: |
ha-card {
background: none;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: vertical-stack
cards:
- type: custom:simple-thermostat
style: |
ha-card {
background: none;
}
ha-card {
background: none;
--st-spacing: 0px;
}
ha-card .current--value {
color: #ffffff;
}
header {
margin-bottom: 12px !important;
padding-bottom: 0px !important;
}
ha-card .thermostat-trigger {
color: #9e9e9e;
}
entity: climate.146235046506144_climate
header:
name: false
icon: false
decimals: '0'
fallback: 'Off'
hide:
temperature: true
state: true
layout:
mode:
names: false
icons: false
headings: false
step: row
step_size: '1'
control: false
card_mod:
style: |
ha-card {
background: none;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: custom:mushroom-chips-card
style: |
ha-card {
background: none;
--chip-box-shadow: none;
--chip-background: none;
margin-top: 30px;
}
alignment: justify
chips:
- type: template
entity: climate.146235046506144_climate
content: |
{{ state_attr(entity, 'fan_mode') }}
icon: mdi:fan
icon_color: green
tap_action: none
- type: weather
entity: weather.home
show_conditions: true
show_temperature: true
- type: template
double_tap_action:
action: none
content: '{{ states(entity) }}% Nem'
entity: sensor.lumi_lumi_weather_1063df07_humidity
icon: mdi:water
icon_color: blue
tap_action:
action: none
hold_action:
action: none
alignment: start
- type: custom:simple-thermostat
style: |
ha-card {
background: none;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 0px;
--st-mode-background: none;
margin-left: 12px;
margin-right: 12px;
}
ha-card .mode-item.active.off {
background: none;
color: #9e9e9e;
}
ha-card .mode-item.active.cool {
background: #1d3447;
color: #2196f3;
}
ha-card .mode-item.active.heat {
background: #472421;
color: #f44336;
}
ha-card .mode-item.active.heat_cool {
background: #493516;
color: #ff9800;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 10px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.146235046506144_climate
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
control:
hvac:
'off':
name: Power
heat:
name: Heat
cool:
name: Cool
heat_cool:
name: Auto
- type: grid
square: false
columns: 3
cards:
- type: custom:mushroom-entity-card
entity: sensor.hue_motion_temp_yatak_odasi
primary_info: state
secondary_info: name
name: Inside
icon_color: green
card_mod:
style: |
ha-card {
background: none;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: custom:mushroom-entity-card
entity: sensor.lumi_lumi_weather_1063df07_temperature
primary_info: state
secondary_info: name
name: Outside
icon_color: blue
card_mod:
style: |
ha-card {
background: none;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1.3px;
--st-mode-background: rgba(255, 152, 0, 0.025);
margin-right: 12px;
}
ha-card .mode-item.active {
background: #263926;
color: #4caf50;
}
ha-card .mode-item.active:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item:hover {
background: #363636;
color: #9e9e9e;
}
ha-card .mode-item {
--st-spacing: 6px;
border-radius: 10px;
}
ha-card .modes {
grid-gap: 12px
}
entity: climate.146235046506144_climate
header: false
setpoints: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: false
names: false
step: row
control:
hvac:
'off': false
heat: false
cool: false
heat_cool: false
fan:
Auto low:
name: Auto
icon: mdi:fan-auto
Low:
name: 'On'
icon: mdi:fan
- type: custom:mini-graph-card
entities:
- entity: sensor.hue_motion_temp_yatak_odasi
name: Inside Temperature
color: '#4caf50'
card_mod:
style: |
ha-card {
background: none;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
- entity: sensor.lumi_lumi_weather_1063df07_temperature
name: Outside Temperature
color: '#2196f3'
y_axis: secondary
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
state: false
legend: false
fill: fade
card_mod: null
style: |
ha-card {
background: transparent;
}
card_mod:
style: |
ha-card {
background: transparent;
--paper-item-icon-active-color: #2196f3;
--paper-item-icon-color: #6f6f6f;
}
mushroom-shape-icon {
--shape-color: none !important;
}
4 Likes
Can someone give the code to change the size of a mushroom chip icon using card mod? Please
How do I change chip icon size?
Hi.
Can somebody tell me if it’s possible to use decluttering-templates together with mushroom ?
I’m not using YAML-mode currently.
I’ve read somewhere to put the decluttering-templates inside the lovelace header - is there some tutorial for that ?
Thanks in advance!
Basically the same thing sadly, your new one is on the right. Weird.
Any code I can just remove to hide those buttons? since they’re not going to work it seems.
Really? I have a nest thermostat.
Any code I can remove at least to hide those buttons since they’re not working?