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

[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;}
        }

[Mariusthvdb (Marius)]

@elchininet

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.

thank you for that reminder!!
it works still doesnt work however…

made me experiment, and this works, and is even shorter

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

              {% 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;}
            }

not having to set the {% set entities = config.entities | map(attribute='entity') | list %} at all

nice! (well, the silly border is a bit of nonsense ofc , just set to show it also can be changed in the same mod)
could even make the style more dynamic, eg on distance,

  - type: map
    card_mod:
      style:
        ha-map $:
          ha-entity-marker $: |
            {% for entity in config.entities %}
              {% set id = entity.split('.')[1] %}
              {% set activity = states('sensor.' ~ id ~ '_activity') %}
              {% set afstand = states('sensor.thuis_' ~ id ~ '_distance')|int(-5) %}
              {% if afstand >= 300 %} {% set px = 0 %}
              {% elif afstand > 200 %} {% set px = 1 %}
              {% elif afstand > 150 %} {% set px = 2 %}
              {% elif afstand > 100 %} {% set px = 3 %}
              {% elif afstand > 50 %} {% set px = 4 %}
              {% elif afstand > 30 %} {% set px = 5 %}
              {% elif afstand > 20 %} {% set px = 6 %}
              {% elif afstand > 10 %} {% set px = 7 %}
              {% else %} {% set px = 8 %}
              {% endif %}
              {% if activity in ['Automotive','Cycling','Walking'] %}
                :host([entity-id="{{ entity }}"]) .marker {
                  outline: solid {{px}}px var(--warning-color);
                  animation: resizing_outline 1s linear infinite;
                  border: var(--warning-color) {{px}}px dashed;
                }
              {% 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;}
            }

and have some fun changing the animation speed

animation: resizing_outline calc( {{afstand}}s/3 ) linear infinite;

options galore

---

do note that this {% for entity in config.entities %} only works when listing the entries directly, and not as object

so this works:

type: map
entities:
  - person.name1

and this does not work

type: map
entities:
  - entity: person.name1

if the entity object is required because you need to set different config options on the entity, the mod needs adapting

[elchininet]

@Mariusthvdb

made me experiment, and this works, and is even shorter

Good, you got the idea

@Mariusthvdb

nice! (well, the silly border is a bit of nonsense ofc , just set to show it also can be changed in the same mod)

I would start with an opacity for the border of 1 and end with a 0 opacity, it should give you a more smooth animation.

[Mariusthvdb (Marius)]

@elchininet

I would start with an opacity for the border of 1 and end with a 0 opacity, it should give you a more smooth animation.

o nice idea, however, not that easy to implement…

                :host([entity-id='{{entity}}']) .marker {
                  outline: solid {{ns.px}}px var(--warning-color);
                  animation: resizing_outline calc( {{t}}s ) linear infinite;
                  border: var(--warning-color) {{ns.px}}px dashed;
                }

            @keyframes resizing_outline {
              0% {outline-offset: 0;opacity:0;}
              25% {outline-offset: 5px;opacity:0.2;}
              50% {outline-offset: 10px;opacity:0.4;}
              75% {outline-offset: 15px;opacity:0.6;}
              100% {outline-offset: 20px;opacity:1;}
            }

sets opacity on the full marker (including the entity_picture) and not only the border ofc.
Dont think there is an element to target the opacity of the border only? Can we somehow set that on the border element, together with the already set color and width style?

or should I add animation to the border additionally, but then how.

this might work:

            @keyframes resizing_outline {
              0% {outline-offset: 0;}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: transparent; border-color: transparent;}
            }

or the variant, start with transparent

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: transparent; border-color: transparent;}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;}
            }

Already rather smooth, maybe you have more ideas?

[elchininet]

@Mariusthvdb

Already rather smooth, maybe you have more ideas?

Instead of setting an opacity in the element (something that will set the opacity for that element and its children), the opacity should be put in the color itself. The rgb functional notation allows you to set a relative value. This should do the work:

@keyframes resizing_outline {
  0% { outline-offset: 0; outline-color: rgb(from var(--accent-color) r g b / 1); }
  25% { outline-offset: 5px; }
  50% { outline-offset: 10px; }
  75% { outline-offset: 15px; }
  100% { outline-offset: 20px; outline-color: rgb(from var(--accent-color) r g b / 0); }
}

[elias87 (Elias)]

Hi guys,

I am a bit lost here and can’t find a solution.

I want to target this specific div element and the p inside it, the other elements should not be affected. Is this even possible? I want to add to the div element

display: flex; align-items: center;

and to p

color: red; margin: 0 10px;

I tried something like

card_mod:
  style:
    ha-markdown $ ha-markdown-element: |
      div {
        display: flex; 
        align-items: center;
      }
    ha-markdown $ ha-markdown-element div: |
      p {
        color: red; 
        margin: 0 10px;
      }

But this affects all p elements.

[Yoinkz]

Would you mind sharing this?
It really looks awesome!

Also the scene part how does that look when you expand it?

[Mariusthvdb (Marius)]

o that is nice indeed. Im always fighting with those rgba colors when Im using theme variables… didnt know this functionality existed at all, never saw it in HA .

can we also use that with color names or hex values?

rgb(from green r g b / 1)

or

rgb(from '#98878f' r g b / 1)

