This worked. Thanks!
1 Like
Why doesnāt the height change?
What is ::before? Like what can I google or look up?
Add !important e.g.:
ha_card {
height: 266px !important;
}
1 Like
It is a CSS pseudo element.
How would I implement the text wrapping?
I tried adding it below the current code and that didnāt work.
Hereās the current code:
type: custom:auto-entities
card:
type: grid
columns: 2
square: false
card_param: cards
filter:
include:
- domain: light
state: 'on'
name: /[li]ghts/
options:
type: custom:mushroom-light-card
vertical: true
tap_action:
action: toggle
double_tap_action:
action: more-info
card_mod: null
style: |
mushroom-shape-icon {
--shape-color: none !important;
--shape-color-disabled: none !important;}
ha-card {
--ha-card-background: transparent;
--card-primary-font-size: 12px;
}
mushroom-card:
mushroom-state-item
mushroom-state-info:
$: |
.container .primary {
white-space: normal;
}
.: |
mushroom-state-item {
margin-bottom: 0px;
}
exclude:
- entity_id: light.daniels_bedroom_lights_main
thx working, and how do I make the icon and name be up.
Is there a way to change the color of the slider with card-mod? I dunno what its called
Like --mushroom-slider-color: red
Something like that.
Do you know how to target the slider itself on a dimmer so i can change the color of it?
Hey Everyone,
Im trying to make the mushroom media player have the media_title attribute in de second line but iām unable to. I donāt wanne turn on the āuse media informationā function because then i lose the name of the device. Does anyone know a trick how to replace the second line with the media_title attribute?.
Current Look
What iām looking for
1 Like
Does anyone have an idea to solve my āincludeā problem? How do you implement your navigation bars or other stuff?
My dashboard was getting a little busy so I decided to clean it up a bit and put some not commonly used items in a dropdown on the welcome card.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: masonry
layout: {}
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
- type: template
entity: lock.door_locks
icon: |-
{% set state=states(entity) %}
{% if state=='locked' %}
mdi:lock
{% elif state=='unlocked' %}
mdi:lock-open-variant
{% else %}
grey
{% endif %}
tap_action:
action: more-info
icon_color: |-
{% set state=states(entity) %}
{% if state=='locked' %}
green
{% elif state=='unlocked' %}
red
{% else %}
grey
{% endif %}
- type: template
entity: binary_sensor.door_open_sensors
icon: |-
{% set state=states(entity) %}
{% if state=='off' %}
mdi:door-closed
{% elif state=='on' %}
mdi:door-open
{% else %}
mdi:door
{% endif %}
icon_color: |-
{% set state=states(entity) %}
{% if state=='off' %}
green
{% elif state=='on' %}
red
{% else %}
grey
{% endif %}
tap_action:
action: more-info
- type: alarm-control-panel
entity: alarm_control_panel.alarmo
tap_action:
action: navigate
navigation_path: alarm
- type: template
content: |
{{'{0:,.0f}'.format(states(entity)|int)}} W
entity: sensor.energy_monitor_power
icon: mdi:flash
icon_color: amber
tap_action:
action: more-info
- type: action
icon: mdi:dots-vertical
tap_action:
action: navigate
navigation_path: /lovelace-mushroom/0?disable_km=&edit=1
hold_action:
action: none
double_tap_action:
action: navigate
navigation_path: /lovelace-mushroom/0
icon_color: white
alignment: justify
card_mod:
style: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.all_lights
state: 'on'
chip:
type: entity
entity: sensor.count_lights_on
icon_color: amber
icon: mdi:lightbulb-group
tap_action:
action: call-service
service: light.turn_off
service_data: {}
target:
entity_id: light.all_lights
- type: conditional
conditions:
- entity: fan.fans
state: 'on'
chip:
type: template
entity: sensor.count_fans_on
icon: mdi:fan
icon_color: green
tap_action:
action: call-service
service: fan.turn_off
data: {}
target:
entity_id: fan.fans
content: '{{ states(entity) }}'
- type: conditional
conditions:
- entity: sensor.mail_usps_mail
state_not: '0'
chip:
type: template
entity: sensor.mail_usps_mail
icon: mdi:mail
icon_color: purple
tap_action:
action: navigate
navigation_path: mail
content: '{{ states(entity) }}'
- type: conditional
conditions:
- entity: sensor.garbage_day
state: '1'
chip:
type: entity
entity: sensor.garbage_day
icon_color: red
name: Put can out
content_info: name
use_entity_picture: false
- type: conditional
conditions:
- entity: sensor.garbage_day
state: '0'
chip:
type: entity
entity: sensor.garbage_day
icon_color: green
name: Bring can in
content_info: name
use_entity_picture: false
alignment: justify
card_mod:
style:
div:
mushroom-conditional-chip:nth-child(2) mushroom-template-chip:
$: |
mushroom-chip ha-icon {
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.: |
:host {
--ha-card-background: rgba(var(--rgb-primary-text-color), 0.025);
}
ha-card {
--chip-spacing: 2px;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: markdown
content: |-
{% set time = now().hour %}
{% if (time >= 18) %}
Good Evening, {{user}}
{% elif (time >= 12) %}
Good Afternoon, {{user}}
{% elif (time >= 5) %}
Good Morning, {{user}}
{% else %}
Hello, {{user}}!
{% endif %}
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 28px !important;
font-weight: normal !important;
line-height: 1.2 !important;
}
ha-card {
background-color: #111111;
color: #e1e1e1;
box-shadow: 0px 0px;
}
- type: markdown
content: Today is **{{ now().strftime('%B %d, %Y') }}**
card_mod:
style: |
ha-markdown {
padding: 0 0 0 10px !important;
font-size: 14px !important;
font-weight: normal !important;
line-height: 1.4 !important;
}
ha-card {
background-color: #111111;
color: #9b9b9b;
box-shadow: 0px 0px;
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
width: 350px
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: person.jeff
state: home
chip:
type: entity
entity: person.jeff
content_info: nam
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-background: rgba(var(--rgb-state-person-home), 0.7);
margin-top: 0px;
margin-bottom: 0px;
}
- type: conditional
conditions:
- entity: person.jeff
state_not: home
chip:
type: entity
entity: person.jeff
content_info: none
use_entity_picture: true
card_mod:
style: |
ha-card {
{% if is_state('person.jeff', 'not_home') %}
--chip-background: rgba(var(--rgb-state-person-not-home), 0.4);
{% elif is_state('person.jeff', 'unknown') %}
--chip-background: rgba(var(--rgb-state-person-unknown), 0.4);
{% else %}
--chip-background: rgba(var(--rgb-state-person-zone), 0.4);
{% endif %}
margin-top: 5px;
margin-bottom: 0px;
}
alignment: end
card_mod:
style: |
ha-card {
margin: 10px 20px 0 0
}
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.0);
color: #e1e1e1;
box-shadow: 0px 0px;
}
- square: false
columns: 4
type: grid
cards:
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.front_door_main
name: Front Door
camera_image: camera.front_door_main
aspect_ratio: '5:4'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.front_middle
camera_image: camera.front_middle
name: Front Middle
aspect_ratio: '5:4'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.front_right
camera_image: camera.front_right
name: Front Right
aspect_ratio: '5:4'
- show_state: false
show_name: false
camera_view: auto
type: picture-entity
entity: camera.right_side
name: Right Side
camera_image: camera.right_side
aspect_ratio: '5:4'
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: House
icon: mdi:home
layout: vertical
icon_color: blue
tap_action:
action: navigate
navigation_path: house
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Lights
icon: mdi:lightbulb-group
icon_color: orange
layout: vertical
tap_action:
action: navigate
navigation_path: lights
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Raptor
icon: mdi:car-lifted-pickup
icon_color: grey
layout: vertical
tap_action:
action: navigate
navigation_path: raptor
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Secure
icon: mdi:shield
icon_color: green
layout: vertical
tap_action:
action: navigate
navigation_path: security
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Net
icon: mdi:lan
layout: vertical
icon_color: red
tap_action:
action: navigate
navigation_path: network
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: auto;
margin-top: 4px;
margin-bottom: -10px;
}
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: input_boolean.welcome_dropdown
state: 'off'
chip:
type: weather
entity: weather.karr_daynight
show_conditions: true
show_temperature: true
- type: conditional
conditions:
- entity: input_boolean.welcome_dropdown
state: 'off'
chip:
type: entity
entity: sensor.moon
icon_color: yellow
- type: conditional
conditions:
- entity: input_boolean.welcome_dropdown
state: 'off'
chip:
type: template
content: '{{state_attr(entity, ''current_temperature'')}} Ā°F'
entity: climate.thermostat
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 %}
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 15px;
margin-left: -6px;
margin-bottom: -12px;
width: 400px
}
alignment: start
- type: custom:mushroom-chips-card
chips:
- 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.welcome_dropdown
icon_color: disabled
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0px;
--chip-padding: 0px;
--chip-icon-size: 40px;
margin-right: -4px;
margin-bottom: -12px;
}
alignment: end
- type: conditional
conditions:
- entity: input_boolean.welcome_dropdown
state: 'on'
card:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Power
icon: mdi:transmission-tower
layout: vertical
icon_color: pink
tap_action:
action: navigate
navigation_path: power
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: 46px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Battery
icon: mdi:battery
layout: vertical
icon_color: brown
tap_action:
action: navigate
navigation_path: batteries
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: 25.25px;
margin-right: auto;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Mail
icon: mdi:package-variant-closed
layout: vertical
icon_color: purple
tap_action:
action: navigate
navigation_path: mail
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: 25.25px;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: Settings
icon: mdi:menu
layout: vertical
icon_color: cyan
tap_action:
action: navigate
navigation_path: settings
card_mod:
style: |
ha-card {
background: rgba(var(--rgb-primary-text-color), 0.025);
width: 66px;
border-radius: 30px;
margin-left: auto;
margin-right: 46px;
margin-top: -24px;
margin-bottom: 4px;
}
- type: custom:simple-weather-card
entity: weather.karr_daynight
name: ' '
primary_info:
- wind_speed
- wind_bearing
- pressure
secondary_info:
- humidity
- precipitation_probability
- precipitation
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
padding: 0 28px 0 28px !important;
margin-left: 0px;
margin-right: 0px;
margin-top: 0;
margin-bottom: 0;
}
- type: weather-forecast
entity: weather.karr_daynight
show_current: false
show_forecast: true
card_mod:
style: |
ha-card {
box-shadow: none;
background: none;
padding: 0 0 0 0 !important;
margin-left: -20px;
margin-right: -20px;
margin-top: -10px;
margin-bottom: -4px;
}
- type: grid
square: false
columns: 2
cards:
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.jeff
use_entity_picture: true
hide_name: false
layout: default
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Jeff
card:
type: custom:mod-card
card_mod:
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.jeff_iphone_geocoded_location
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.jeff_iphone
aspect_ratio: '2'
use_entity_picture: true
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: sensor.jeff_iphone_battery_level
secondary: '{{ states(entity) }} %'
icon: >-
{% set battery_level = (states(entity) | int /
10) | round(0) | int * 10 %} {% if
is_state('sensor.jeff_iphone_battery_state',
'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: >-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
layout: vertical
tap_action: null
action: more-info
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-entity-card
layout: vertical
entity: sensor.jeff_iphone_steps
icon_color: amber
primary_info: none
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-entity-card
layout: vertical
entity: sensor.jeff_iphone_distance
icon_color: amber
primary_info: none
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-template-card
primary: Scenes
secondary: All
icon: mdi:home-lightbulb-outline
icon_color: blue
card_mod:
style: |
ha-card {
padding-bottom: 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:party-popper
icon_color: grey
layout: vertical
secondary: Party
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.party
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:television
icon_color: grey
layout: vertical
secondary: Chill
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.chill
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
- type: custom:mushroom-template-card
icon: mdi:weather-night
icon_color: grey
layout: vertical
secondary: Sleep
tap_action:
action: call-service
service: scene.turn_on
service_data: {}
target:
entity_id: scene.sleep
card_mod:
style: |
ha-card {
box-shadow: none;
--card-secondary-font-size: 8px;
}
card_mod:
style: |
ha-card {
box-shadow: none;
}
card_mod:
style: |
ha-card {
padding: 2px;
background: #1a1a1a;
}
24 Likes
I have a mushroom person card.
- type: custom:mushroom-person-card
entity: person.john
layout: horizontal
#icon: mdi:emoticon-confused-outline
use_entity_picture: true
#primary_info: sensor.sm_f926u1_battery_level
#secondary_info: sensor.sm_f926u1_battery_level
hide_state: false
fill_container: true
hide_name: false
layout: vertical
style: |
:host {
--mush-rgb-state-person-home: var(--rgb-blue);
--mush-rgb-state-person-not-home: var(--rgb-purple);
--mush-rgb-state-person-zone: var(--rgb-amber);
--ha-card-background: rgba(227, 245, 250, 0.12);
}
And I found this battery and charging/discharging chip card.
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% if states('sensor.sm_f926u1_battery_state') == 'charging' %}
green
{% else %}
red
{% endif %}
entity: sensor.sm_f926u1_battery_state
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_f926u1_battery_level
icon: |2
{% set bl = states('sensor.sm_f926u1_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: |2-
{% set bl = states('sensor.sm_f926u1_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 %} yellow
{% elif bl < 70 %} yellow
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
Is it possible to combine the two? Thanks in advance!!!
1 Like
Fabulous! I will definetely have some inspiration.
May I ask what you have under Settings while unfolded ?
I have slightly different setup:
Battery Icon changes color depending on %, and changes the icon + blinks if charging
Below battery icon:
%battery levvel
battery temperature
1 Like
Thatās nice I really like that!!! I like the size and how itās laid out! Perfect!
Care to share your code?
Thank you!
sure, see below (itās for one person)
Surely some things might be written easier but I;m learning by doing 
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:stack-in-card
mode: horizontal
cards:
- type: custom:mushroom-person-card
entity: device_tracker.sg21
icon_type: entity-picture
hide_name: true
layout: vertical
secondary_info: state
- type: conditional
conditions:
- entity: binary_sensor.sg21_is_charging
state: 'on'
card:
type: custom:mushroom-template-card
entity: sensor.sg21_battery_level
layout: vertical
icon_color: light-green
fill_container: true
name: SG21
icon: mdi:battery-charging-medium
hide_name: true
primary: '{{ states(''sensor.sg21_battery_level'') }} %'
secondary: '{{ states(''sensor.sg21_battery_temperature'') }} Ā°'
card_mod:
style: |
mushroom-shape-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
- type: conditional
conditions:
- entity: binary_sensor.sg21_is_charging
state: 'off'
card:
type: custom:mushroom-template-card
entity: sensor.sg21_battery_level
layout: vertical
icon_color: |2-
{% set bl = states('sensor.sg21_battery_level') | int %}
{% if bl < 10 %} #cc0c16
{% elif bl < 20 %} #e61e28
{% elif bl < 30 %} #e3464e
{% elif bl < 40 %} orange
{% elif bl < 50 %} #f0b93a
{% elif bl < 60 %} #f3f56c
{% elif bl < 70 %} #f2f536
{% elif bl < 80 %} #69f095
{% elif bl < 90 %} #2ee669
{% elif bl < 100 %} #05ad3b
{% elif bl == 100 %} #03872d
{% else %} grey
{% endif %}
primary: '{{ states(''sensor.sg21_battery_level'') }} %'
secondary: '{{ states(''sensor.sg21_battery_temperature'') }} Ā°'
tap_action:
action: more-info
fill_container: true
icon: mdi:battery-arrow-down
- type: custom:mushroom-template-card
secondary: >-
{{ state_attr('sensor.darek','street') }}, {{
state_attr('sensor.darek','city') }}, {{
state_attr('sensor.darek','postal_code') }}, {{
state_attr('sensor.darek','place_name') }}
multiline_secondary: true
4 Likes
HUGE Thank you!!!
Iām assuming this is a binary sensor you built? I have the rest of the card working for me 
Again, Thank you!!!
These are the sensors from places integration 
https://github.com/custom-components/places
allowing to show exact location based on the device tracker
it is great, I;m monitoring my wife;s travel from work to home
1 Like