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

[michaelkrtikos (Michail Kritikos)]

Just posting in case anyone would like to replicate. If you want to have an inner shadow in the slider of the Tile card, but also have a background, the correct code to do this is:

card_mod:
  style:
    hui-card-features$:
      hui-card-feature$:
        hui-light-brightness-card-feature$:
          ha-control-slider$: |
            .slider {
             box-shadow: inset 0.5px 0.5px 4px 0px #3b3b3b;
             }
    .: |
        ha-card {
          background-image:
            {% if is_state('input_select.card_theme', "Blue Waves") %}
              url("/local/card.png");        
            {% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
              url("/local/card1.png");
            {% elif is_state('input_select.card_theme', "Blood Shapes") %}
              url("/local/card2.png");
            {% elif is_state('input_select.card_theme', "Color Lines") %}
              url("/local/card3.png");
            {% elif is_state('input_select.card_theme', "Navy Gold") %}
              url("/local/card4.png");
            {%- endif %}
            background-position: 0% 0%;
            background-repeat: no-repeat !important;
            background-size: cover;
            }

In the above example, i have a dropdown helper and i have uploaded different background images which change based on the helper selection. It works with simple or gradient color as well though. Here is an example:

Notice that the inner shadow is applied on the slider background which was the intended visual.

Hope this helps

[psfshr (Paul Fisher)]

Have a query about using card-mod, specifically in a theme with the new “Heading” card type added in 2024.10.

I’ve seen posts on how to style the cards individually, and using the examples in this thread that works great, but would prefer to apply the styles using the theme support (so it applies to all cards of that type and I don’t have to add to cards individually), but it’s not obvious to me how to target the specific “title” or “subtitle” cards separately (I’m no CSS/web developer).

In the DOM for my HA dashboard I see both title and subtitle cards present with:
<ha-card class="type-heading"> ... </ha-card>
and within that, the type of title set as either
<div class="content title"> ... </div>
or
<div class="content subtitle"> ... </div>
around the card icon and text.

I get that I could set CSS at the card level based on the ha-card class, but that would affect both title and subtitle cards, or I could set CSS on the div based on title/subtitle, but that would only apply to the card icon and text, and not the card itself.

Is there a way that I can select based on whether the content of the card is title/subtitle, but then apply CSS to the card as a whole?

[ygeffens (Yves Geffens)]

I’m absolutely new to card-mod, tried copy-pasting stuff, but it’s just not working…

Situation:

            - entity: input_text.empty
              type: custom:multiple-entity-row
              name: " "
              icon: mdi:thermometer
              entities:
                - entity: sensor.aqara_lena_temp
                  name: "Lena"
                  format: precision1
                  unit: false
                - entity: sensor.aqara_kato_temp
                  name: "Kato"
                  format: precision1
                  unit: false

I’m displaying 2 temperature sensors with multiple entity-row (actually much more, but I simplified the example)

I have 2 entities containing the minimum temperature for each room

input_number.zv_thermostaat_lena
input_number.zv_thermostaat_kato

I want to color the sensors above red when:
sensor.aqara_lena_temp < input_number.zv_thermostaat_lena
sensor.aqara_kato_temp < input_number.zv_thermostaat_kato

But obviously 1 sensor can be above and the other can be below the required temperature, so I want the correct one to show red, for each sensor individually.

This is what I have now, but nothing happens:

(cut)
              entities:
                - entity: sensor.aqara_lena_temp
                  name: "Lena"
                  format: precision1
                  unit: false
                  style: |
                    :host {
                      color: {% if states('sensor.aqara_lena_temp') | float < states('input_number.zv_thermostaat_lena') | float %} red {% else %} white {% endif %};
                    }
(cut)

Just to clarify things: I want to color the temperature, not the icon in the beginning.

What am I doing wrong ?

I tried to understand the posibilities in the overview pages, but nope, I’m not getting it.

[Ildar_Gabdullin]

I just told you already about “1st post → link at the bottom → styles for m-e-r”

[Ildar_Gabdullin]

About old-style badges.

We can NOT use card-mod to style badges (neither old-style badges, nor new ones).
(ok, we can do it by using card-mod-theme which is TOO cumbersome and not as flexible as it could be; but this thread is not about themes)

The only place where we can style them - a custom badge-card.
There is a post about this card.
After 2024.8 it became a bit different:

Assume we have a card:

  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
    - entity: sensor.xiaomi_cg_1_co2

To style a whole card - we used a mod-card :

type: custom:mod-card
card:
  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
    - entity: sensor.xiaomi_cg_1_co2
card_mod:
  ...

To style a particular badge - we defined card-mod code below a particular entity (same what we could do for badges w/o badge-card):

  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
    - entity: sensor.xiaomi_cg_1_co2
      card_mod:
        ...

(unrelated to card-mod) And we were able to customize a “name” (also was supported for badges w/o badge-card):

  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
    - entity: sensor.xiaomi_cg_1_co2
      name: xxxxxx

And same about changing an icon.

Now, after 2024.8:

1. To show an old-style badge - we need to use “hui-state-badge-element”:

  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element

2. We still can use mod-card to style a whole card:

type: custom:mod-card
card:
  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
card_mod:
  style:
    badge-card:
      $: |
        div#badges {
          --label-badge-background-color: cyan;
        }