? up to now, I’ve always added a dedicated variable primary-rgb color to the themes

primary-rgb: 152,135,143

so I can use that in the rgba() syntax. this function now is much prettier!

edit

yes we can… wow

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: rgb(from '#98878f' r g b / 1);}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: rgb(from red r g b / 0.5);}
            }

it does require the spaces between r g b, I tested rgb but that simply returns the border color.

o man this css is really so cool, the effects are simply amazing, adding the transparency on the border-color makes it even more attractive:

            @keyframes resizing_outline {
              0% {outline-offset: 0;outline-color: rgb(from var(--warning-color) r g b / 1);}
              25% {outline-offset: 5px}
              50% {outline-offset: 10px}
              75% {outline-offset: 15px}
              100% {outline-offset: 20px;outline-color: rgb(from var(--alert-color) r g b / 0.5);border-color: transparent;}
            }

perfect!
got something to do today

[Mariusthvdb (Marius)]

for the badge modders among us:
Ive just found that we can use the variable var(--badge-color) in our modifications:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: sensor.next_alarm
  color: var(--alert-color) # this will be inherited by the mod below when using var(--badge-color)
  tap_action:
    action: navigate
    navigation_path: /ui-instellingen/wekker_instellingen
visibility:
  - condition: state
    entity: binary_sensor.wekker_voor_morgen
    state: 'on'
card_mod:
  style:
    hui-entity-badge:
      $:
        ha-badge:
          $: |
            .badge {
              border: 2px solid var(--badge-color) !important;
            }

and it takes the color set in the main badge config options. In the above card that is var(--alert-color)

this is also an option, using theme variable:

type: custom:mod-card
card:
  type: custom:hui-entity-badge
  entity: alarm_control_panel.ha_main_alarm
card_mod:
  style:
    hui-entity-badge:
      $:
        ha-badge:
          $: |
            {% set state = states(config.card.entity) %}
            .badge {
              border: 2px solid var(--state-alarm_control_panel-{{state}}-color) !important;
            }

[Faecon (Jo)]

The result of this code is, that the button is always white. Where am I going wrong ?
Also I want a little border around when it is white… How do I achieve this ?

 card_mod:
                                style:
                                  mushroom-state-info$: |
                                    .container {
                                      margin: -0px;
                                      }  
                                    .primary {
                                      padding: 0px 0px 0px 0px;
                                                }
                                  mushroom-shape-icon$: |
                                    .shape {
                                    margin-top: 0px;
                                    }
                                  .: |
                                    ha-state-icon {
                                      {% if is_state('light.gevel','on') %}
                                      animation:  blink 1s infinite, illumination 1s infinite ;{%- endif %}
                                      }
                                      @keyframes blink {
                                        50% {opacity: 0;}
                                            }   
                                      @keyframes illumination {
                                          0%, 100% { clip-path: inset(0 0 0 0); }
                                          95% { clip-path: polygon(0% 99%, 20% 55%, 22% 37%, 39% 20%, 61% 21%, 77% 35%, 79% 57%, 99% 100%); }
                                                }
                                    ha-card {
                                      width: 160px;
                                      height:60px !important;  
                                      ha-card-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important  
                                      {% if is_state('light.gevel','on') %}
                                      {
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-width: "2px"
                                      }
                                      {%else %}
                                        white
                                      {%- endif %}

[Mariusthvdb (Marius)]

@Faecon

background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      ha-card-border-width: "2px"

this is the part you need debugging ? if yes, please post only the relevant bit, and not let us find your code for you…
for example, what card is this? Mushroom? ok, which, etc etc

also, show the card, and the output this template has in dev tools

btw there is a dedicated Mushroom styling thread in Mushroom Cards Card Mod Styling/Config Guide be sure to check there first

[Faecon (Jo)]

it is a mushroom template card

                                    ha-card {        
                                      {% if is_state('light.gevel','on') %}
                                      background-color: rgb({{ states("input_text.kleur_iconen_bleker")}}) !important;
                                      {% endif %}
                                      }

so when my entity is on, i want to change the background color of the card…

[rougedevin (Hinkle)]

Posted this in the front end category but was directed here instead. I’m new to HA and understand enough to copy/paste and make modifications to suite my needs.

I’m using card-mod to make a card transparent, without a border, and to change text colors. Any card I edit in the first dashboard in card position 1 (first card on first dashboard), will not keep the css styles applied to it. I can edit the card, add the css styles, and then save it and it works, but as soon as I refresh my browser, or close the android HA app and re-open, the card goes back to its default settings and ignores the css styles. I’ve cleared the cache, tried different browsers, and deleted/re-installed the HA app and the issue still persists across multiple devices. This is the example of the card I’m using and the css mods added to it.

show_current: true
show_forecast: true
type: weather-forecast
entity: weather.forecast_home
forecast_type: daily
card_mod:
  style: |
    ha-card {background: transparent;
       --border-style: none;
       --primary-text-color: white;
       --secondary-text-color: teal;
       --border: 0px;
       --box-shadow: none;
       --background: rgba(50,50,50,0.3);
       border: none;}
       

This only happens to the first card on my first dashboard, any other position or dashboard and all the styles work correctly. Any help is greatly appreciated!

[Ildar_Gabdullin]

Cannot reproduce in Chrome.

BTW, these are wrong vars:

--border-style
--border
--background
--box-shadow