I’ve tried any mod I could find in this thread, and none seem to work the using Map card like this buit with auto-entities
Note I am also not using person entities anymore, because they lose their lat/long when home on wifi… Composite device trackers work much better in that regard.
type: custom:auto-entities
show_empty: false
filter:
include:
- #domain: person
entity_id: device_tracker.*composite
not:
state: home
options:
card_mod:
style:
### aware this is not the correct DOM here, but only posting for reference sake, and show what I need
ha-entity-marker:
$: |
entity-picture {
filter: {{'grayscale()' if not is_state(config.entity,'home')
else 'none'}};
}
card:
type: map
hours_to_show: 48
auto_fit: true
dark_mode: ${(/ight|Dark|Matrix/).test(theme)} #${darkmode}
card_mod:
style: |
ha-card {
box-shadow: none;
}
seems I have but 1 solution, and that is go back to my custom-ui plugin and do this:
homeassistant:
customize:
person.marijn: &picture
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 entity itself use another picture based on state.
it makes it 100% reliable, show the correct picture also in Moreinfo, and does so system wide, without the need for any card_mod anywhere on the Map card, or any card I need to show these trackers…
Had hoped it not to be the case, but I see no other way
I’ve tried already few things but unfortunately I was not able to achieve what i’m looking for. Maybe someone can help me, it would be much appreciated.
I have a card which displays the room temperature. And I want to display the window icons in the header of that card, and the window icons should change color and the icon depends on the status (open/closed). Maybe A picture makes it easier to understand.
I have been searching through these threads to try and work out where I’m going wrong. I am only trying to make a simple change but cant get my head around the structure and shadow-root etc.
Here is one of the many codes I have tried
square: false
type: grid
title: Whos Where
cards:
- type: horizontal-stack
cards:
- type: entity-filter
show_empty: false
entities:
- entity: person.kat
- entity: person.stephen
state_filter:
- home
card:
type: glance
title: Home
- type: entity-filter
show_empty: false
entities:
- person.kat
- person.stephen
state_filter:
- operator: not in
value: home
card:
type: glance
title: Not Home
- type: entities
entities:
- entity: sensor.mcbain_work_shift
- entity: sensor.kats_shift
title: Family Calendar
show_header_toggle: true
state_color: false
columns: 1
card_mod:
style:
hui-grid-card:
$: |-
.card-header {
text-align: center;
}
All I am trying to achieve is to center the title.
Can anyone help and explain where i am going wrong.
Hey guys. I need your help.
I want to style the mini media player card.
Background-change works fine but I want also change the color of the icon.
It doesn’t work.
Can you explain me, how I could the two style elements together?
I was wondering how I can create alternate row colors when using this card-mod. I have a markdown card where I generate HTML based on json I receive from a rest api call. To improve readability, I would like to alternate row colors in this table, using css:
table tr td:nth-child(2) {
background: #ccc;
}
But I can’t figure out where to put this css code.
Even adding a background-color directly in the tag ( < td bgcolor= “color_name | hex_number | rgb_number” > ) doesn’t seem to work.
