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

[thomasloven (Thomas Lovén)]

Hi!

Just wanted to drop in and say sorry about the “sudden” change from

style:

to

card_mod:
  style:

in card-mod 3.4.0.

The new method has been recommended for over two years, so when I redid the background workings I… forgot about the old syntax.

I could have been more clear in the communication (again I forgot about it, so I didn’t even realize there was anything to communicate at first).

It was a pain to maintain and support both configuration methods though, so I will not go back on this.

Hope you all enjoy card-mod!

[Olivier1974 (Olivier Toussaint)]

You missed the

@thomasloven

change from

style:

to

card_mod:
  style:

[Olivier1974 (Olivier Toussaint)]

Lol, don’t be sorry, it is not like nobody knew that it might disappear one day.
Such a great tool btw.

[tom_el_camino (Tom)]

oh. my. god… sorry… I really did miss that… that’ll put me on @thomasloven 's nono-list I guess. Sorry Thomas!

[tom_el_camino (Tom)]

indeed, an amazing tool. It went from boring to, make your dashboard as beautiful as possible and then throwing away the design and start over every 2 months. thanks a million @thomasloven and @Olivier1974

[DrSpaldo (Doctor Spalding)]

I have started getting new issues, but I have been using the newer format?

[Ildar_Gabdullin]

This “newer format” was recommended 2 years ago.

[DrSpaldo (Doctor Spalding)]

I am not sure if that reply was for me, but, I have been using the newer format since 2021… But the problem I was trying to explain only started since 3.4.x

[arganto]

I have tested yours and see errors in card-mod as well.

card-mod.js:1 Card-mod TypeError: Cannot read properties of undefined (reading 'apply')
    at HTMLElement.value (card-mod.js:1:59842)
    at HTMLElement.i (card-mod.js:1:52936)
    at t.setConfig (layout-card.js?hacstag=156434866244:215:1564)
    at HTMLElement.value (card-mod.js?hacstag=190927524341:1:59842)
    at HTMLElement.i [as setConfig] (card-mod.js?hacstag=190927524341:1:52936)
    at F.value (hui-element-editor.ts:377:31)

And if I try to simplify, e.g. to

    card_mod:
      style: 
        .entities:
            $: |
              state-badge {
                margin-top: 20px;
                margin-bottom: -5px;
              }
              .name {
                margin-top: 0px !important;
                margin-bottom: -10px !important;
              }
              div:not(.name) {
                margin-bottom: 0px !important;
              }

The ingestions is somehow weared.

Don’t know if it is card-mod update related, but at least I can confirm, that something is strange here.

Perhaps better to open an issue in the repository?

[Ildar_Gabdullin]

Tested with

type: vertical-stack
cards:
  - type: glance
    card_mod: &ref_card_mod
      style:
        .entities .entity $: |
          state-badge {
            background-color: red;
          }
          .name {
            color: cyan;
          }
          div:not(.name) {
            color: orange;
          }
    entities:
      - entity: sun.sun
        name: Front 1
        show_state: false
      - entity: sun.sun
        name: Front 2
        show_state: false
      - entity: sun.sun
        name: Front 3
        show_state: false

  - type: glance
    show_name: false
    card_mod: *ref_card_mod
    entities:
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true

  - type: glance
    card_mod: *ref_card_mod
    entities:
      - entity: sun.sun
        name: Garage
        show_state: false
      - entity: sun.sun
        name: Side
        show_state: false
      - entity: sun.sun
        name: Back 1
        show_state: false
      - entity: sun.sun
        name: Back 2
        show_state: false
  - type: glance
    show_name: false
    card_mod: *ref_card_mod
    entities:
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true
      - entity: sun.sun
        show_name: false
        name: Motion
        show_last_changed: true

Styles seems to be stable:

But when the card is opened in UI editor, I see these errors in Code Inspector:

