Custom CSS for markers

[nathan-gs]

          For a stock map card I managed to fix alignment by

.marker:not(:has(.entity-picture)) {
      text-align: center;}

in an external js-file.

Originally posted by @ildar170975 in #17 (comment)

[nathan-gs]

Implemented in v0.9.0

[nathan-gs]

@ildar170975 this will make you happy (fixes the alignment problems)

[ildar170975]

Thanks a lot!!!
These days I am very far from a civilian PC, will check it later )))

[ildar170975]

@nathan-gs
Just tested the new css option.
It works fine - but only for attributes which are NOT overridden on lower levels.
Consider this code:

type: custom:map-card
entities:
  - entity: person.samsung_p6800
    css: 'border-radius: 0;'

The border-radius property is customized on a map-card-entity-marker level.
But on a lower .marker level this property is hard-coded as 50%.
So, the css property is GREAT for some properties - and cannot work for some other properties.

Look at this:

For example, by using css option we cannot apply a border: 1px solid red - but can define a variable --ha-marker-color and achieve the same goal. But border-radius is defined as "50%" w/o any CSS variable - so we cannot customize this property.

Probably not a big deal, just for clarification...

Update: proposed a PR to add a CSS variable for border-radius.

[shaiger]

I was hoping to change the border width/background color of the marker, this does not seem to be possible with the current implementation.

[ildar170975]

@shaiger post a short code of your failed attempt.

[shaiger]

css: 'background-color: blue;'
css: 'border-width: thick;'
etc

(I apologize in advance if my poor knowhow in CSS is generating noise)

[ildar170975]

@shaiger
The current situation is described here:
"It works fine - but only for attributes which are NOT overridden on lower levels."

Check this code - here some CSS variable is defined:

type: custom:map-card
entities:
  - entity: device_tracker.ipad_air_2_companion
    css: '--ha-marker-border-radius: 0;'

On a lower level in a .marker element this variable is used:

So, the css option provides a way to define CSS variables which are used inside a marker. If you wish a full control over ANY element - you should use card-mod as a flexible & powerful tool.