always looking for ideas that I can steal 
part of my start page:
8 Likes
You are missing the card-mod integration: GitHub - thomasloven/lovelace-card-mod: š¹ Add CSS styles to (almost) any lovelace card
hi, you can show how you added sensor.charging and sensor.battery_level on person card?
thanks.
If you are using the normal HA Grid card, you will need to add square: false to the grid (or in the visual editor it should be a toggle at the top labeled āRender as squareā, or something close to that.
worked like a charm! thanks
2 Likes
Here you goā¦
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_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_s21_fabian_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: more-info
9 Likes
Hey all,
@pedolsky thank you for your help in the other channel.
I know some of you have asked for this card in the repo for 
Mushroom. I also understand the complexities for the dev to get the card built. With some trial and error, I have managed to create a card I am happy with what I have achieved.
This card is used with Google Calendar, Mushroom chips and Mushroom Person card, to navigate to various dashboards we use around the house.
Let me know if there is a better place to share the YAML and ask me anything.
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
subtitle: >-
ā»ļø {{state_attr('calendar.bins', 'message')}} on {{
as_timestamp(state_attr("calendar.bins","start_time") |
default(now(),true) )| timestamp_custom('%-d %b') }}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
card_mod:
style: |
:host {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 25px;
--ha-card-background: white;
}
chips:
- type: action
icon_color: red
tap_action:
action: navigate
navigation_path: media-control
icon: mdi:remote
hold_action:
action: none
double_tap_action:
action: none
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: audio
icon: mdi:radio
- type: action
icon_color: blue-grey
icon: ios:hifispeaker-fill
tap_action:
action: navigate
navigation_path: media-settings
- type: action
icon_color: amber
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:lightbulb-group
tap_action:
action: navigate
navigation_path: all-lights
- type: action
icon_color: green
icon: mdi:timeline-clock
hold_action:
action: none
double_tap_action:
action: none
tap_action:
action: navigate
navigation_path: automations
alignment: justify
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #292929;
}
entity: person.dan
fill_container: true
icon: mdi:face-man
tap_action:
action: navigate
navigation_path: dan
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-person-card
card_mod:
style: |
:host {
padding-left:10px;
--ha-card-background: #292929;
}
entity: device_tracker.chloe
fill_container: true
icon: mdi:face-woman
card_mod:
style: |
ha-card {
background: #1c1c1c;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
}
18 Likes
Can anyone advise if itās possible to set padding on the mushroom title card using card mod ? - It doesnāt seem to have a ha-card element so isnāt working like the other cards, and I canāt figure out the right selector for it.
i put them on vertical stack but chips card are below person card. could u show how to put them together?
thanks a lot.
hej,
here the whole card, there is also a popup window included for detailed location
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-person-card
entity: person.fabian
use_entity_picture: true
hide_name: true
layout: vertical
tap_action:
action: fire-dom-event
browser_mod:
command: popup
deviceID: this
title: Fabian
card:
type: custom:mod-card
style: |
ha-card {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 15px;
}
card:
type: vertical-stack
cards:
- type: custom:mushroom-entity-card
entity: sensor.places_fabian_locatie
primary_info: none
icon: mdi:map-marker
icon_color: yellow
- type: horizontal-stack
cards:
- type: map
entities:
- entity: device_tracker.life360_fabian_verschoor
aspect_ratio: '2'
use_entity_picture: true
- type: custom:mushroom-chips-card
chips:
- type: template
icon_color: |2-
{% set state=states('binary_sensor.sm_s21_fabian_is_charging') %}
{% if state=='on' %}
green
{% elif state=='off' %}
#6f6f6f
{% endif %}
entity: binary_sensor.sm_s21_fabian_is_charging
icon: mdi:power-plug
tap_action:
action: more-info
- type: template
entity: sensor.sm_s21_fabian_battery_level
icon: |2
{% set bl = states('sensor.sm_s21_fabian_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_s21_fabian_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 %} green
{% 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: more-info
alignment: center
8 Likes
How do you make your fan icons spin?
Thanks, had my battery and charge status on my person card but this is more detailed with color change and icon change so stealing it for sure!
1 Like
āStoleā the code somewhere in this thread or the card-mod thread.
Hereās my full card that only shows if the fan is running. and icon color depending on wind mode. As itās part of a nested room card a my HA homescreen you maybe have to adjust the itendation.
- type: conditional
conditions:
- entity: fan.MYFAN
state: 'on'
chip:
type: template
double_tap_action:
action: none
icon: mdi:fan
icon_color: >-
{% if is_state_attr('fan.MYFAN', 'preset_mode', 'Normal')%}
blue
{% elif is_state_attr('fan.MYFAN', 'preset_mode',
'Nature')%}
green
{% else %}
disabled
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
entity: fan.MYFAN
content: null
card_mod: null
style: |
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
ha-card {
--chip-box-shadow: 0px 0px;
animation: rotation linear infinite;
{% if states('fan.MYFAN') == 'on' %}
animation-duration: 3s;
{%- else -%}
{%- endif %}
}
3 Likes
oh my god, since weeks I;m trying to get google calendar events other than the current on! this helps!
one question, can you point me how to adjust that subtitle and state_attr to get:
Tomorrowās events
and Tomorrowās event from More Than One calendar ?
Best regards!
While we wait for the official climate card, I decided to have a stab at knocking together something that has the same look and feel. Came up with this:
Itās a standard merge of the Mushroom template card, Simple Thermostat card, and optionally the Mushroom Chips card to show extra info (the card on the right).
Icon changes colour to indicate whether HVAC is active or not. Iāve also played around with changing the background colour of the whole card to more immediately indicate that the system is on.
I like how it maintains the Mushroom UX while also being quite compact. Someone with CSS skills could also fiddle the Simple Thermostat card to get the up/down controls properly aligned.
7 Likes
Mind sharing the yaml? Great looking card!
1 Like
Sureā¦
type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Downstairs
secondary: >
Currently: {{ state_attr('climate.downstairs', 'current_temperature')
}}Ā°F
icon: |-
{% set mode = states('climate.downstairs') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.downstairs','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.downstairs
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control: false
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Upstairs
secondary: >
Currently: {{ state_attr('climate.upstairs', 'current_temperature')
}}Ā°F
icon: |-
{% set mode = states('climate.upstairs') %}
{% if mode == 'cool' %}
mdi:snowflake
{% else %}
mdi:fire
{% endif %}
icon_color: |-
{% set status = state_attr('climate.upstairs','hvac_action') %}
{% if status == 'cooling' %}
blue
{% elif status == 'heating' %}
orange
{% else %}
grey
{% endif %}
tap_action: none
style: |
ha-card {
padding-bottom: 1px !important;
}
- type: custom:simple-thermostat
style: |
ha-card {
--st-font-size-xl: 28px;
--st-font-size-m: 20px;
--st-font-size-title: 20px;
--st-font-size-sensors: 14px;
--st-font-size-toggle-label: 6px
--st-spacing: 0px;
--st-default-spacing: 1px;
}
entity: climate.upstairs
header: false
hide:
temperature: true
state: true
layout:
mode:
headings: false
icons: true
names: false
step: row
decimals: '0'
step_size: '1'
control: false
- type: custom:mushroom-chips-card
alignment: justify
chips:
- type: template
entity: climate.upstairs
content: |
{{ state_attr(entity, 'current_humidity') }}%
icon: mdi:water-percent
icon_color: cyan
- type: entity
entity: sensor.ac_runtime_today_upstairs_cool
icon: mdi:timer-outline
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
4 Likes
Iām trying to animate the rotation of only the icon in a Mushroom Template Card, but I cannot seem to find the right element to targetā¦ha-card gets the entire template strip, ha-icon doesnāt work at all. What element should I be using to bind the animation to?
great cardā¦ could customize it for my own heating systemā¦
me too
8 Likes