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

Yes, there are some examples, but not here since this is the wrong thread for that. You need card-mod, but not using it with cards (where this thread is about) but with themes. See here:

I tried it myself back then but I didn’t like it (I had issues centering some tabs etc). You should search in that thread for ‘footer’, maybe you’ll find some code.

In any case, you can ask there for more help if you get stuck. Hopefully someone can help you. I ditched the entire header myself.

I have below code to remove the three dot on the light card. However it seems recent HA update broke it that the three dot appears again. Anyone know how to fix this? Thanks!

  - entity: light.floorlight
    card_mod:
      style: |
        mwc-icon-button {
          display: none;
        }
        .content {
          margin-top: -24px;
        }
    name: kitchen
    type: light

image

Hi guys,

yesterday was a sad day. I had to finally get rid of Custom Header as it made problems with the newest Update. I am used to have my Header Icons colored, see image below or GitHub - philipp089/Home-Assistant-Config: HA Config and UI

After some trial i was finally able to change the color of the icons globally but is there a way to color each icon individually with card-mod? Any help is greatly appreciated. Other things i want to change is to get rid of the right menu (three-dotted-menu) and i want to change the box shadow. Normally i do it with:

          - type: "custom:mini-media-player"
            artwork: cover
            entity: media_player.tv_samsung_q7_series_55
            name: Fernseher Wohnzimmer
            style: |
              ha-card {
                box-shadow: 1px 1px 1px 1px var(--divider-color);
              }

but i have no clue how to affect the header. Can someone point me in the right direction here?

Cheers,
Philipp

Are you sure, that it is working? As far as I can see restriction embeds the sub-card without ha-card and I thought, that this is needed for card_mod to search and work.

image

Regardless what I try, I’m currently not able to ingest anything at card level.

type: entities
title: Rolläden
show_header_toggle: false
entities:
  - type: custom:restriction-card
    row: true
    card:
      entity: cover.alle_rolladen
      card_mod:
        style: |
          state-badge {
            color: red;
          }
      name: alle
    restrictions:
      confirm:
        text: Schalter aktivieren?
    condition:
      entity: switch.shelly_hausturklingel_klingelstatus
      value: 'off'

Ar what do you mean with your recommendation above?

From the Entities card level:

      - type: entities
        entities:
          - type: custom:restriction-card
            row: true
            card:
              entity: sun.sun
              secondary_info: last-changed
        card_mod:
          style:
            restriction-card:
              $:
                hui-text-entity-row:
                  $:
                    hui-generic-entity-row: |
                      .text-content {
                        color: red;
                      }

изображение
And follow this issue:

Meanwhile - a really nice styling for mini-graph-card from @menloperk:
post

Update 22.09.22: here 3 codes are provided - one for Chrome, others work in Safari too.

Hm. And where is the advantage instead of styliing from restriction card level, what was my starting point.

From my experiences, it is much more performance consuming to have this from top card level card level instead of deepest entity level. I had this with a slider entity row and it was nearly 1 second slower in having it at entity level instead of top card position.

Nobody is talking about advantage.
Your method:

      style:
        $:
        hui-cover-entity-row:
          $:

was never seen before (at least by me) and seems like a glitch.
A proper method (probably which used to be used by you) stopped working - see the issue above.
Surely you may use whatever method you like.

1 Like

Ah o.,k. Thought that

“In your case, you should style from the Entities card level, not from restriction-card.”

Was a general recommendation from your experiences. Sorry to miss read this.

O.k. Then I stay on my additional$ work around, which works fine, until I’m perhaps able to remove it again after your bug report.

Btw, the styling broken for at least these cards:

  • restriction-card, row mode inside Entities card
  • config-template-card, row mode inside Entities card
  • fold-entity-row inside Entities card
  • entity row inside picture-elements

In all these cases it was possible to style from the element’s level

The correct CSS code, if anyone ever comes across the same question:

            card_mod:
              style:  
                paper-buttons-row$:
                  ha-icon$: 
                    ha-svg-icon: |
                      :host {
                        animation: {% if is_state('humidifier.master_bedroom', 'on') %} blink 1s linear infinite alternate {% else %} none {% endif %};
                        color: red !important;
                      }  
                      @keyframes blink {
                        0% { opacity: 0.1; }
                        100% { opacity: 1; }
                      }
1 Like

I’ve got an odd one since 2021.11.1 where it doesn’t seem that card-mod is honoring me changing icon colours in a glance card.

My code is this:

type: glance
entities:
  - entity: sensor.rubbish
    icon: mdi:delete-empty
    style: |
      :host {
        --paper-item-icon-color: red;
      }
  - entity: sensor.recycling
    icon: mdi:recycle
    style: |
      :host {
        --paper-item-icon-color: yellow;
      }
  - entity: sensor.garden_waste
    icon: mdi:leaf
    style: |
      :host {
        --paper-item-icon-color: green;
      }
