Custom CSS for markers - Githubissues

nathan-gs commented 1 month ago

          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 https://github.com/nathan-gs/ha-map-card/issues/17#issuecomment-2119313749

nathan-gs commented 1 month ago

Implemented in v0.9.0

nathan-gs commented 1 month ago

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

ildar170975 commented 1 month ago

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

ildar170975 commented 1 month ago

@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.

nathan-gs / ha-map-card

Custom CSS for markers #33