beautiful cards! could you share two cards, office room and dishwasher? thanks
Office + Spare Bedroom Room Cards - Too large to post so in a pastebin:
Dishwasher Card:
Code
type: custom:vertical-stack-in-card
cards:
- square: false
columns: 2
type: grid
cards:
- type: custom:mushroom-template-card
primary: Dishwasher
secondary: |-
{% if states('input_boolean.dishwasher') == 'on' %}
{% if states('timer.dishwasher_run_time') == 'active' %}
{% set ctd = state_attr('timer.dishwasher_run_time', 'finishes_at') | as_datetime %}
{% set finald = (ctd - now()).total_seconds() | timestamp_custom('%-Hh %-Mm', false) %}
{% set testd = finald.split('h')[0] | int %}
{% if testd == 0 %}
Est. Completion {{ finald.split('h')[1] }}
{% else %}
Est. Completion {{finald}}
{% endif %}
{% else %}
Finished
{% endif %}
{% else %}
{% endif %}
icon: mdi:dishwasher
badge_icon: |-
{% if states('input_boolean.dishwasher') == 'on' %}
mdi:waves
{% else %}
mdi:flag-checkered
{% endif %}
badge_color: |-
{% if states('input_boolean.dishwasher') == 'on'%}
#697fff
{% else %}
#5bc779
{% endif %}
icon_color: |-
{% if states('input_boolean.dishwasher') == 'on' %}
#697fff
{% else %}
#5bc779
{% endif %}
entity: sensor.kitchen_dishwasher_plug_power
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod: null
style: |
ha-state-icon {
{% if states('input_boolean.dishwasher') == 'on' %}
animation: bounce 1.5s ease-in-out infinite, wash 1s ease-in-out infinite; transform-origin: 50% 75%;
{% else %}
{% endif %};
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0); }
40% { transform: translateY(-1.2px) rotate(5deg); }
60% { transform: translateY(-1.1px) rotate(-4deg); }
}
@keyframes wash {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 36% 74%, 31% 43%, 61% 40%, 71% 69%, 62% 78%, 36% 73%, 35% 100%, 100% 100%, 100% 0); }
}
@media (prefers-color-scheme: dark) {
ha-card {
width: 285px;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#001f5c
{% else %}
{% endif %};
}
}
@media (prefers-color-scheme: light) {
ha-card {
width: 285px;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#c2d4ff
{% else %}
{% endif %};
}
}
- type: custom:mushroom-template-card
primary: Pods
secondary: '{{states(''counter.dishwasher_pods'')}}'
icon: mdi:water-circle
entity: counter.dishwasher_pods
icon_color: |-
{% if states('counter.dishwasher_pods') | int <= 5 %}
red
{% elif states('counter.dishwasher_pods') | int <= 20 %}
amber
{% elif states('counter.dishwasher_pods') | int <= 40 %}
#55c2c9
{% else %}
#697fff
{% endif %}
badge_icon: |-
{% if states('counter.washing_pods') | int == 5 %}
mdi:numeric-5
{% elif states('counter.washing_pods') | int == 4 %}
mdi:numeric-4
{% elif states('counter.washing_pods') | int == 3 %}
mdi:numeric-3
{% elif states('counter.washing_pods') | int == 2 %}
mdi:numeric-2
{% elif states('counter.washing_pods') | int == 1 %}
mdi:numeric-1
{% elif states('counter.washing_pods') | int == 0 %}
mdi:numeric-0
{% endif %}
badge_color: red
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-state-info$: |
.container {
align-items: end;
transform: scalex(-1);
position: relative;
left: 20px
}
.: |
:host {
transform: scalex(-1);
}
mushroom-shape-icon {
position: relative;
left: 20px;
}
@media (prefers-color-scheme: dark) {
ha-card {
width: 200px;
margin: 0px 0px 0px 0px;
padding: 12px 35px !important;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#001f5c
{% else %}
{% endif %};
}
}
@media (prefers-color-scheme: light) {
ha-card {
width: 200px;
margin: 0px 0px 0px 0px;
padding: 12px 35px !important;
background-color:
{% if states('input_boolean.dishwasher') == 'on' %}
#c2d4ff
{% else %}
{% endif %};
}
}
1 Like
Very nice! Would you share the Household Person card with us?
What do you see when you drop down at Jet?
Thank you!
its a graph showing how long each cat has been inside and outside today.
the person card is way more over the top than it probably needs to be lol.
square: false
columns: 2
type: grid
cards:
- type: custom:stack-in-card
entity: person.dimitri_landerloos
cards:
- type: custom:mushroom-template-card
primary: Dimitri
secondary: >-
{% if states(config.entity) == 'home' %} Home: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == 'Work' %} Work: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Julia's Parents House" %} Julia's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Dimitri's Parents House" %} Parent's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% else %} Away: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% endif %}
icon: mdi:account
entity: person.dimitri_landerloos
icon_color: |-
{% if states(config.entity) == 'home' %}
#5ddeb8
{% elif states(config.entity) == 'Work' %}
#87afff
{% elif states(config.entity) == "Dimitri's Parents House" %}
#ff99cc
{% elif states(config.entity) == "Julia's Parents House" %}
#d0abff
{% else %}
#5bc779
{% endif %}
badge_icon: |
{% if states(config.entity) == 'home' %}
mdi:home
{% elif states(config.entity) == 'Work' %}
mdi:factory
{% elif states(config.entity) == "Julia's Parents House" %}
mdi:home-floor-1
{% elif states(config.entity) == "Dimitri's Parents House" %}
mdi:home-heart
{% else %}
mdi:walk
{% endif %}
badge_color: |-
{% if states(config.entity) == 'home' %}
#5ddeb8
{% elif states(config.entity) == 'Work' %}
#87afff
{% elif states(config.entity) == "Dimitri's Parents House" %}
#ff99cc
{% elif states(config.entity) == "Julia's Parents House" %}
#d0abff
{% else %}
#5bc779
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: null
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
.: |
mushroom-shape-icon {
position: absolute;
top: -57px;
left: -40px;
}
mushroom-badge-icon {
position: absolute;
top: -27px;
left: 24px;
}
mushroom-state-info {
padding-left: 34px;
z-index: 1;
}
:host {
--mush-icon-size: 2.84em;
--mush-icon-symbol-size: 1em
}
card_mod:
style: |
@media (prefers-color-scheme: dark) {
ha-card {
background-color:
{% if states(config.entity) == 'home' %}
#045940 !important;
{% elif states(config.entity) == 'Work' %}
#001f5c !important;
{% elif states(config.entity) == "Dimitri's Parents House" %}
#690035 !important;
{% elif states(config.entity) == "Julia's Parents House" %}
#310070 !important;
{% else %}
#0c3b0c !important;
{% endif %};
}
}
@media (prefers-color-scheme: light) {
ha-card {
background-color:
{% if states(config.entity) == 'home' %}
#cffff1 !important;
{% elif states(config.entity) == 'Work' %}
#ccddff !important;
{% elif states(config.entity) == "Dimitri's Parents House" %}
#fcdcec !important;
{% elif states(config.entity) == "Julia's Parents House" %}
#e4cfff !important;
{% else %}
#d9fae2 !important;
{% endif %};
}
}
- type: custom:stack-in-card
entity: person.julia_hallett
cards:
- type: custom:mushroom-template-card
primary: Julia
secondary: >-
{% if states(config.entity) == 'home' %} Home: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == 'Work Julia' %} Work: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Julia's Parents House" %} Parent's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Dimitri's Parents House" %} Dimi's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Guides" %} Guides: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% else %} Away: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.julia_hallett.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% endif %}
icon: mdi:account
entity: person.julia_hallett
icon_color: |-
{% if states(config.entity) == 'home' %}
#5ddeb8
{% elif states(config.entity) == 'Work Julia' %}
#87afff
{% elif states(config.entity) == "Julia's Parents House" %}
#ff99cc
{% elif states(config.entity) == "Dimitri's Parents House" %}
#d0abff
{% elif states(config.entity) == "Guides" %}
#a7e34f
{% else %}
#5bc779
{% endif %}
badge_icon: |
{% if states(config.entity) == 'home' %}
mdi:home
{% elif states(config.entity) == 'Work Julia' %}
mdi:hospital-building
{% elif states(config.entity) == "Julia's Parents House" %}
mdi:home-heart
{% elif states(config.entity) == "Dimitri's Parents House" %}
mdi:home-floor-1
{% elif states(config.entity) == "Guides" %}
mdi:clover-outline
{% else %}
mdi:walk
{% endif %}
badge_color: |-
{% if states(config.entity) == 'home' %}
#5ddeb8
{% elif states(config.entity) == 'Work Julia' %}
#87afff
{% elif states(config.entity) == "Julia's Parents House" %}
#ff99cc
{% elif states(config.entity) == "Dimitri's Parents House" %}
#d0abff
{% elif states(config.entity) == "Guides" %}
#a7e34f
{% else %}
#5bc779
{% endif %}
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
multiline_secondary: false
card_mod:
style:
mushroom-state-info$: |
.primary {
white-space: normal !important;
}
.: |
mushroom-shape-icon {
position: absolute;
top: -57px;
left: -40px;
}
mushroom-badge-icon {
position: absolute;
top: -27px;
left: 24px;
}
mushroom-state-info {
padding-left: 34px;
z-index: 1;
}
:host {
--mush-icon-size: 2.84em;
--mush-icon-symbol-size: 1em
}
card_mod:
style: |
@media (prefers-color-scheme: dark) {
ha-card {
background-color:
{% if states(config.entity) == 'home' %}
#045940 !important;
{% elif states(config.entity) == 'Work Julia' %}
#001f5c !important;
{% elif states(config.entity) == "Julia's Parents House" %}
#690035 !important;
{% elif states(config.entity) == "Dimitri's Parents House" %}
#310070 !important;
{% elif states(config.entity) == 'Guides' %}
#3d6601 !important;
{% else %}
#0c3b0c !important;
{% endif %};
}
}
@media (prefers-color-scheme: light) {
ha-card {
background-color:
{% if states(config.entity) == 'home' %}
#cffff1 !important;
{% elif states(config.entity) == 'Work Julia' %}
#ccddff !important;
{% elif states(config.entity) == "Julia's Parents House" %}
#fcdcec !important;
{% elif states(config.entity) == "Dimitri's Parents House" %}
#e4cfff !important;
{% elif states(config.entity) == 'Guides' %}
#e7f7cd !important;
{% else %}
#d9fae2 !important;
{% endif %};
{
}
4 Likes
Thank you!
Jet probably doesnât like being outside.
You are right, especially when its raining, she will go out for like 30 seconds to do her business and then come back inside 
How do you check how many pods you have ? (not coded, but in âreal lifeâ)
Well i took an initial count of how many we had. then with each cycle it consumes 1 pod. then when we buy more i have it set up so we can just add the qty we bought to what we currently have remaining.
on the types that we buy it says the qty that are in the pack. but tbf it says that on all packs here in the UK pretty much.
1 Like
This Guide is absolutely perfect. Just the infos I was searching for a long time.
Many Thx for that. Simply love it.
1 Like
Iâm not a pro like you, but why didnât you make your secondary text code shorter?
Or am I missing something?
secondary: >-
{% if states(config.entity) == 'home' %} Home: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == 'Work' %} Work: {%- set time =
(as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Julia's Parents House" %} Julia's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% elif states(config.entity) == "Dimitri's Parents House" %} Parent's
House: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% else %} Away: {%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
{% endif %}
My edit:
secondary: >-
{% if states(config.entity) == 'home' %} Home:
{% elif states(config.entity) == 'Work' %} Work:
{% elif states(config.entity) == "Julia's Parents House" %} Julia's House:
{% elif states(config.entity) == "Dimitri's Parents House" %} Parent's House:
{% else %} Away: {% endif %}
{%- set time = (as_timestamp(now()) -
as_timestamp(states.person.dimitri_landerloos.last_changed)) | int %}
{%- set minutes = ((time % 3600) // 60) %}
{%- set minutes = '{}m'.format(minutes) if minutes > 0 else '' %}
{%- set hours = ((time % 86400) // 3600) %}
{%- set hours = '{}h '.format(hours) if hours > 0 else '' %}
{%- set days = (time // 86400) %}
{%- set days = '{}d '.format(days) if days > 0 else '' %}
{{ 'Less than 1 min' if time < 60 else days + hours + minutes }} ago
1 Like
No you can absolutely do that. I am not a professional, i am learning just like everyone else 
1 Like
or
{% set state = states(config.entity) %}
{% if state in
['home','Work',"Julia's Parents House","Dimitri's Parents House"] %}
{{state.replace('Parents ','')|title}}:
{% else %} Away:
{% endif %}
2 Likes
Thatâs very nice ! Not mushroom related but what devices are you using for tracking the inside/outside for your pets ?
I have a surepet cat flap. Its a microchip cat flap that reads the microchip in the cats neck (or one you put on their collar) and then sets the status of inside or outside.
There is an official integration for it. But unfortunately it is cloud only. No subscription required though which is nice.
2 Likes
This is an awesome thread with a wealth of information, especially the What the $ and .: | symbols do section in the first post.
I was playing around with the Climate card today and I figured out two examples you donât have: hiding the badge and height of the temperature control bar.
mushroom-badge-icon {
visibility: hidden;
}
--control-height: 30px;
I also just wanted to mention that variables are defined with --whatever_variable_name can (usually) just be entered in the ha-card section. This can make for some cleaner code without having to define multiple sections to plug in the values.
ha-card {
background-color: transparent;
border: none;
height: 200px !important;
width: 200px;
--icon-symbol-size: 100%;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--primary-text-color: white;
--secondary-text-color: gray;
--control-height: 30px;
}
Iâm not sure why --shape-color wouldnât work in ha-card even with !important but worked once I put it in mushroom-shape-icon { }.
YAML code
type: custom:mushroom-climate-card
entity: climate.heatpump
layout: vertical
show_temperature_control: true
card_mod:
style:
.: |
ha-card {
background-color: transparent;
border: none;
height: 200px !important;
width: 200px;
--icon-symbol-size: 100%;
--card-primary-font-size: 15px;
--card-secondary-font-size: 10px;
--primary-text-color: white;
--secondary-text-color: gray;
--control-height: 30px;
}
mushroom-shape-icon {
--shape-color: transparent !important;
}
mushroom-badge-icon {
visibility: hidden;
}
ha-state-icon {
{% if is_state(config.entity, 'off') %}
--card-mod-icon: mdi:radiator-off
{% else %}
--card-mod-icon: mdi:radiator;
animation: clip 1.5s linear infinite;
{% endif %};
}
@keyframes clip {
0% { clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
Note: this example is configured for to access the shadow-root so $objects from above can easily be plugged in.
2 Likes
not to contradict you in any way - but i just want to point out that it is generally best practice to dig to the element even if you are just changing a variable.
reason being is that this variable may be used in other places for calculations for example to determine spacing, so changing it globally in the ha-card can have unintended effects. Not all of the time of course (and even most of the time it is fine), but i would say its best practice to drill to the element itself, even if that makes the code longer.
1 Like
I see where youâre coming from and agree with you in that respect. In fact, at the risk of going a bit off-topic, but to reinforce your point, I ran into that issue earlier today when I was attempting to card_mod the stock Tile card. A variable, --tile-color, was available but it acted as a âuniversalâ variable and changed items that I did not want changed or wanted changed differently and I did not see variables that I could use like in the Mushroom card example above. I had to drill into the elements individually and had to follow your $ and .: | guidance to make it work.
YAML code
type: tile
entity: binary_sensor.living_room_door_on_off
show_entity_picture: true
vertical: false
name: sliding door
card_mod:
style:
ha-tile-info$: |
.primary {
font-size: 20px !important;
font-family: arial;
font-weight: bold;
font-style: italic;
color: white !important;
}
.secondary {
font-size: 10px !important;
color: gray !important;
}
.icon-container .icon$: |
.shape {
border-radius: 15px !important;
background: {{ "rgba(255,0,0,0.2)" if is_state(config.entity, 'on') else "rgba(0,255,0,0.2)" }} !important;
}
.: |
ha-card {
background: black;
width: 200px;
}
.icon {
--tile-icon-color: {{ "red" if is_state(config.entity, 'on') else "green" }} !important;
}
2 Likes
Is it possible to have Chips also have no background?
For mushroomcards the this works but not for the chips itself
card_mod:
style: |
ha-card {
background: none !important;
}
I want to have state icons on the top of my nspanel pro and donât have the look of the chips. Is it also possible to only show the icon when thte state is on, for example for heating?
yes you can. same way.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
card_mod:
style: |
ha-card {
background: none !important;
}
with your theme you may still have a border too, you might want it still, but if you dont you would then use border: none !important; as well.
couple of different ways to achieve this. if you are removing the border as well, then you are likely just wanting to get rid of the chip entirely when something is off, so then you can do it 2 different ways.
- with a conditional chip.
type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- condition: state
entity: climate.office_heating
state: heat
chip:
type: template
icon: mdi:test-tube
icon_color: green
card_mod:
style: |
ha-card {
background: none !important;
}
- with a condtion in card mod.
type: custom:mushroom-chips-card
chips:
- type: template
icon: mdi:test-tube
icon_color: green
card_mod:
style: |
ha-card {
background: none !important;
{% if not is_state('climate.office_heating', 'heat') %}
display: none !important;
{% endif %}
}
How can I remove the small icon from the title card when it becomes a button? This post suggests its not a button, but youâre able to assign an action to it. When you assign an action, a small icon appears.
E.g.
type: custom:mushroom-title-card
title: Master bedroom
subtitle: >-
{% if is_state('input_boolean.master_climate_auto', 'on') %} Automatic mode{%
else %}Manual mode{% endif %}
alignment: start
title_tap_action:
action: call-service
service: input_boolean.toggle
target:
entity_id: input_boolean.master_climate_auto