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

[reste_narquois (Chris Warne)]

@drcjb

type: entities
entities:

Padding is at the card level, so you need to put your card_mod styles there:

type: entities
card_mod:
  style: |
    div#states.card-content {
      padding-top: 8px;
      padding-right: 4px;
      padding-bottom: 8px;
      padding-left: 4px;
    }
entities:

If you want the same padding for all 4 sides then just padding: 4px; would do for example.

[drcjb (Colin)]

Thank you Chris so much that works perfectly.

It was the div#states.card-content that I was missing, not sure I understand what div#states.card-content does exactly but thank you all the same.

Best regards, Colin

[reste_narquois (Chris Warne)]

Glad it worked!

This is really a self-taught learner trying to explain things here, so forgive me if I don’t quite get things 100% correct, or this is stuff you already know - but if you look at your screenshot, you have the <div id="states" class="card-content"> line highlighted. That’s the level where the padding values are applied for the entities card. (Your screenshot doesn’t show the CSS values for that level, displayed in the styles window in the inspector.)

I’m no CSS expert, but I believe id’s are denoted by a hash (#), and classes by a dot (.). So your card_mod code is basically saying 'apply these padding values to the div with the id states and class card-content.

I believe the div tag is just the way an HTML document is divided into sections.

[reste_narquois (Chris Warne)]

I’m not seeing any card_mod code in your YAML - isn’t this really a question for the browser_mod thread? I would think you’re more likely to get help there if so.

[drcjb (Colin)]

Thanks Chris that does help, I couldn’t see the sense of the # and the . now I can!

Best regards, Colin

[Ildar_Gabdullin]

How to reuse a card-mod code
_{(these questions are asked rather often)}

There are several ways:
– yaml-anchors
– include
– secret
– macros
– decluttering-card
– card-mod theme
– external js

Note: examples below are synthetic and may be not optimal, but they give a general idea of re-use.

1. yaml-anchors
Only can be used in yaml-mode dashboards.
Anchors are one file-wide: if you have same repeated code in 2 files - you will have to declare same anchor in both files.

type: entities
entities:
  - entity: sun.sun
    card_mod: &ref_card_mod
      style: |
        :host { color: red; }
  - entity: sun.sun
    card_mod: *ref_card_mod
  - entity: sun.sun
    card_mod: *ref_card_mod

---

2. include
Only can be used in yaml-mode dashboards.

type: entities
entities:
  - entity: sun.sun
    card_mod: !include ...../style.yaml

where “style.yaml” contains

  style: |
    :host { color: red; }

Note: one imported file may contain one snippet - you cannot place several definitions like

style: |
  :host { color: red; }

style: |
  :host { color: green; }

style: |
  :host { color: blue; }

and then select a particular snippet.

Also, you can kind of “pass a variable” to the imported code:

type: entities
entities:
  - entity: sun.sun
    SUPER_COLOR: red #up to you how to name this option
    card_mod: !include ...../style.yaml

style: |
  :host { color: {{ config.SUPER_COLOR }}; }

---

3. secret
Only can be used in yaml-mode dashboards.

type: entities
entities:
  - entity: sun.sun
    card_mod: !secret card_mod_red_row

where “secrets.yaml” contains

card_mod_red_row:
  style: |
    :host { color: red; }

Note: one secrets file may contain several snippets like

card_mod_red_row:
  style: |
    :host { color: red; }

card_mod_green_row:
  style: |
    :host { color: green; }

card_mod_blue_row:
  style: |
    :host { color: blue; }

Although it is more convenient than using “include” (where each imported file must contain one snippet) - I would not recommend using secrets for not-secret data, wrong approach.

---

4. macros
Can be used both in yaml-mode & storage-mode dashboards.

type: entities
entities:
  - entity: sun.sun
card_mod:
  style: |
    ha-card {
      color: red;
    }
    {% from 'card_mod_macros.jinja' import MY_SUPER_HEADER -%}
    {{ MY_SUPER_HEADER() }}

where “card_mod_macros.jinja” contains

{% macro MY_SUPER_HEADER() -%}
  .card-content {
    color: red;
    ... other styles
  }
{%- endmacro %}

And ofc you can pass variables into a macros:

type: entities
entities:
  - entity: sun.sun
card_mod:
  style: |
    ha-card {
      color: red;
    }
    {% from 'card_mod_macros.jinja' import MY_SUPER_HEADER -%}
    {{ MY_SUPER_HEADER('magenta') }}

{% macro MY_SUPER_HEADER(COLOR) -%}
  .card-header {
    color: {{ COLOR }};
    ... other styles
  }
{%- endmacro %}

Note: one jinja-file may contain several macros like

{% macro card_mod_colored_state(COLOR) -%}
  ...
{%- endmacro %}

{% macro card_mod_colored_icon(COLOR) -%}
  ...
{%- endmacro %}

{% macro card_mod_colored_name(COLOR) -%}
  ...
{%- endmacro %}

---

5. decluttering-card
Can be used both in yaml-mode & storage-mode dashboards. There are some complexities in case of storage-mode dashboards (not to be described here, check Docs & other info for decluttering-card).
Assume you want to have card-modded Entities card in many places:

type: entities
title: ...
entities: ...
card_mod: ...

Create a decluttering template for this Entity card:

my_template:
  card:
    type: entities
    ... use input variables to define options
    card_mod: ...you may use input variable here like a particular color

and use this template where it is needed:

type: vertical-stack
cards:
  - ...
  - type: custom:decluttering-card
    template: my_template
    variables:
      - ...

You can pass a card-mod code as an input variable:

my_template:
  default:
    - STYLE: 'ha-card { color: red; }'
  card:
    type: entities
    ...
    card_mod:
      style: '[[STYLE]]'

type: vertical-stack
cards:
  - ...
  - type: custom:decluttering-card
    template: my_template
    variables:
      - STYLE: 'ha-card { color: cyan; }'
      - ...

to replace a default red color by a cyan color.
Also, you can pass an additional card-mod code as an input variable:

my_template:
  default:
    - STYLE: ''
  card:
    type: entities
    ...
    card_mod:
      style: |
        ha-card {
          color: red;
        }
        [[STYLE]]

type: vertical-stack
cards:
  - ...
  - type: custom:decluttering-card
    template: my_template
    variables:
      - STYLE: '.card-header { color: cyan; }'
      - ...

to add additional styles.
These were simple examples with string-like styles; in case of dictionary-like styles & styles with jinja templates there are more peculiarities which are beyond this topic.

---

6. card-mod theme
Traditional card-modding is about styling a particular card / row / other element of a particular card.
Card-mod theme provides “global” styles like:
– all Entities cards
– all rows with toggles
(not to mention other UI elements not covered by traditional card-modding like “view layout”, “sidebar”, “header”, “more-info dialog”, …)
Also, it is possible to mass-style SOME elements like:
– some Entities cards
– some rows with toggles
by using classes:

type: entities
card_mod:
  class: yellow_card

where “yellow_card” class is defined as

card-mod-card-yaml: |
  .: |
    ha-card.yellow_card {
      ... add your styles
    }

Check Docs for card-mod about defining themes.

---

7. External js
Can be used to style all UI elements of a particular type/class.
Particular examples will be not provided, it is not about card-mod & an off-topic here.

[Mar1us]

is it possible to add a background color to one heading badge icon?

[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