🔹 Card-mod - Add css styles to any lovelace card

[Ildar_Gabdullin]

@Mar1us

background color to one heading badge icon?

Starting point:
1st post → link at the bottom → Heading

[Mar1us]

i know your fantastic overview and checked this out but i couldn´t find a answer to my question. I want a background of a badge in the heading title.

[Ildar_Gabdullin]

that is why a said it is a starting point… Find a post about Heading.

[Ildar_Gabdullin]

Map card - some animations

code

type: map
entities:
  - entity: ...
card_mod:
  style:
    ha-map $:
      ha-entity-marker $: |
        .marker {
          outline-style: solid;
          outline-width: 1px;
          outline-color: var(--accent-color);
          animation: resizing_outline 1s linear infinite;
        } 
        @keyframes resizing_outline {
          0% {
            outline-offset: 0;
          }
          25% {
            outline-offset: 5px;
          }
          50% {
            outline-offset: 10px;
          }
          75% {
            outline-offset: 15px;
          }
          100% {
            outline-offset: 20px;
          }
        }

code

type: map
entities:
  - entity: ...
card_mod:
  style:
    ha-map $:
      ha-icon $: |
        ha-svg-icon {
          animation: resizing 1s linear infinite;
        }
        @keyframes resizing {
          0% {
            transform: scale(0.3,0.3);
          }
          25% {
            transform: scale(0.7,0.7);
          }
          50% {
            transform: scale(1,1);
          }
          75% {
            transform: scale(1.15,1.15);
          }
          100% {
            transform: scale(1.3,1.3);
          }
        }

[Mar1us]

that is working for me:

        .badges hui-heading-badge:nth-child(4) hui-entity-heading-badge $: |
          ha-state-icon {
            --mdc-icon-size: 20px;
            color: white;
            background: #1c1c1c !important;
            border-radius: 25px;
            padding: 10px;
          }

[Mariusthvdb (Marius)]

nice animations yes! always fun to customize the map.

let’s not use a target-lock…

btw, the shorthand for the outline also works:

  - type: map
    card_mod:
      style:
        ha-map $:
          ha-entity-marker $: |
            .marker {
              outline: solid 1px var(--warning-color);
              animation: resizing_outline 1s linear infinite;
            }
            @keyframes resizing_outline {
              0% {outline-offset: 0;}
              25% {outline-offset: 5px;}
              50% {outline-offset: 10px;}
              75% {outline-offset: 15px;}
              100% {outline-offset: 20px;}
            }

let’s see if we can add this to card-mod theming

[Ildar_Gabdullin]

@Mariusthvdb

shorthand for the outline also works:

Correct, and shorthand can include an offset too, just wanted to make it more “accessible” for people))

@Mariusthvdb

let’s see if we can add this to card-mod theming

This “changing radius” animation can be useful to highlight some event; so the animation should be switched ON if some conditions are met - try to put a corr. logic in a theme.

[Mariusthvdb (Marius)]

@Ildar_Gabdullin

so the animation should be switched ON if some conditions are met

yes, like

{% set activity = states('sensor.' ~ id ~ '_activity') %}
{%- elif activity in ['Automotive','Cycling','Walking'] %}

actually a great idea

would be something like

  - type: map
    card_mod:
      style:
        ha-map $:
          ha-entity-marker $: |
            .marker {
              {% set id = config.entity.entity_id.split('.')[1] %}
              {% set activity = states('sensor.' ~ id ~ '_activity') %}
              outline: solid 1px var(--warning-color);
              {% if activity in ['Automotive','Cycling','Walking'] %}
              animation: resizing_outline 1s linear infinite;
              {% endif %}
            }

not sure if the config.entity is picked up correctly though. it works if I add it for a person directly

[Ildar_Gabdullin]

@Mariusthvdb

config.entity

cannot use this var
It will work if

type: map
entity: ... #fictitious option for themeing only
entities:
  ...

and if you have several in “entities” - the style must be applied to a particular marker (which is = “entity”)

[Mariusthvdb (Marius)]

yep, thx. will add some anchors then. but the mod needs to change in that case to the actual entity and not the map card

or, try the other style:

  - type: map
    card_mod:
      style:
        ha-map$: |
          {% for entity in config.entities %}
          {% set id = config.entity.entity_id.split('.')[1] %}
          {% set activity = states('sensor.' ~ id ~ '_activity') %}
            {% if activity not in ['Automotive','Cycling','Walking'] %}
              div:has(> ha-entity-marker[entity-id="{{ entity }}"]) {
                animation: resizing_outline 1s linear infinite;
              }
            {% endif %}
          {% endfor %}