3. We can NOT style a particular badge like we used to:
   (update: we CAN with this fix)

  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
      card_mod: #does NOT work
        style: |
          ha-state-label-badge {
            color: red;
          }

We have to style from the card’s level (cumbersome):

type: custom:mod-card
card:
  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
card_mod:
  style:
    badge-card $:
      hui-state-badge-element:nth-child(2) $:
        ha-state-label-badge $:
          ha-label-badge $: |
            .badge-container .label-badge .label span {
              border-style: dashed;
              border-color: green;
              color: white;
              background-color: magenta;
              font-size: 12px;
              }
            .badge-container .label-badge .value {
              font-size: 8px;
            }   
            .badge-container .label-badge {
              border-radius: 20% !important;
              border-style: dotted;
              border-width: 10px
            }
            .badge-container .title {
              color: orange;
            }
          .: |
            ha-label-badge {
              --label-badge-background-color: yellow;
              --label-badge-text-color: red;
              --label-badge-red: cyan;
              --ha-label-badge-title-width: 170px;
              --ha-label-badge-title-font-size: 8px;
              --ha-label-badge-size: 100px;
            }

4. (unrelated to card-mod) We cannot use the “name” option to change a displayed name (like for still supported badges in Picture elements card - probably that “hui-state-badge-element” thing came from that card).
   To change a name we have to use same way we use for Picture elements:

type: custom:mod-card
card:
  type: custom:badge-card
  badges:
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
    - entity: sensor.xiaomi_cg_1_co2
      type: custom:hui-state-badge-element
card_mod:
  style:
    badge-card $:
      hui-state-badge-element:nth-child(2) $:
        ha-state-label-badge $ ha-label-badge $ .badge-container: |
          .title {
            color: transparent;
            line-height: 0px !important;
          }
          .title::before {
            color: var(--primary-text-color);
            content: "New name\A";
            line-height: normal;
          }

As for changing an icon - this might be possible by card-mod but too cumbersome.

[Ildar_Gabdullin]

Styling multiline-text-input-card
card’s repo

Default look:

type: entities
entities:
  - type: custom:lovelace-multiline-text-input-card
    entity: input_text.test_text_255
    title: some long long long long long long long title

---

Header:

    card_mod:
      style: |
        .card-header {
          color: red;
          background: yellow;
          line-height: normal; /* needed for multiline title */
        }
        ha-card {
          overflow: hidden; /* needed for colored header's background */
        }

With resized font:

    card_mod:
      style: |
        .card-header {
          font-size: 40px;
        }

---

Buttons:

    max_length: 250
    min_length: 10
    ...
    card_mod:
      style: |
        .flex {
          margin-top: 6px;
          --mdc-icon-size: 48px;
        }
        .flex :nth-child(2 of .button) ha-icon {
          --icon-primary-color: magenta;
        }
        .flex .button-disabled ha-icon {
          --icon-primary-color: cyan;
        }

Note: “margin-top: 6px” is needed due to this issue.

---

Labels:

    max_length: 250
    min_length: 10
    ...
    card_mod:
      style: |
        .text-left {
          color: cyan !important;
          font-size: 20px !important;
        }
        .text-right {
          color: orange !important;
          font-size: 20px !important;
        }
        .text-right.text-red {
          color: lightgreen !important;
        }

---

