Can you please help me with this, it’s the chips card that I’m having issues with.
With reference to @rhysb excellent person card , how would I change the colors?
This is the relevant code from the post above, as you can see, it’s blue, when I’ve defined it to be green
And this is the pertinent section
/* Define Person State colors. Can be added to theme */
--state-person-home: var(--green-color);
--state-person-not-home: var(--red-color);
--state-person-zone: var(--blue-color);
--state-person-unknown: var(--grey-color);
Struggling to identify the new format for colors.
what result do you get out of ?
{{is_state('YOUR PERSON ID', ['home', 'not_home', 'unknown'])}}
when you put in the template editor?
Seems to work for me as my state is home.
pmkoch
July 25, 2023, 2:40pm
7443
Do animations work with Chip Cards in the newest update? I have a Template Card animation working but it won’t work as a Chip Card.
Yes.
look in the chip styling section
UPDATE PLEASE READ THIS POST INSTEAD HERE .
i figured since there seem have been quite a few questions (likely because of the recent update) about how to target certain elements in Mushroom cards with Card Mod that i would try and make a comprehensive guide on how to style each element in mushroom cards.
First things first to get it out of the way. Card Mod is technically not supported by Mushroom. it works in most instances. but if anything breaks in the future it is up to you to update your y…
dbs179
July 25, 2023, 6:42pm
7445
I’m working on a stack-in card for my AC Filters. I have it mostly sorted out, except I want to change the way the date is shown under the “Installed” sensor. I’d like it to be May 19th, 2023 rather than 2023-05-19. This is probably not specifically Mushroom Card related, but since it is a mushroom template card, nothing I found on a quick search seemed to work.
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-title-card
title: Basement AC Filter
card_mod:
style: |
ha-card {
padding: 7px 0px 0px 10px !important;
height: 45px !important;
box-shadow: none;
}
- type: horizontal-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: Installed
secondary: '{{ states(''input_datetime.air_filter_date_installed_basement'') }}'
icon: >-
{% if is_state('sensor.basement_ac_filter_install_date_color',
'Green') %} mdi:calendar-check {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Yellow')
%} mdi:calendar-check {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Orange')
%} mdi:calendar-alert {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
mdi:calendar-alert {% else %} mdi:help-circle {% endif %}
entity: input_datetime.air_filter_date_installed_basement
icon_color: >-
{% if is_state('sensor.basement_ac_filter_install_date_color',
'Green') %} green {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Yellow')
%} yellow {% elif
is_state('sensor.basement_ac_filter_install_date_color',
'Orange') %} orange {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
red {% else %} white {% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Remaining
secondary: '{{ states(''sensor.basement_air_filter_life_remaining'') }}'
icon: >-
{% if is_state('sensor.basement_ac_filter_install_date_color',
'Green') %} mdi:calendar-check {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Yellow') %}
mdi:calendar-check {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Orange') %}
mdi:calendar-alert {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Red') %}
mdi:calendar-aler {% else %} mdi:help-circle {% endif %}
entity: sensor.basement_air_filter_life_remaining
icon_color: >-
{% if is_state('sensor.basement_ac_filter_install_date_color',
'Green') %} green {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Yellow') %}
yellow {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Orange') %}
orange {% elif
is_state('sensor.basement_ac_filter_install_date_color', 'Red') %} red
{% else %} white {% endif %}
layout: horizontal
tap_action:
action: more-info
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Door
secondary: >-
{% if
is_state('binary_sensor.aqara_contact_ac_filter_door_basement','off')
%} Closed {% elif
is_state('binary_sensor.aqara_contact_ac_filter_door_basement',
'on')%} Open {% else %} {{
states('binary_sensor.aqara_contact_ac_filter_door_basement') }} {%
endif %}
icon: |2-
{% if is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'off') %}
phu:aqara-contact
{% elif is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'on' ) %}
mdi:bell-alert
{% else %}
mdi:help-circle
{% endif %}
entity: automation.test_actionalble_ac_cover
icon_color: >-
{% if
is_state('binary_sensor.aqara_contact_ac_filter_door_basement','off')
%} green {% elif
is_state('binary_sensor.aqara_contact_ac_filter_door_basement', 'on')
%} red {% else %} orange {% endif %}
Have a look in here, you should be able to do it with examples in there:
After seeing many threads on the forum asking for help with time conversions and calculations using time and realizing I generally had no real understanding of how time worked in HA I decided to dig in and try to figure it out.
After over a week of internet and forum searches I think I’ve now got a lot of it figured out. I’m sure there is more that I don’t have here because sometimes “you don’t know what you don’t know”.
So, since I didn’t know this stuff and because of the number of other pos…
secondary: "{{ strptime(states('input_datetime.air_filter_date_installed_basement'), '%Y-%m-%d').strftime('%b %d, %Y') }}"
1 Like
Seeing CSS not loading immediately and then loading later is usually a symptom of a slow connection to your HA installation. I would try and ping your ha to see what your latency is.
I doubt its an issue of card mod not working right on mushroom cards. The modification would either not work at all or force the card to not load at all.
pmkoch
July 25, 2023, 7:46pm
7448
I missed that post apparently. Any idea what I am missing here?
type: custom:mushroom-chips-card
chips:
- type: template
entity: switch.shellyplus1_441793a43af8_switch_0
icon: mdi:fan
content: Fan
hold_action:
action: none
tap_action:
action: toggle
double_tap_action:
action: none
card_mod:
style:
mushroom-template-chip:nth-child(1):
mushroom-template-chip$: |
ha-state-icon {
{% set state = states(switch.shellyplus1_441793a43af8_switch_0) %} {% if state == 'on' %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
dbs179
July 25, 2023, 7:46pm
7449
That worked perfectly!!! Thank you!
Try like this.
You need keyframes as i dont think spin is natively supported for chips.
Change your entities back to your own and change is_state to be checking for on instead of off
card_mod:
style:
mushroom-template-chip$:nth-child(1): |
ha-state-icon {
{% if is_state('switch.office_screen_left','off') %}
animation: spin 1s linear infinite;
{% else %}
{% endif %}
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
Thanks for the help. The response for is as follows:person.me ’, [‘home’, ‘not_home’, ‘unknown’])}} is false
{{is_state(‘person.me ’, [‘Home’, ‘not_home’, ‘unknown’])}} is true
However, it does not change to green, it stays blue.
fugley
July 26, 2023, 1:49am
7452
not sure if its any help altho to spin a fan ill use the below
type: custom:mushroom-chips-card
chips:
- type: template
entity: fan.main_bathroom_fan
icon: |
{% set state = states(entity) %} {% if state == 'on' %}
mdi:fan
{% elif state == 'off' %}
mdi:fan
{% endif %}
icon_color: |
{% set state = states(entity) %} {% if state == 'on' %}
#8BC34A
{% elif state == 'off' %}
#9E9E9E
{% endif %}
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.main_bathroom_fan') == 'on' %}
animation-duration: 1.5s;
{%- else -%}
{%- endif %}
}
pmkoch
July 26, 2023, 2:47am
7453
This works great. Thank you so much!
Ok. And what is the responss when you do:
{{states('person.me')}}
?
mhoogenbosch
July 26, 2023, 8:06am
7456
Did you ever find the answer to this? I do not believe iOS provides such information with the default config.
Can you try and change in the card where it says
--state-person-home: var(--green-color);
And
{% if is_state(config.entity, ['home', 'not_home', 'unknown']) %}
To
--state-person-Home: var(--green-color);
And
{% if is_state(config.entity, ['Home', 'not_home', 'unknown']) %}
With capital H?
It will be case sensitive i am pretty sure.
TommyWelle
July 26, 2023, 9:14am
7458
Any way to have the temperature show next to the title, instead of under?
type: conditional
conditions:
- entity: input_boolean.boolean_dashboard_oppe
state: 'on'
- entity: input_boolean.boolean_dashboard_nede
state: 'off'
- entity: input_boolean.boolean_dashboard_ute
state: 'off'
card:
type: horizontal-stack
cards:
- type: vertical-stack
cards:
- type: custom:minimalistic-area-card
title: Trappa
area: Trappa
hide_unavailable: false
tap_action:
action: call-service
service: script.popup_trappa
hold_action:
action: navigate
navigation_path: /lovelace-panel/trappa
entities:
- sensor.verisure_rv_soveromsgang_fukt
- sensor.verisure_rv_soveromsgang_temp
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.trappa_1
icon: |-
{% if is_state(config.entity, 'on') %}
hue:ceiling-fugato-three-alt
{% else %}
hue:ceiling-fugato-three-alt
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: binary_sensor.aqara_motion_trappa_motion_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:eye
{% else %}
mdi:eye-off-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more_info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: binary_sensor.aqara_motion_trappa_motion_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:stairs
{% else %}
mdi:stairs
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more_info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px;
- type: vertical-stack
cards:
- type: custom:minimalistic-area-card
title: Toalett
area: Toalett
hide_unavailable: false
tap_action:
action: call-service
service: script.popup_toalett
hold_action:
action: navigate
navigation_path: /lovelace-panel/toalett
entities:
- sensor.verisure_rv_soveromsgang_fukt
- sensor.verisure_rv_soveromsgang_temp
- type: custom:mushroom-chips-card
chips:
- type: template
entity: light.dolys_1
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:ceiling-light
{% else %}
mdi:ceiling-light-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
orange
{% else %}
grey
{% endif %}
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
- type: template
entity: binary_sensor.hue_motion_do_motion
icon: |-
{% if is_state(config.entity, 'on') %}
mdi:eye
{% else %}
mdi:eye-off-outline
{% endif %}
icon_color: |-
{% if is_state(config.entity, 'on') %}
green
{% else %}
grey
{% endif %}
tap_action:
action: more_info
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-icon-size: 0.8em
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
margin-top: -10px;
Since the card you are trying to modify isnt a mushroom card i would suggest taking this question to the page of the custom card you are using.
In this case “custom:minimalistic-area-card”
reypm
July 26, 2023, 11:43am
7460
Nope, that seems to be Android only, iOS does not provide such info as far as I know
1 Like
