yes, I get that.
sorry for being daft, by why do we need the mod-card in the first place?
the decluttering, nor the template-entity-row require that?
weāre not targeting the ha-card element are we?
is it because they now are nested that makes the mod-card a requirement?
If template-entity-row does not have ha-card - then mod-card is needed.
Far away from PC, cannot check.
ok so with mod-card:
card:
type: custom:mod-card
card_mod:
style: '[[style]]'
card:
type: custom:template-entity-row
entity: '[[entity]]'
etcetc
and adapted style:
- style:
template-entity-row $:
div#wrapper:
state-badge $: |
ha-state-icon {
color: red !important;
}
.: |
.state {
color: magenta;
}
.info {
color: cyan;
}
.info .secondary {
color: orange;
}
this kicks in 
well, I cant test the icon yet as my rows have an entity_picture, but I take it we can assume it will work.
Both as stand alone entity, or as auto-entities card.
next step is to check wether the config.entity can be used, as that would be crucial.
edit
nope, no such luck yet, with either config.entity or this.entity_id:
.: |
.state {
color: {{'magenta' if states(this.entity_id)|int(-2) == 0}};
}
templating itself works fine
.: |
.state {
color: {{'magenta' if 2 < 3}};
}
BINGO!
.state {
color:
{% if states['this.entity_id'].state|int(-2) == 0 %} red
{% else %} yellow
{% endif %}
}
works perfectly as does:
.: |
.state {
color:
{{'red' if states['this.entity_id'].state|int(-2) == 0 }}
}
after some fiddling with the compound card_mod; this finally is the full code for a auto-entities filled card with decluttering templated template-entity-rows . Animated entity_picture and colored name, state and secondary info based on state
- type: custom:auto-entities
card:
type: entities
card_mod:
style: |
ha-card {
box-shadow: none;
margin: -8px 0px -16px 0px;
}
filter:
include:
- entity_id: sensor.*_verjaar*
<<: &options
options:
type: custom:decluttering-card
template: verjaardag
variables:
- entity: this.entity_id
- style:
template-entity-row $:
div#wrapper: |
state-badge {
animation:
{{'rotation 1.5s linear infinite'
if states['this.entity_id'].state|int(-2) == 0 }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
};
.: |
.state {
color:
{{'red' if states['this.entity_id'].state|int(-2) == 0 }}
}
.info {
color: {{'cyan' if states['this.entity_id'].state|int(-2) == 0 }};
}
.info .secondary {
color: {{'orange' if states['this.entity_id'].state|int(-2) == 0 }};
}
- style:
template-entity-row $:
div#wrapper: |
{% set feest = states['this.entity_id'].state|int(-2) == 0 %}
state-badge {
animation:
{{'rotation 1.5s linear infinite' if feest }}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
};
.: |
{% set feest = states['this.entity_id'].state|int(-2) == 0 %}
.undefined {
background: {{'lightgray' if feest }};
}
.state {
color:
{{'darkorange' if feest }};
}
.info {
color: {{'var(--alert-color)' if feest }};
}
.info .secondary {
color: {{'orange' if feest }};
}
Marius, check if config.card.config.entity works )
Ok. Below is what I found by using the code inspector. I hope this screenshot is enough for others to be able to help. Essentially I was just wanting to change the room name to yellow.
My current code is below:
type: custom:minimalistic-area-card
card_mod:
style:
.buttons ha-icon-button:not(.state-on):
state-badge $: |
ha-state-icon {
color: black !important;
}
title: Back Deck
area: back_deck
shadow: true
hide_unavailable: true
state_color: true
tap_action:
action: navigate
navigation_path: /dashboard-automatic/back-porch
entities:
- entity: light.all_back_deck_lights
- entity: switch.back_deck_fountain
- entity: switch.back_deck_speaker_power
It seems pretty simple because the header is not inside a shadow root. Try with this:
type: custom:minimalistic-area-card
card_mod:
style:
.: |
.card-header {
color: yellow !important;
}
.buttons ha-icon-button:not(.state-on):
state-badge $: |
ha-state-icon {
color: black !important;
}
Following various guides here Iām trying to update this card type so that when binary sensor status is Away (off) then the Home is bold and red
Iād also like to grey the image
Iāve got some way towards it, but having a couple of issues;
Are you able to assist at all?
entities:
- entity: binary_sensor.harley
tap_action:
action: call-service
service: input_button.press
data:
entity_id: input_button.cats_harley_toggle_location
card_mod:
style: >
:host {
font-weight: {% if is_state('binary_sensor.harley', 'on') %} normal {% else
%} bold {% endif %};
color: {% if is_state('binary_sensor.harley', 'off') %} #df4c1e {% endif %};
}
What type of card are those? Could you post the structure of the HTML of your cards? Just like @wtstreetglow did before. Maybe looking at the HTML I can give you some tips.
I was actually planning to do that but was struggling to grab it when I posted
This is what i can grab, iām not sure what is actually useful here!
--material-shadow-elevation-2dp: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
--material-shadow-elevation-3dp: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12), 0 3px 3px -2px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-4dp: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-6dp: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-8dp: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-12dp: 0 12px 16px 1px rgba(0, 0, 0, 0.14), 0 4px 22px 3px rgba(0, 0, 0, 0.12), 0 6px 7px -4px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-16dp: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
--material-shadow-elevation-24dp: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.4);
--material-disabled-text-color: var(--light-theme-disabled-color, rgba(0, 0, 0, 0.38));
--material-primary-color: var(--primary-color, #6200ee);
--material-primary-contrast-color: var(--dark-theme-base-color, #fff);
--material-primary-text-color: var(--material-primary-color);
--material-error-color: var(--error-color, #b00020);
--material-error-text-color: var(--material-error-color);
--material-disabled-color: rgba(0, 0, 0, 0.26);
--material-divider-color: rgba(0, 0, 0, 0.12);
--text-primary-color: #ffffff;
--text-light-primary-color: #212121;
--primary-color: #03a9f4;
--dark-primary-color: #0288d1;
--light-primary-color: #b3e5fc;
--accent-color: #ff9800;
--scrollbar-thumb-color: rgb(194, 194, 194);
--error-color: #db4437;
--warning-color: #ffa600;
--success-color: #43a047;
--info-color: #039be5;
--header-height: 56px;
--label-badge-red: var(--error-color);
--label-badge-blue: var(--info-color);
--label-badge-green: var(--success-color);
--label-badge-yellow: var(--warning-color);
--label-badge-grey: #9e9e9e;
--state-icon-color: #44739e;
--energy-grid-consumption-color: #488fc2;
--energy-solar-color: #ff9800;
--energy-non-fossil-color: #0f9d58;
--energy-battery-out-color: #4db6ac;
--energy-battery-in-color: #f06292;
--energy-gas-color: #8e021b;
--energy-water-color: #00bcd4;
--dark-divider-opacity: 0.12;
--dark-disabled-opacity: 0.38;
--dark-secondary-opacity: 0.54;
--dark-primary-opacity: 0.87;
--light-divider-opacity: 0.12;
--light-disabled-opacity: 0.3;
--light-secondary-opacity: 0.7;
--light-primary-opacity: 1;
--rgb-primary-color: 3,169,244;
--rgb-accent-color: 255,152,0;
--rgb-text-primary-color: 255,255,255;
--red-color: #f44336;
--pink-color: #e91e63;
--purple-color: #926bc7;
--deep-purple-color: #6e41ab;
--indigo-color: #3f51b5;
--blue-color: #2196f3;
--light-blue-color: #03a9f4;
--cyan-color: #00bcd4;
--teal-color: #009688;
--green-color: #4caf50;
--light-green-color: #8bc34a;
--lime-color: #cddc39;
--yellow-color: #ffeb3b;
--amber-color: #ffc107;
--orange-color: #ff9800;
--deep-orange-color: #ff6f22;
--brown-color: #795548;
--light-grey-color: #bdbdbd;
--grey-color: #9e9e9e;
--dark-grey-color: #606060;
--blue-grey-color: #607d8b;
--black-color: #000000;
--white-color: #ffffff;
--state-active-color: var(--amber-color);
--state-inactive-color: var(--grey-color);
--state-alarm_control_panel-armed_away-color: var(--green-color);
--state-alarm_control_panel-armed_custom_bypass-color: var(--green-color);
--state-alarm_control_panel-armed_home-color: var(--green-color);
--state-alarm_control_panel-armed_night-color: var(--green-color);
--state-alarm_control_panel-armed_vacation-color: var(--green-color);
--state-alarm_control_panel-arming-color: var(--orange-color);
--state-alarm_control_panel-disarming-color: var(--orange-color);
--state-alarm_control_panel-pending-color: var(--orange-color);
--state-alarm_control_panel-triggered-color: var(--red-color);
--state-alert-off-color: var(--orange-color);
--state-alert-on-color: var(--red-color);
--state-binary_sensor-active-color: var(--amber-color);
--state-binary_sensor-battery-on-color: var(--red-color);
--state-binary_sensor-carbon_monoxide-on-color: var(--red-color);
--state-binary_sensor-gas-on-color: var(--red-color);
--state-binary_sensor-heat-on-color: var(--red-color);
--state-binary_sensor-lock-on-color: var(--red-color);
--state-binary_sensor-moisture-on-color: var(--red-color);
--state-binary_sensor-problem-on-color: var(--red-color);
--state-binary_sensor-safety-on-color: var(--red-color);
--state-binary_sensor-smoke-on-color: var(--red-color);
--state-binary_sensor-sound-on-color: var(--red-color);
--state-binary_sensor-tamper-on-color: var(--red-color);
--state-climate-auto-color: var(--green-color);
--state-climate-cool-color: var(--blue-color);
--state-climate-dry-color: var(--orange-color);
--state-climate-fan_only-color: var(--cyan-color);
--state-climate-heat-color: var(--deep-orange-color);
--state-climate-heat-cool-color: var(--amber-color);
--state-cover-active-color: var(--purple-color);
--state-device_tracker-active-color: var(--blue-color);
--state-device_tracker-home-color: var(--green-color);
--state-fan-active-color: var(--cyan-color);
--state-humidifier-on-color: var(--blue-color);
--state-lawn_mower-error-color: var(--red-color);
--state-lawn_mower-mowing-color: var(--teal-color);
--state-light-active-color: var(--amber-color);
--state-lock-jammed-color: var(--red-color);
--state-lock-locked-color: var(--green-color);
--state-lock-locking-color: var(--orange-color);
--state-lock-unlocked-color: var(--red-color);
--state-lock-unlocking-color: var(--orange-color);
--state-lock-open-color: var(--red-color);
--state-lock-opening-color: var(--orange-color);
--state-media_player-active-color: var(--light-blue-color);
--state-person-active-color: var(--blue-color);
--state-person-home-color: var(--green-color);
--state-plant-active-color: var(--red-color);
--state-siren-active-color: var(--red-color);
--state-sun-above_horizon-color: var(--amber-color);
--state-sun-below_horizon-color: var(--indigo-color);
--state-switch-active-color: var(--amber-color);
--state-update-active-color: var(--orange-color);
--state-vacuum-active-color: var(--teal-color);
--state-valve-active-color: var(--blue-color);
--state-sensor-battery-high-color: var(--green-color);
--state-sensor-battery-low-color: var(--red-color);
--state-sensor-battery-medium-color: var(--orange-color);
--state-water_heater-eco-color: var(--green-color);
--state-water_heater-electric-color: var(--orange-color);
--state-water_heater-gas-color: var(--orange-color);
--state-water_heater-heat_pump-color: var(--orange-color);
--state-water_heater-high_demand-color: var(--deep-orange-color);
--state-water_heater-performance-color: var(--deep-orange-color);
--history-unavailable-color: transparent;
--history-unknown-color: var(--dark-grey-color);
--material-h6-font-size: 1.25rem;
--material-small-font-size: 0.875rem;
--material-caption-font-size: 0.75rem;
--material-button-font-size: 0.875rem;
--shadow-transition: {transition:box-shadow .28s cubic-bezier(.4, 0, .2, 1)};
--shadow-none: {box-shadow:none};
--shadow-elevation-2dp: {box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2)};
--shadow-elevation-3dp: {box-shadow:0 3px 4px 0 rgba(0,0,0,.14),0 1px 8px 0 rgba(0,0,0,.12),0 3px 3px -2px rgba(0,0,0,.4)};
--shadow-elevation-4dp: {box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.4)};
--shadow-elevation-6dp: {box-shadow:0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12),0 3px 5px -1px rgba(0,0,0,.4)};
--shadow-elevation-8dp: {box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.4)};
--shadow-elevation-12dp: {box-shadow:0 12px 16px 1px rgba(0,0,0,.14),0 4px 22px 3px rgba(0,0,0,.12),0 6px 7px -4px rgba(0,0,0,.4)};
--shadow-elevation-16dp: {box-shadow:0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12),0 8px 10px -5px rgba(0,0,0,.4)};
--shadow-elevation-24dp: {box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.4)};
--paper-font-common-base: {font-family:Roboto,Noto,sans-serif;-webkit-font-smoothing:antialiased};
--paper-font-common-code: {font-family:"Roboto Mono",Consolas,Menlo,monospace;-webkit-font-smoothing:antialiased};
--paper-font-common-expensive-kerning: {text-rendering:optimizeLegibility};
--paper-font-common-nowrap: {white-space:nowrap;overflow:hidden;text-overflow:ellipsis};
--paper-font-display4: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:112px;font-weight:300;letter-spacing:-.044em;line-height:120px};
--paper-font-display3: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:56px;font-weight:400;letter-spacing:-.026em;line-height:60px};
--paper-font-display2: {@apply --paper-font-common-base;font-size:45px;font-weight:400;letter-spacing:-.018em;line-height:48px};
--paper-font-display1: {@apply --paper-font-common-base;font-size:34px;font-weight:400;letter-spacing:-.01em;line-height:40px};
--paper-font-headline: {@apply --paper-font-common-base;font-size:24px;font-weight:400;letter-spacing:-.012em;line-height:32px};
--paper-font-title: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:20px;font-weight:500;line-height:28px};
--paper-font-subhead: {@apply --paper-font-common-base;font-size:16px;font-weight:400;line-height:24px};
--paper-font-body2: {@apply --paper-font-common-base;font-size:14px;font-weight:500;line-height:24px};
--paper-font-body1: {@apply --paper-font-common-base;font-size:14px;font-weight:400;line-height:20px};
--paper-font-caption: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:12px;font-weight:400;letter-spacing:.011em;line-height:20px};
--paper-font-menu: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:13px;font-weight:500;line-height:24px};
--paper-font-button: {@apply --paper-font-common-base;@apply --paper-font-common-nowrap;font-size:14px;font-weight:500;letter-spacing:.018em;line-height:24px;text-transform:uppercase};
--paper-font-code2: {@apply --paper-font-common-code;font-size:14px;font-weight:700;line-height:20px};
--paper-font-code1: {@apply --paper-font-common-code;font-size:14px;font-weight:500;line-height:20px};
--margin-title-ltr: 0 0 0 24px;
--margin-title-rtl: 0 24px 0 0;
--layout_-_display: flex;
--layout-inline_-_display: inline-flex;
--layout-horizontal_-_display: var(--layout_-_display);
--layout-horizontal_-_-ms-flex-direction: row;
--layout-horizontal_-_-webkit-flex-direction: row;
--layout-horizontal_-_flex-direction: row;
--layout-horizontal-reverse_-_display: var(--layout_-_display);
--layout-horizontal-reverse_-_-ms-flex-direction: row-reverse;
--layout-horizontal-reverse_-_-webkit-flex-direction: row-reverse;
--layout-horizontal-reverse_-_flex-direction: row-reverse;
--layout-vertical_-_display: var(--layout_-_display);
--layout-vertical_-_-ms-flex-direction: column;
--layout-vertical_-_-webkit-flex-direction: column;
--layout-vertical_-_flex-direction: column;
--layout-vertical-reverse_-_display: var(--layout_-_display);
--layout-vertical-reverse_-_-ms-flex-direction: column-reverse;
--layout-vertical-reverse_-_-webkit-flex-direction: column-reverse;
--layout-vertical-reverse_-_flex-direction: column-reverse;
--layout-wrap_-_-ms-flex-wrap: wrap;
--layout-wrap_-_-webkit-flex-wrap: wrap;
--layout-wrap_-_flex-wrap: wrap;
--layout-wrap-reverse_-_-ms-flex-wrap: wrap-reverse;
--layout-wrap-reverse_-_-webkit-flex-wrap: wrap-reverse;
--layout-wrap-reverse_-_flex-wrap: wrap-reverse;
--layout-flex-auto_-_-ms-flex: 1 1 auto;
--layout-flex-auto_-_-webkit-flex: 1 1 auto;
--layout-flex-auto_-_flex: 1 1 auto;
--layout-flex-none_-_-ms-flex: none;
--layout-flex-none_-_-webkit-flex: none;
--layout-flex-none_-_flex: none;
--layout-flex_-_-ms-flex: 1 1 0.000000001px;
--layout-flex_-_-webkit-flex: 1;
--layout-flex_-_flex: 1;
--layout-flex_-_-webkit-flex-basis: 0.000000001px;
--layout-flex_-_flex-basis: 0.000000001px;
--layout-flex-2_-_-ms-flex: 2;
--layout-flex-2_-_-webkit-flex: 2;
--layout-flex-2_-_flex: 2;
--layout-flex-3_-_-ms-flex: 3;
--layout-flex-3_-_-webkit-flex: 3;
--layout-flex-3_-_flex: 3;
--layout-flex-4_-_-ms-flex: 4;
--layout-flex-4_-_-webkit-flex: 4;
--layout-flex-4_-_flex: 4;
--layout-flex-5_-_-ms-flex: 5;
--layout-flex-5_-_-webkit-flex: 5;
--layout-flex-5_-_flex: 5;
--layout-flex-6_-_-ms-flex: 6;
--layout-flex-6_-_-webkit-flex: 6;
--layout-flex-6_-_flex: 6;
--layout-flex-7_-_-ms-flex: 7;
--layout-flex-7_-_-webkit-flex: 7;
--layout-flex-7_-_flex: 7;
--layout-flex-8_-_-ms-flex: 8;
--layout-flex-8_-_-webkit-flex: 8;
--layout-flex-8_-_flex: 8;
--layout-flex-9_-_-ms-flex: 9;
--layout-flex-9_-_-webkit-flex: 9;
--layout-flex-9_-_flex: 9;
--layout-flex-10_-_-ms-flex: 10;
--layout-flex-10_-_-webkit-flex: 10;
--layout-flex-10_-_flex: 10;
--layout-flex-11_-_-ms-flex: 11;
--layout-flex-11_-_-webkit-flex: 11;
--layout-flex-11_-_flex: 11;
--layout-flex-12_-_-ms-flex: 12;
--layout-flex-12_-_-webkit-flex: 12;
--layout-flex-12_-_flex: 12;
--layout-start_-_-ms-flex-align: start;
--layout-start_-_-webkit-align-items: flex-start;
--layout-start_-_align-items: flex-start;
--layout-center_-_-ms-flex-align: center;
--layout-center_-_-webkit-align-items: center;
--layout-center_-_align-items: center;
--layout-end_-_-ms-flex-align: end;
--layout-end_-_-webkit-align-items: flex-end;
--layout-end_-_align-items: flex-end;
--layout-baseline_-_-ms-flex-align: baseline;
--layout-baseline_-_-webkit-align-items: baseline;
--layout-baseline_-_align-items: baseline;
--layout-start-justified_-_-ms-flex-pack: start;
--layout-start-justified_-_-webkit-justify-content: flex-start;
--layout-start-justified_-_justify-content: flex-start;
--layout-center-justified_-_-ms-flex-pack: center;
--layout-center-justified_-_-webkit-justify-content: center;
--layout-center-justified_-_justify-content: center;
--layout-end-justified_-_-ms-flex-pack: end;
--layout-end-justified_-_-webkit-justify-content: flex-end;
--layout-end-justified_-_justify-content: flex-end;
--layout-around-justified_-_-ms-flex-pack: distribute;
--layout-around-justified_-_-webkit-justify-content: space-around;
--layout-around-justified_-_justify-content: space-around;
--layout-justified_-_-ms-flex-pack: justify;
--layout-justified_-_-webkit-justify-content: space-between;
... had to trim as too long - lmk if you need this!
Is this what youāre looking for?
Iāve tried copying all elements from the inspector and Iām not convinced any are what you needā¦
Element / OuterHTML
<div class="entity action undefined" tabindex="0"></div>
selector
ha-card > div > div:nth-child(1)
JSPath
document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("ha-drawer > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > horizontal-layout").shadowRoot.querySelector("#columns > div:nth-child(2) > hui-card:nth-child(1) > hui-vertical-stack-card").shadowRoot.querySelector("#root > hui-card:nth-child(2) > hui-glance-card").shadowRoot.querySelector("ha-card > div > div:nth-child(1)")
Xpath
//*[@id="root"]/hui-card[2]/hui-glance-card//ha-card/div/div[1]
Full Xpath
/html/body/home-assistant//home-assistant-main//ha-drawer/partial-panel-resolver/ha-panel-lovelace//hui-root//div/div[2]/hui-view/horizontal-layout//div/div[2]/hui-card[1]/hui-vertical-stack-card//div/hui-card[2]/hui-glance-card//ha-card/div/div[1]
The image is:
<state-badge style="background-image: url("harley.jpg");"></state-badge>
The bottom text is
<div> <!--?lit$1714755762$-->Home </div>
No, those are just the root variables. Just take a screenshot of the HTML structure, it is easier to read than the paths.
Edit: In the Xpath I see that you are using a Glance Card, that is enough, I can reproduce it in local.
Go to 1st post of this thread - there is a link at the bottom - you will see a list - find Glance card.
Use it as a starting point.
As for grey image: an example is provided for Entities card, find it in that list.
I am seeing that @Ildar_Gabdullin already gave you a post with multiple tips for the Glance Card. But try also this approach, it should add the proper styles only in those entities in which their state is off:
type: glance
entities:
- entity: binary_sensor.harley
- entity: binary_sensor.cocoa
- entity: binary_sensor.blossom
card_mod:
style:
.entity $: |
{% set entities = config.entities | map(attribute='entity') | list %}
{% for entity in entities %}
{% if is_state(entity, 'off') %}
{% set name = state_attr(entity, 'friendly_name') %}
.name[title="{{ name }}"] + state-badge {
filter: opacity(0.5) grayscale(1);
}
.name[title="{{ name }}"] ~ div {
color: red;
font-weight: bold;
}
{% endif %}
{% endfor %}
A very brilliant use of templates ))
Hi, can I customize Lovelace Badges with card-mod? I want to make this change its background color per condition, but canāt find any guide how to do that.
I am not using new badges (2024.x) - guess using card-mod is not possible.
now if you could make the entity_picture of a person in Maps be grayscale() when not_home, I could finally get rid of my custom-uiā¦
its the only reason for me to still use custom-ui, because I can do:
homeassistant:
customize_domain:
person:
templates:
entity_picture: >
var id = entity.entity_id.split('.')[1];
return state === 'not_home'
? '/local/family/' + id + '_not_home.png' : '/local/family/' + id + '.jpg';
and have the Map picture be grayscale
in all other cards I can use card_mod to have the picture be grayscale
# not_home_picture: #entities
style:
hui-generic-entity-row:
$: |
state-badge {
filter:
{{'grayscale(100%)' if is_state(config.entity,'not_home') else 'none'}};
}
or
# not_home_picture_glance:
style: |
state-badge {
filter:
{{'grayscale(100%)' if is_state(config.entity,'not_home') else 'none'}};
}
or a tile:
card_mod:
style:
ha-tile-image$: |
.image {
{% set zones = states.zone|map(attribute='name')|list %}
filter: {{'grayscale(1)' if is_state(config.entity,'not_home') else 'none'}};
}
Only in Maps I can not get it to work.
Challengeā¦
I donāt use maps, but I thinlk that they are separated from lovelace dashboards, it could be hard to achieve it with card-mod. Maybe it is possible with a custom card-mod theme. Iāll mount a docker instance with a map to experiment a bit with it.
so I am talking about the type: map card, but also with the panel view on a type map card. Not so much the left side menu Map, which I have hidden with your custom sidebar card
Ahh, in a map card. That should be easier and pretty similar to the code that I posted before. Let me make an example for you and it should do the same work