title: Rubbish Bins

and in the editor preview window, I see this:

image

yet when I close the editor, I see this:

image

it’s not related to browser or OS, as I’m seeing the same thing in Edge and Chrome on Windows and Linux, as well as in the Android app.

The only change is the upgrade to HA

1 Like

2021.11.2 - my picture is always with applied styles:

image

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    icon: mdi:delete-empty
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: red;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:recycle
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: yellow;
        }
  - entity: sensor.cleargrass_1_co2
    icon: mdi:leaf
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: green;
        }
title: Rubbish Bins
1 Like

Strange - I added the card_mod: line, but still getting no colours once I exit the editor.

I also just tried adding coloured icons to a different card, and it’s done exactly the same thing… yet nothing in the logs - any idea what debugging I can turn on (if any)?

Have also reinstalled card_mod

Update: it’s working fine on my 2nd HA instance… I really don’t get this… :expressionless:

Hi, i have css formatted several badges, it has been working until two days ago. 11.2 Core installed.

Desired look:
image

Since two days ago:
image

If i open Raw Config Editor and exit, styles are applied even without saving any changes (no one is done). I have to do that every time i open a new HA tab on web browser or open the app. Also tried with and without card_mod: label

my code is

    badges:
      - entity: person.luis_davalos
        card_mod:
          style: |
            :host {
              {% if is_state('person.luis', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: person.violeta
        card_mod:
          style: |
            :host {
              {% if is_state('person.violeta', 'home') %}
              --label-badge-red: green;
              {% else %}
              --label-badge-red: red;
              {% endif %}
            }
      - entity: sensor.temperatura_terraza
        name: Exterior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.temperatura_terraza') |float(0) > 40 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 34 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.temperatura_terraza') |float(0) > 12 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }
      - entity: sensor.media_temperatura_interior
        name: Interior
        card_mod:
          style: |
            @keyframes blinker { 50% { opacity: 0; } }
            :host {
              {% if states('sensor.media_temperatura_interior') |float(0) > 29 %}
              --label-badge-background-color: red;
              --label-badge-text-color: white;
              animation: blinker 2s linear infinite;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 27 %}
              --label-badge-background-color: #FF9800;
              --label-badge-text-color: white;
              --label-badge-red: #FF9800;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% elif states('sensor.media_temperatura_interior') |float(0) > 18 %}
              --label-badge-background-color: green;
              --label-badge-text-color: white;
              --label-badge-red: green;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              {% else %}
              --label-badge-background-color: #039BE5;
              --label-badge-text-color: white;
              --label-badge-red: #039BE5;
              font-weight: bold;
              text-shadow: 1px 1px #0005;
              animation: blinker 2s linear infinite;
              {% endif %}
            }
1 Like

grrr, my 2nd HA wasn’t on 11.2 - 11.2 broke card_mod when I upgraded it

I’m about to update the recommended installation method for card-mod.
It’s always been highly timing-dependent, and as hass gets more and more optimized it gets harder and harder to keep up.

Luckily, there’s a thing you can do to help.

By adding the following to your configuration.yaml (obviously adjusting the URL to where you actually have card-mod installed) and restarting, you can give card-mod a head start.
It will even be there - waiting - when the core interface parts are still loading in.

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

You may get some errors in the browser console. They can be safely ignored, and I’m currently working on some tweaks to make this installation method work even more smoothly.
Nevertheless, this should remove most issues with things working when switching tab, but not when pressing F5 and that kind of thing.


If I had started today, I would have made card-mod a custom component or integration rather than a frontend plugin. It’d be an incredibly breaking change for everyone using HACS to switch now, though. So you’ll need some manual intervention unless @ludeeus can think up some magic.

1 Like

Nope, sorry.
AFAIK that setting is not even hot-reloadable, so move config and restart is probably the best option right now.

tbh, I havent met many issues during the HA changes, in fact, I can only see 1 mod not working anymore. I have meticulously read the posts above and many come close, but just not exactly:

  - type: custom:template-entity-row
# https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/2182?u=mariusthvdb
    entity: binary_sensor.vijverpompen
    card_mod:
      style:
        div#wrapper: |
          state-badge {
            {% if is_state(config.entity,'on') %}
            animation: rotation 2s linear infinite, colorize 5s linear forwards 1;
            {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
          @keyframes colorize {
            0% {
              color: steelblue;
            }
            100% {
              color: aquamarine;
            }
          }

still makes my entity icon rotate, but the colorization is gone…

anyone with a hint, please come forward? thanks!