Textarea:

    card_mod:
      style: |
        .textarea {
          border: 2px solid yellow !important;
          background: red !important;
          color: lightgreen !important;
          min-height: 40px !important;
          max-width: 100%;
          min-width: 100%;
          overflow-y: auto !important;
        }
        ha-card {
          background: lightblue;
        }

Notes:

1. “Max/min width” are added to prevent a possibility to resize the textarea horizontally (causes glitches).
2. “Overflow” added to enable a scrollbar.

---

Service message baloon:

    autosave: true
    ...
    card_mod:
      style: |
        .flex {
          margin-top: 6px;
        }
        .flex #serviceMessage {
          background: lightgreen;
          border: 1px solid yellow;
          color: red;
          font-size: 20px;
        }

[ygeffens (Yves Geffens)]

I saw you answering in another post the same, “go there”.
How greatfull as I am that you try to help people, maybe just post the link itself.
Clearly this is not enough. Otherwise I would not make the same mistake.

When you are new to something, things might not be as clear as you think they are to them.

Maybe a personal solution for the person posing the question is an idea?
That way, I would get an idea on how this (card-mod) works, and grow from there.

The learning curve is high for Home Assistant, especially when you want to do more than just basic stuff. I really want to learn.

With a personal example, I might think: “oh, that’s how it works”, now I still don’t understand, and just not using it. And I think the idea of the creator is to have as much people as possible enjoy what he created.

Thank you

[Mariusthvdb (Marius)]

come on Yves, what is so difficult about:

“1st post → link at the bottom → styles for m-e-r”

Following that you might even find some other stuff you dont know about, which you would not have found by clicking a link.

Give it some effort

[Ildar_Gabdullin]

I usually spend home 6 days a month and some amount of this time have access to PC, rest of time answering from a mobile not sitting on a sofa, so finding an exact link may not be easy, describing “how to find a link” is easier, sorry for inconvenience, wanted to help.

[ygeffens (Yves Geffens)]

It’s probably me, very sorry for this.

First post:

Links at the bottom

Not seeing it…

@Ildar_Gabdullin Again, I know you are trying to help, but hey, if I don’t see what you are trying to reffer to…

[Ildar_Gabdullin]

Yves, it is here:

You will find there a list dedicated to help beginners.
It will not cover 100% of needs - but gives a starting point for people who want to learn.

[Mariusthvdb (Marius)]

@ygeffens

It’s probably me,

Yes, you didn’t scroll down to the bottom…

@ygeffens

but hey, if I don’t see what you are trying to reffer to…

yes, then what?

[axlerose]

I’ve try to modify the style of the section but it didnt work

type: grid
card_mod:
  style:
    .section { background: red !important; }
cards:
  - type: heading
    icon: mdi:sofa
    heading: Zona Giorno
    heading_style: title
    badges:
      - type: entity
        entity: sensor.temperatura_zona_giorno
  - type: heading
    icon: mdi:fridge
    heading: Cucina
    heading_style: subtitle
  - type: tile
    entity: light.terra_cucina_faretti
    name: Faretti
    show_entity_picture: false
    vertical: true
    hide_state: false
    state_content: state
    tap_action:
      action: toggle
    icon: mdi:lightbulb-variant-outline
    layout_options:
      grid_columns: 2
      grid_rows: 2
  - type: tile
    entity: light.lampadario_cucina
    name: Lampadario
    vertical: true
    icon: mdi:lightbulb-variant-outline
    tap_action:
      action: toggle
  - type: tile
    entity: light.shelly_terra_cucinaled
    icon: mdi:lightbulb-variant-outline
    tap_action:
      action: toggle
    icon_tap_action:
      action: toggle
    vertical: false
    layout_options:
      grid_columns: 4
      grid_rows: 1
  - type: heading
    icon: mdi:television-classic
    heading: Salone
    heading_style: subtitle
  - type: tile
    entity: light.terra_salone_lampadetavolinopiano
    icon: mdi:lamp-outline
    vertical: true
    tap_action:
      action: toggle
    layout_options:
      grid_columns: 1
      grid_rows: 2
  - type: tile
    entity: light.terra_salone_lampadeangolodivano
    name: Lampada Divano
    icon: mdi:floor-lamp-torchiere-variant-outline
    vertical: true
    tap_action:
      action: toggle
  - type: tile
    entity: light.terra_salone_colonne
    name: Colonne
    icon: mdi:pillar
    vertical: true
    tap_action:
      action: toggle
    layout_options:
      grid_columns: 1
      grid_rows: 2
  - type: heading
    icon: mdi:table-furniture
    heading: Pranzo
    heading_style: subtitle
  - type: tile
    entity: light.shelly_terra_vetrinetta
    name: Vetrinetta
    icon: mdi:glass-wine
    vertical: true
    tap_action:
      action: toggle
  - type: tile
    entity: light.terra_pranzo_lampadario
    name: Lampadario
    icon: mdi:ceiling-light-multiple-outline
    tap_action:
      action: toggle
    vertical: true
