Ok, if i load the app from some time, i usually dont see work (not both have red or green colors), but if i go to another window with a backup on the card (i save a backup when i make a change), the backup shows correctly, but not dashboard. If i close the app and open it again then, dashboard shows correctly.
How can i see if i use both or not? Probably a noob question but never heard of this using HACS and Dashboard that load card_mods.js?
You may have followed instructions here. If not then this may help as well.
If you install card-mod via HACS then it will be loaded as a Dashboard Resource. To load as a Frontend module, copy the card_mod.js url, something like /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524345 and use that URL in the instructions about performance.
thanks
Thatās exactly what I needed
This means I have to check some automations and standardize my naming a bit
Super, i have added so it now looks like below, will see if this helps 
thanks for the quick reply!
frontend:
themes: !include_dir_merge_named themes/
extra_module_url:
- /hacsfiles/lovelace-card-mod/card-mod.js
type: custom:mushroom-title-card
card_mod:
style: |
ha-card {
margin-top: -20px;
}
title: Hello, {{ user }} !
Any help idea how i make this button horizontally align to the title, please?
Code:
type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-title-card
title: Hello, {{ user }} !
- type: custom:button-card
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true }));
return none;
]]]
hold_action:
action: url
url_path: null
icon: mdi:cog
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 -8px
icon:
- width: 30px
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
entity: person.ant
name: Ant
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:face-man
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 53%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 53%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
entity: person.katie
name: Katie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:face-woman
styles:
card:
- background: none
- border: none
- border-radius: 0px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
entity: person.person
name: Archie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:face-man-outline
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
I am getting closer - but now the title is center aligned ! Help 
type: vertical-stack
cards:
- type: horizontal-stack
card_mod:
style: |
ha-card {
display: flex !important;
align-items: center !important;
}
cards:
- type: custom:mushroom-title-card
title: Hello, {{ user }} !
card_mod:
style: |
ha-card {
height: 45px !important;
display: flex !important;
align-items: center !important;
}
- type: custom:button-card
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true }));
return none;
]]]
hold_action:
action: url
url_path: null
icon: mdi:cog
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 -8px
icon:
- width: 30px
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
entity: person.ant
name: Ant
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:face-man
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 53%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 53%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
entity: person.katie
name: Katie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:face-woman
styles:
card:
- background: none
- border: none
- border-radius: 0px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
entity: person.person
name: Archie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:face-man-outline
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
Right this is as close as i can get - ive dtiched the mushroom title card - alignment is fine now, however the font doesnt match the other cards:
type: vertical-stack
cards:
- type: horizontal-stack
card_mod:
style: |
ha-card {
display: flex !important;
align-items: center !important;
margin-top: -20px;
}
cards:
- type: custom:button-card
name: |
[[[
return `Hello, ${hass.user.name} !`;
]]]
show_icon: false
show_name: true
show_state: false
tap_action:
action: none
styles:
card:
- background: transparent
- border: none
- box-shadow: none
- padding: 0
- height: 45px
- display: flex
- align-items: center
- justify-content: flex-start
name:
- font-size: 28px
- font-weight: 600
- color: var(--primary-text-color)
- text-align: left
- justify-self: flex-start
- font-family: inherit
- line-height: 1.2
- type: custom:button-card
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
return none;
]]]
hold_action:
action: url
url_path: null
icon: mdi:cog
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 -8px
icon:
- width: 30px
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
entity: person.ant
name: Ant
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:face-man
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 53%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 53%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
entity: person.katie
name: Katie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:face-woman
styles:
card:
- background: none
- border: none
- border-radius: 0px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
entity: person.person
name: Archie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:face-man-outline
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
Solved:
type: vertical-stack
cards:
- type: horizontal-stack
card_mod:
style: |
ha-card {
display: flex !important;
align-items: center !important;
margin-top: -20px;
}
cards:
- type: custom:button-card
name: |
[[[
return `Hello, ${hass.user.name} !`;
]]]
show_icon: false
show_name: true
show_state: false
tap_action:
action: none
styles:
card:
- background: transparent
- border: none
- box-shadow: none
- padding: 0
- height: 45px
- display: flex
- align-items: center
- justify-content: flex-start
name:
- font-size: var(--mush-title-font-size, 24px)
- font-weight: var(--mush-title-font-weight, 600)
- color: var(--mush-title-text-color, var(--primary-text-color))
- text-align: left
- justify-self: flex-start
- font-family: var(--mush-title-font-family, inherit)
- line-height: var(--mush-title-line-height, 1.2)
- type: custom:button-card
tap_action:
action: call-service
service: |
[[[
this.dispatchEvent(new Event('hass-toggle-menu', { bubbles: true, composed: true}));
return none;
]]]
hold_action:
action: url
url_path: null
icon: mdi:cog
color: var(--primary-color)
show_name: false
styles:
card:
- width: 45px
- height: 45px
- border-radius: 99px
- margin: 0 0 0 -8px
icon:
- width: 30px
- type: horizontal-stack
cards:
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
entity: person.ant
name: Ant
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#ant"
icon: mdi:face-man
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 53%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 53%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
entity: person.katie
name: Katie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
- border: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#katie"
icon: mdi:face-woman
styles:
card:
- background: none
- border: none
- border-radius: 0px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
- type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
entity: person.person
name: Archie
show_icon: false
show_name: true
show_state: true
state:
- value: Work
styles:
state:
- color: rgba(221,87,70,0.7)
- value: not_home
styles:
state:
- color: "#79AC78"
custom_fields:
skin:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:circle
styles:
card:
- border-radius: 99px
- box-shadow: none
icon:
- height: 50px
- width: 50px
- color: var(--skin-color)
face:
card:
type: custom:button-card
tap_action:
action: navigate
navigation_path: "#archie"
icon: mdi:face-man-outline
styles:
card:
- background: none
- border-radius: 99px
- box-shadow: none
icon:
- width: 55px
- color: var(--face-color)
styles:
card:
- background: var(--card-background-color)
- height: 70px
- border-radius: 20px
- padding: 15px
name:
- position: absolute
- bottom: 45%
- left: 54%
- font-size: 18px
- font-weight: 600
- color: var(--primary-color)
state:
- position: absolute
- bottom: 21%
- left: 54%
- font-size: 14px
- font-weight: 550
- color: "#51829B"
custom_fields:
skin:
- position: absolute
- bottom: 11%
- left: 8%
face:
- position: absolute
- bottom: 7%
- left: 6%
Iām trying to apply styling in a nested layout, instead of defining it for each card. It works fine when I apply it individually, however I canāt get it work in nested mode, what am I doing wrong?
Appreciate the help!
Full code:
type: custom:mushroom-chips-card
chips:
- type: template
tap_action:
action: navigate
navigation_path: "#notify"
icon: mdi:bell-outline
hold_action:
action: none
double_tap_action:
action: none
content: ""
icon_color: null
card_mod:
style: |
ha-card {
--chip-background: none;
}
- type: conditional
conditions:
- condition: user
users:
- 1
chip:
type: entity
entity: person.1
content_info: none
use_entity_picture: true
tap_action:
action: navigate
navigation_path: "#profile"
- type: conditional
conditions:
- condition: user
users:
- 2
chip:
type: entity
entity: person.2
content_info: none
use_entity_picture: true
tap_action:
action: navigate
navigation_path: "#profile"
- type: conditional
conditions:
- condition: user
users:
- 3
chip:
type: entity
entity: person.3
content_info: none
use_entity_picture: true
tap_action:
action: navigate
navigation_path: "#profile"
alignment: end
card_mod:
style: |
ha-card {
margin-top: 20px;
}
:
mushroom-entity-chip:nth-child(2) ha-card,
mushroom-entity-chip:nth-child(3) ha-card,
mushroom-entity-chip:nth-child(4) ha-card {
{% set person_entity = entity %}
{% if is_state(person_entity, 'home') %}
--chip-border-color: #097969 !important;
{% elif is_state(person_entity, 'away') %}
--chip-border-color: red !important;
{% else %}
--chip-border-color: grey !important;
{% endif %}
}
Hi,
Does anyone know how to change the color of an iconās .shape depending on dark or light themes?
I managed to make this change to the map background using @media (prefers-color-scheme: dark) and it works very well however I canāt do it with the icon background.
here is my card code :
type: custom:mushroom-light-card
entity: light.lampes_salon
icon: mdi:lightbulb
fill_container: false
layout: horizontal
secondary_info: none
name: Salon
show_brightness_control: true
icon_color: orange
collapsible_controls: true
use_light_color: false
show_color_control: false
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: white !important;
--icon-symbol-size: 25px;
--icon-size: 40px;}
mushroom-state-info$: |
.container {
--card-primary-font-size: 22px;}
.: |
ha-card {
border-radius: 50px;
height: 57px !important;
background-color: #E5E5E5;
border: none;
}
@media (prefers-color-scheme: dark) {
ha-card {background-color: #282828;}
}
If anyone has any ideas, Iām all ears !
I donāt want to go through the hassle of changing the theme colors.
card_mod:
style:
mushroom-shape-icon$: |
@media (prefers-color-scheme: dark) {
.shape {
background: red !important;
}
}
Thanks a lot !!! It works! Yet I thought I had tried to insert the code in that location 
How to do it, I mean changing the color depending on the darker or lighter theme, on the whole card?
If I understand correctly, this code allows you to do what you want :
Hello everyone,
I am building myself a dedicated page (dashboard with mushroom cards) for all updates for HA, its intergrations and addons and HACS and any extras to be all in one place with tools to accommodate pre tasks (like link to backup page etc) before any update is initiated.
@dimitri.landerloos
Do you think it is possible to invoke the native shutdown pop-up window (like a VB modal or lightbox applet) on the system page via a chip card via script or code etc?
I was wondering if I could also do this via Card Mod on the chip card.
The pop-up is a good option as it has safety built in as a 2 or 3 click choice and confirmation before initiating any of the options.
Again, it is so all necessary tools for maintenance tasks are in one place.
I would place a short screen video capture to show what I mean but Iām not sure as a limited member I can do this yetā¦
Please noteā¦ I already have the basic chip cards setup to invoke the standard entities but they are dangerous as all you need to do is accidentally glide and click your mouse over the chip card and boom down goes your system plus there is no confirmation that you are about to preform the reboot or shutdown action.
I suppose you could build one in manually but really I am after the official Modal pop-up as it has all the choices and protective confirmations already in place.
Any thoughts appreciatedā¦ ?
Thanks in advance.
Screen shot examples below.
Is it possible to pad out the chips to evenly (and dynamically, I guess) take up the width of the whole column?
eg like the 4 entity cards. top chip row is center, bottom one is justified.
Please post your current code and the dashboard type (sections,masonry, etcā¦)
Just use the confirmation option
An example
type: custom:mushroom-chips-card
chips:
- type: entity
entity: fan.bedroom_fan
tap_action:
action: call-service
confirmation:
text: Are You Sure?
service: script.fan_speed_4