but need to pop in the .marker element there
hmm, not that obvious I am afraid
either in the individual entity under the entities:, or in the for loop on the map entities…

[Mariusthvdb (Marius)]

Since you introduced this method of styling the entity in config.entities, could you please help me out going a bit deep to the .marker and set the outline, as Ildar explained above? I can not find the right syntax to go deeper in that ha-entity-marker $: |

setting it globally to the map card works , the challenge lies in applying it to either a single entity, or the for loop. Both need a different path

please have a look if you can find some moment

[VietNgoc (Ngoc John)]

@Mariusthvdb

the challenge lies in applying it to either a single entity, or the for loop. Both need a different path

type: map
entities:
  - entity: device_tracker.demo_home_boy
  - entity: device_tracker.demo_anne_therese
theme_mode: auto
card_mod:
  style:
    ha-map $:
      ha-entity-marker[entity-id="device_tracker.demo_home_boy"] $: |
        .marker {
          outline: solid 4px red;
          border-color: transparent !important;
        }
      ha-entity-marker[entity-id="device_tracker.demo_anne_therese"] $: |
        .marker {
          outline: solid 4px green;
          border-color: transparent !important;
        }

edit: I tried to use loop in the editor, it probably won’t work In a regular template it does…

card_mod:
  style:
    ha-map$: |
      {% set entities = [
        {'entity_id': 'device_tracker.demo_home_boy', 'color': 'red'},
        {'entity_id': 'device_tracker.demo_anne_therese', 'color': 'green'}
      ] %}
      {% for entity in entities %}
        ha-entity-marker[entity-id="{{ entity.entity_id }}"] $: |
          .marker {
            outline: solid 4px {{ entity.color }};
            border-color: transparent !important;
          }
      {% endfor %}

[Mariusthvdb (Marius)]

@Mariusthvdb

div:has

did you also test the div:has in the loop, which made the magic happen before?

should be something like:

  - type: map
    card_mod:
      style:
        ha-map$: |
          {% for entity in config.entities %}
            div:has(> ha-entity-marker[entity-id="{{ entity }}"] $: |
              .marker) { outline: solid 4px red; }
          {% endfor %}

but no, this does not work either… the path breaks I suppose, and moving the closing ) doesnt help

[VietNgoc (Ngoc John)]

with this code in card mod style it is correctly assigned… strange.

type: map
entities:
  - entity: device_tracker.demo_home_boy
  - entity: device_tracker.demo_anne_therese
theme_mode: auto
card_mod:
  style:
    ha-map$: |
      {% set color_mapping = {
        "device_tracker.demo_home_boy": "red",
        "device_tracker.demo_anne_therese": "green"
      } %}
      {% set entities = config.entities | map(attribute='entity') | list %}
      {% for entity in entities %}
      {% set color = color_mapping[entity] %}
      ha-entity-marker[entity-id="{{ entity }}"] $: |
        .marker {
          outline: solid 4px {{ color }};
          border-color: transparent !important;
        }
      {% endfor %}

[Mariusthvdb (Marius)]

figured it would be only for the auto entities, but it isnt, because this does also work straight away:

  - type: map
    card_mod:
      style:
        ha-map $: |
          {% set entities = config.entities | map(attribute='entity') | list %}
          {% for entity in entities %}
            {% if not is_state(entity,'home') %}
             div:has(>  ha-entity-marker[entity-id="{{ entity }}"]) {
                filter: brightness(1.75);
              }
            {% endif %}
          {% endfor %}

so the challenge is to get to the next .marker in the Dom path…

this also works btw:

  - type: map
    card_mod:
      style:
        ha-map $: |
          {% for entity in config.entities %}
            {% if is_state(entity,'home') %}
              div:has(> ha-entity-marker[entity-id="{{ entity }}"]) {
                filter: brightness(1.75);
              }
            {% endif %}
          {% endfor %}

but then we can NOT set the entities as objects, and need to do

entities:
  - person.1
  - person.2
etc

hahaha, try this:

  - type: map
    card_mod:
      style:
        ha-map $: |
          {% for entity in config.entities %}
            {% if is_state(entity,'home') %}
              div:has(> ha-entity-marker[entity-id="{{ entity }}"]) {
                filter: brightness(1.75);
                outline: solid 4px red !important;
                animation: resizing_outline 1s linear infinite;
              }
            {% endif %}
          {% endfor %}
          @keyframes resizing_outline {
            0% {outline-offset: 0;}
            25% {outline-offset: 5px;}
            50% {outline-offset: 10px;}
            75% {outline-offset: 15px;}
            100% {outline-offset: 20px;}
          }

