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
image969
August 15, 2022, 5:48pm
2374
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?!
Dibbler
August 15, 2022, 6:05pm
2375
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
rolfokevin
August 15, 2022, 8:28pm
2376
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
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
berkans
August 15, 2022, 9:59pm
2378
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
image969
August 15, 2022, 11:29pm
2379
Can someone give the code to change the size of a mushroom chip icon using card mod? Please
image969
August 16, 2022, 1:10am
2380
How do I change chip icon size?
Hi.
Can somebody tell me if it’s possible to use decluttering-templates together with mushroom ?
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?
Airyphyla
August 16, 2022, 9:55am
2384
Hi there, thanks alot! I’ve been trying to incorporate this into my latest iteration of cards, sadly without any luck. Would you show me how to get this going in my latest iteration of card? Also, is it possible to have the temperature sensor show up in another color so its more visible?
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: '{{ state_attr(entity, ''friendly_name'') }}'
secondary: '{{ states(''sensor.toon_current_temperature'') | round (1) }} C'
icon: mdi:desktop-tower-monitor
entity: light.geekroom
tap_action:
action: navigate
navigation_path: outside
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_color: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone',
'on') %}
green
{% elif is_state
('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone', 'off') %}
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone',
'on') %}
mdi:motion-sensor
{% elif is_state
('binary_sensor.lumi_lumi_sensor_motion_0afa2202_ias_zone', 'off') %}
{% endif %}
fill_container: true
layout: horizontal
multiline_secondary: true
card_mod:
style: |
mushroom-shape-icon {
{% set r = state_attr(config.entity, 'rgb_color')[0] %}
{% set g = state_attr(config.entity, 'rgb_color')[1] %}
{% set b = state_attr(config.entity, 'rgb_color')[2] %}
--icon-color: rgb( {{r}}, {{g}}, {{b}} ) !important;
--shape-color: rgba( {{r}}, {{g}}, {{b}}, 0.2 ) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.nanoleaf
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:hexagon
- type: conditional
conditions:
- entity: light.lightstrip_upstairs
state: 'on'
chip:
type: template
icon_color: orange
icon: hue:lightstrip
- type: conditional
conditions:
- entity: light.desklamp
state: 'on'
chip:
type: template
icon_color: orange
icon: mdi:desk-lamp-on
- type: conditional
conditions:
- entity: light.hue_iris_1
state: 'on'
chip:
type: template
icon_color: orange
icon: hue:iris
tap_action:
action: none
hold_action:
action: none
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
height: 102px;
background: url('/local/geekroom1.jpeg') center;
background-size: cover;
background-blend-mode: overlay;
background-color: rgba(var(--rgb-card-background-color),
{% if is_state('light.geekroom', 'on') %}
0.2
{% elif is_state('light.geekroom', 'off') %}
0.7
{% endif %}
2 Likes
I tailored that card to my old trane Zwave thermostat. Try setting up just a default simple thermostat card and see if it works then.
Yea it works, so idk why the mushroom dropdown one wouldn’t.
image969
August 16, 2022, 7:40pm
2387
Some of the changes I have made over the last couple of months keep coming back.
I did the normal procedure restarting home assistant ive been upgraded to the latest version since this problem started happening and of course I have cleared my cache in my browser and on my phone.
Every once in a while changes I have made revert back to the way they previously looked. All I have to do is pull down to refresh on my phone and everything looks fine. But this keeps happening.
I am like 0-10 asking this question and I’m really hoping someone replies with a valid answer this time lol
Like I said I tailored the code to my thermostat. Read the Simple Thermostat options on it’s github and tailor the code to suit your nest.
image969
August 17, 2022, 12:14pm
2390
Here are three examples of what keeps happening .
You will see the climate guard not being found
The unavailable badge that normally is not there because I made it invisible
And the up-and-down arrow on the fan card the icons are supposed to be as big as the fan icon. Can someone please help me. I’m getting nowhere asking this question
image969
August 17, 2022, 12:16pm
2391
In fact here are the same three pictures after simply clicking the refresh button. What the problem keeps happening and I cleared my cache 6 million times and again just used a new computer new browser for the first time
Stephman
August 17, 2022, 2:39pm
2392
Hi,
However when creating a new dashboard it creates the standard lovelace template and I do not have the mushroom cards. By the way the new dashboard is not created with the mushroom icon. I’m suspecting I’m not at all creating a mushroom dashboard.
thanks