column_span: 1

this is the result that i want to reach

[Ildar_Gabdullin]

old-style badges FIX:

title: ...
path: ...
badges:
  - entity: sensor.xiaomi_cg_1_co2
    type: custom:hui-state-badge-element
    card_mod:
      style: |
        :host {
          color: orange;
          --label-badge-text-color: red;
          --label-badge-red: cyan;
          --label-badge-background-color: yellow;
          --ha-label-badge-label-color: green;
        }

hui-state-badge-element fix

OR - open “card-mod.js” in editor and replace
hui-state-label-badge → hui-state-badge-element

Ofc it may stop working some day )))
Unfortunately, there is no way to restore a “change name/icon” functionality.

[Miura]

Can anyone help me to animate (spin) the icon of the Tile card (fan). Have tried many variant (including search/google ) but can’t get it to work. Testing with display: none works, so I though I was on the right path, but can’t get it animated.

card_mod:
  style: |
    ha-state-icon {
      animation: spin 2s linear infinite;
      # display: none;
    }

[Mariusthvdb (Marius)]

this is what I use for the tile fans
note you do need to declare the animation keyframes:

# tile_fan animate
style:
  hui-card-features $:
    hui-card-feature $:
      hui-fan-speed-card-feature $:
        ha-control-slider$: |
          .container {
            --control-slider-border-radius: var(--ha-card-border-radius);
          }
          .slider .slider-track-bar {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider .slider-track-bar::after {
            border-radius: var(--ha-card-border-radius) !important;
          }
          .slider {
          --control-slider-color:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %};
          --control-slider-background:
            {% if is_state(config.entity,'on') %}
            {% set perc = state_attr(config.entity,'percentage')|int(0) %}
            {% if perc <= 15 %} lightblue
            {%- elif perc <= 33 %} lightskyblue
            {%- elif perc <= 67 %} dodgerblue
            {%- else  %} darkblue
            {%- endif %}
            {%- else %} var(--state-inactive-color)
            {%- endif %};
          }
  .: |
    ha-tile-icon {
      --tile-color:
        {% if is_state(config.entity,'on') %}
        {% set perc = state_attr(config.entity,'percentage')|int(0) %}
        {% if perc <= 15 %} lightblue
        {%- elif perc <= 33 %} lightskyblue
        {%- elif perc <= 67 %} dodgerblue
        {%- else  %} darkblue
        {% endif %}
        {% else %} var(--state-inactive-color)
        {% endif %};
    }
    ha-state-icon {
      animation:
        {% if is_state(config.entity,'on') %}
          {% set perc = state_attr(config.entity,'percentage')|int(0) %}
          {% set base = 'rotation infinite linear' %}
          {% if perc <= 15 %} 4s {{base}}
          {%- elif perc <= 33 %} 3s {{base}}
          {%- elif perc <= 67 %} 1.5s {{ base}}
          {%- else  %} 0.75s {{base}}
          {% endif %}
        {% else %} none
        {% endif %};
    }
    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

[Miura]

Got that to work… Apparently spin doesn’t work, but rotation does …

[VietNgoc (Ngoc John)]

If you rename rotation to spin, spin will work

    @keyframes rotation {
      0% {transform: rotate(0deg);}
      100% {transform: rotate(360deg);}
    }

[Miura]

Guess I didn’t really/fully understood CSS, as this works for mushroom . Thought spin was a CSS definition

type: custom:mushroom-entity-card
entity: sensor.sensor
card_mod:
  style: |
    ha-state-icon {
      animation: 2s spin infinite linear;

    }

[Mariusthvdb (Marius)]

some cards have several animations built-in.

However, if you use card_mod, you need to specify the animations as this isnt implemented in the card itself at that point.