rd-mod r: At path: entities.0 -- Expected the value to satisfy a union of `object | string`, but received: [object Object]
    at d (http://192.168.220.32:8123/frontend_latest/38768.-gCP239u5SQ.js:1:2807)
    at f (http://192.168.220.32:8123/frontend_latest/38768.-gCP239u5SQ.js:1:2615)
    at F.value (http://192.168.220.32:8123/frontend_latest/20207.KXnjAt08q54.js:2:13710)
    at F.value (http://192.168.220.32:8123/hacsfiles/lovelace-card-mod/card-mod.js:1:59842)
    at F.i (http://192.168.220.32:8123/hacsfiles/lovelace-card-mod/card-mod.js:1:52936)
    at t.setConfig (http://192.168.220.32:8123/hacsfiles/lovelace-layout-card/layout-card.js?hacstag=156434866244:215:1564)
    at F.i [as setConfig] (http://192.168.220.32:8123/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524341:1:53062)
    at F.value (http://192.168.220.32:8123/frontend_latest/21948.wVYWKAjUy9c.js:1:15379)

and do not see these errors if not opened in UI editor.
An even in UI editor this MAY NOT happen.

---

Also:

              .name {
                ...
              }
              div:not(.name) {
                ...
              }

The “.name” style will be applied only if name is shown (which is not is some cards).
The "div(…) style will be applied only if state/last-chaged is shown (which is not is some cards).

---

Unrelated to card-mod:
defining “name” has no sense since name is hidden:

      - entity: binary_sensor.frontroad_person_occupancy
        show_name: false
        name: Motion

[Ildar_Gabdullin]

I would say I can reproduce the glance card issue w/o card-mod:

A code:

type: glance
entities:
  - entity: sun.sun
    name: Front 1
    show_state: false
  - entity: sun.sun
    name: Front 2
    show_state: false
  - entity: sun.sun
    name: Front 3
    show_state: false

No errors:

UI editor open:

Glance card w/o card-mod opened in UI Editor: errors in Code Inspector

Errors in UI editor itself are not related to card-mod & may be reproduced on a system w/o card-mod:

Glance card: errors in UI Editor

[andy_arbeit]

Okay, I’ll try again. Maybe I wasn’t that clear in the first place.

I am not that deep into css-styles. I have trouble to find out which elements to change to get the results I need.

The most important thing for me is to move the card around with the values of “left”, “right” and “top” or something that has the same affect.

Previously the values did work in the “:host” section but now I can’t figure out where to put them now.

This is an example code which needs some love:

          - type: custom:hui-element
            card_type: custom:mini-graph-card
            points_per_hour: 4
            line_width: 2
            font_size: 80
            name: CPU Auslastung 15min
            align_header: center
            show:
              extrema: false
              state: false
              points: false
              labels: true
              fill: true
              legend: false
              icon: false
              name: true
            hours_to_show: 48
            hour24: true
            entities:
              - entity: sensor.rammelsau_cpu_load_average_15_min
                aggregate_func: min
            color_thresholds:
              - value: 80
                color: red
              - value: 40
                color: green
              - value: 41
                color: yellow
              - value: 42
                color: yellow
            card_mod:
              style: |
                :host {
                  left: 90.8%;
                  top:  58%;
                  width: 60.4%;
                  --ha-card-border-width: 0px 3px 3px 0px;
                  --ha-card-border-color: #212121;           
                  }
                ha-card {
                  border-radius: 1vw;
                  position: relative;
                  padding: 0 !important;
                  }
                .graph__labels {
                  font-size: 15px !important;
                  padding: 0px 0px 0px 5px !important;
                }
                .header {
                  padding: 5px 0px 0px 0px !important;
                }

[Ildar_Gabdullin]

@andy_arbeit

The most important thing for me is to move the card around with the values of “left”, “right” and “top” or something that has the same affect.

1. Do you need to “move” it in picture-elements card?
2. If yes - do you need to “move” dynamically (i.e. today “top = 10”, tomorrow “top=100”) or using fixed values (i.e. “top=10” always)?

[tom_el_camino (Tom)]

no, that was for me

[Ildar_Gabdullin]

No, that was my reply to “newer format” )))

[Greminn (Simon)]

Thank you!! All solved

[andy_arbeit]

Yeah, picture-elements is the background and the cards are the elements.

I would use fixed values. So a static position is what I need.

[Ildar_Gabdullin]

No hui-element needed for a custom card on picture-elements:

type: picture-elements
elements:
  - type: custom:mini-graph-card
    entities:
      - sensor.processor_use
    style:
      top: 32%
      left: 40%
image: /local/images/test/lightgreen.jpg

[catboxer]

With the change over to the new style format, I’m having trouble getting my Badges to change color. I’m sure it’s a spacing/formatting issue with CSS. Can anyone tell me the correct indentations I should be using?

Old:

card_mod: null
style: |
  ha-card {
    --ha-card-background: teal;
    color: var(--primary-color);

New attempt, but doesn’t work:

card_mod:
  style: |
    ha-card {
      --ha-card-background: teal;
      color: var(--primary-color);
    }

Been hacking at this for an hour, but not great at CSS. I want my blue badges back

[Ildar_Gabdullin]

@catboxer

my Badges

what is it?

@catboxer

Old:

card_mod: null
style: |

It never been this way.
In ver. 3.3 you were suggested to add “card_mod” keyword, and you added in a wrong way w/o indentation.