different effect.

getting closer with the activity:

  - type: map
    card_mod:
      style:
        ha-map $: |
          {% for entity in config.entities %}
            {% set id = entity.split('.')[1] %}
            {% set activity = states('sensor.' ~ id ~ '_activity') %}
            {% if activity in ['Automotive','Cycling','Walking'] %}
              div:has(> ha-entity-marker[entity-id="{{ entity }}"]) {
                filter: brightness(1.75);
                outline: solid 2px var(--warning-color);
                animation: resizing_outline 1s linear infinite;
              }
            {% endif %}
          {% endfor %}
          @keyframes resizing_outline {
            0% {outline-offset: 0;}
            25% {outline-offset: 5px;}
            50% {outline-offset: 10px;}
            75% {outline-offset: 15px;}
            100% {outline-offset: 20px;}
          }

(condition now is targeted correctly to the entity. Element still the wrong one of course)

for now I’ll settle for this

  - type: map
    card_mod:
      style:
        ha-map $: |
          {% for entity in config.entities %}
            {% set id = entity.split('.')[1] %}
            {% set activity = states('sensor.' ~ id ~ '_activity') %}
            {% if activity in ['Automotive','Cycling','Walking'] %}
              div:has(> ha-entity-marker[entity-id="{{entity}}"] ) {
                outline: solid 2px var(--warning-color);
                border-radius: 50px;
                animation: resizing_outline 1s linear infinite;
              }
            {% endif %}
          {% endfor %}
          @keyframes resizing_outline {
            0% {outline-offset: 0;}
            25% {outline-offset: 5px;}
            50% {outline-offset: 10px;}
            75% {outline-offset: 15px;}
            100% {outline-offset: 20px;}
          }

the added border-radius makes it practically identical… hurray…

(cant stand not being able to find the correct syntax to target the .marker though, and not being able to set it on an individual entity in the entities list)

[Pierremenard (Francesco Verga)]

Hi,

I really read tons of posts, but I still don’t get it.

I just want the title (“Piano terra - Luci”) be 10px.
I tried:

and I tried:

and many other permutations, without luck.

What am I missing?

Thank you

F.

[Mariusthvdb (Marius)]

stack cards dont have the ha-card element, and require the use of custom:mod-card

so use:

type: custom:mod-card
card:
  type: vertical-stack
  cards:

[VietNgoc (Ngoc John)]

@Mariusthvdb

(cant stand not being able to find the correct syntax to target the .marker though, and not being able to set it on an individual entity in the entities list)

you can modify the marker for individual entities like this, but it can’t be used in Jinja loop. the problem is in the ‘$: |’ cardmod inserts into the style as a string

type: map
entities:
  - entity: device_tracker.demo_home_boy
  - entity: device_tracker.demo_anne_therese
theme_mode: auto
card_mod:
  style:
    ha-map $:
      ha-entity-marker[entity-id="device_tracker.demo_home_boy"] $: |
        .marker {
          outline: solid 4px red;
          border-color: transparent !important;
        }
      ha-entity-marker[entity-id="device_tracker.demo_anne_therese"] $: |
        .marker {
          outline: solid 4px green;
          border-color: transparent !important;
        }

[Mariusthvdb (Marius)]

Yeah, but that is not on the individual entity and like that we need to have all that code repeat.

I’d like to set it once on the top entity using config.entity and be able to paste it with an anchor.

[elchininet]

@Mariusthvdb

I can not find the right syntax to go deeper in that ha-entity-marker $: |

There is an important rule in card-mod. Taken from the documentation:

In order to style elements inside a shadow-root, you will need to make your style: a dictionary rather than a string.

So, the previous code that I gave you will not allow you to go deeper to target the .marker element because the code is already a string. You would need to follow another approach. One solution is to make ha-entity-marker a dictionary and target their attributes using the :host pseudo-class. Something like this:

card_mod:
  style:
    ha-map$:
      ha-entity-marker$: |
        {% set entities = config.entities | map(attribute='entity') | list %}
        {% for entity in entities %}
          {% if is_state(entity, 'not_home') %}
            :host([entity-id="{{ entity }}"]) {
              filter: grayscale(1) brightness(1.75);
            }
            :host([entity-id="{{ entity }}"]) .marker {
              outline: solid 1px red;
              animation: resizing_outline 1s linear infinite;
            }
          {% endif %}
        {% endfor %}
        @keyframes resizing_outline {
          0% {outline-offset: 0;}
          25% {outline-offset: 5px;}
          50% {outline-offset: 10px;}
          75% {outline-offset: 15px;}
          100% {outline-offset: 20px;}
        }