đŸ”č Card-mod - Add css styles to any lovelace card

Card-mod works only with ha-card. Card-modder works with other things too. That’s all.

From the wiki post linked from the documentation:

<then> and <else> can be any template - including further if() -expressions"

Kind of got this working. I have an entity card with 2 enitities. I want to colour the icon based on state. This works but the second entity only changes colour if the 1st one has changed colour.
Probably because I have no idea how to use the #states part. Also, if I remove the background part, the rest doesn’t work
Any ideas ?

type: entities
title: Front Door Lock
show_header_toggle: false
style: |
    ha-card {
      background: var(--background-card-color);
    }
    #states div:nth-of-type(1) {
      --paper-item-icon-color: [[ if(lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked == "unlocked", "red", "green";
    }
    #states div:nth-of-type(2) {
      --paper-item-icon-color: [[ if(sensor.front_door_lock_battery <25, "red", "green";
    }
entities:
  - entity: lock.assa_abloy_yale_conexis_l1_sd_l1000_ch_locked
  - entity: sensor.front_door_lock_battery

You need to end the if(s with a ) and the [[s with ]].

Trying to figure out how to apply this to slider-entity row’s label so that it wraps instead of ellipsing on overflow. Ultimately I want to unset “text-overflow” and “white-space” on the “div.info” element
 The jquery selector path is as follows
 just can’t figure out what this is supposed to translate to for card-mod:

$(‘home-assistant’).shadowRoot.querySelector(‘home-assistant-main’).shadowRoot.querySelector(‘ha-panel-lovelace’).shadowRoot.querySelector(‘hui-root’).shadowRoot.querySelector(‘hui-view’).shadowRoot.querySelector(‘hui-entities-card’).shadowRoot.querySelector(‘slider-entity-row’).shadowRoot.querySelector(‘hui-generic-entity-row’).shadowRoot.querySelector(‘div .info’)

style:
  # The following two lines are separated to make sure card-mod first goes into _every_ div inside #states, and then looks for slider-entity-row inside each of them
  "#states div":
    slider-entity-row:
      $:
        hui-generic-entity-row:
          # Once we reach the final shadow-root in our path, there's no need to drill any deeper
          $: |
            .flex .info {
              text-overflow: unset;
              white-space: unset
            }  

Unfortunately, due to how lovelace loads custom elements this won’t be applied immediately, but will happen after the first state update.
I’m still looking for a way to fix that


5 Likes

Thanks for the reply, don’t know how the brackets were missing !

All working fine now, great mod, thanks

Thanks!. This worked as expected and was super helpful in connecting up your syntax with the console query.

This works great, just one thing I can’t seem to figure out. And that is how to add a background image to it (a local one) using the following doesn’t work:

style:
  ha-card {
    background: url('/local/images/background.png');
  }

It will just load a transparent image (I have tried multiple different ones and even tried other locations with full address).

Is this not possible yet? Or am I going at it wrong?

1 Like

I just tried this and it works if the image is quite small, but it tiles

It works fine in three of the provided examples


I’m trying to remove the padding on the items inside fold-entity-row

I can’t get this to work, am i way off?

  - type: custom:fold-entity-row
    style:
      "#states div":
        fold-entity-row:
          $: |
            "#items" {
              padding: 0 0 0 0px;
              margin: 0;
            }
1 Like

Styles belong to the card. Not the row.

And you need to remote the qoutes around #items.
That’ll probably upset your syntax highlighter, but it is correct.

I see!

The documentation on github is great btw, made it easy to combine both styling to <ha-card> and the removal of the padding inside the fold-entity-row.
Here is an example for future reference

type: entities
style:
  .: |
    ha-card {
      border-radius: 20px;
      overflow: hidden;
      width: 89%;
      margin: 0 auto;
      padding-top: 0px;
    }
  "#states div":
    fold-entity-row:
      $: |
        #items {
          padding: 0 0 0 0px;
          margin: 0;
        }
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: Kök
    open: true
    items:
      - entity: light.kokslampa
        name: Kökslampa
        icon: mdi:lamp
2 Likes

Hi,
I have an entities card list where I want to have a Monster card inside. But when I do there is an issue with the margin in relation to the rest of the entities which are outside the monster card. Is it possible to add a margin/padding style to the monster card to make the entities aligned?

- type: entities
  title: "Monster Card test"
  show_header_toggle: true
  entities:
    - light.zzzzzzzzz
    - type: divider
    - binary_sensor.yyyyyyyyy
    - binary_sensor.yyyyyyyyyyyy
    - entity: binary_sensor.yyyyyyyy
    - type: divider
    - type: custom:monster-card
      card:
        type: entities
      filter:
        include:
          - entity_id: binary_sensor.xxxxxxxxxxxx
          - entity_id: input_xxxxxxxxxxx
      when:
        entity: binary_sensor.xxxxxxxxx
        state: 'on'
    - type: divider
[...]
- type: custom:monster-card
  card:
    type: entities
    style:
      play around with what you put here
  filter:

I suggest you also take a look at auto-entities.

Hi there,

can anybody help me in achieving this (card-modder) with card-mod?

card-modder:

     style:
       background-image: url("/local/lovelace/card_backgrounds/cardbackK.png")
       background-repeat: no-repeat
       background-color: rgba(0,0,0,0.0)
       background-size: 100% 100%
       border-radius: 20px
       color: "#999999"
       border: solid 1px rgba(100,100,100,0.3)
       box-shadow: 5px 5px rgba(0,0,0,0.6)

I have tried just copying it but this does not seem to work:

    style: |
      ha-card {
        background-image: url("/local/lovelace/card_backgrounds/cardbackK.png")
        background-repeat: no-repeat
        background-color: rgba(0,0,0,0.0)
        background-size: 100% 100%
        border-radius: 20px
        color: "#999999"
        border: solid 1px rgba(100,100,100,0.3)
        box-shadow: 5px 5px rgba(0,0,0,0.6)
      }

Thanks very much in advance! :slight_smile:

UPDATE: Think i got it the “;” at the end of each line is missing :see_no_evil:

Just wondering if there is a way to change the width of the key pad on the alarm panel, I have used the following to edit the font and button sizes but the panel itself is only 300px wide, it would be nice to make it 480px to fill the screen and make input the code easier.

  - type: alarm-panel
    card_icon: 'mdi:bell'
    style:
      '#keypad mwc-button':
        $: |
          button {
            min-height: 70px;
            font-size: 28px !important;
          }
      '#keypad mwc-button:nth-of-type(12)':
        $: |
          button {
            min-height: 70px;
            font-size: 18px !important;
          }
    entity: alarm_control_panel.home_alarm

So far - so good


Now I succeeded removing the padding in the monster card. But I do have a box-shadow instead. Have tried the following but without succes:

- type: custom:monster-card
  card:
    type: entities
    style: |
      ha-card {
      }
      .card-content {
        padding: 0 0 0 0px;
        box-shadow: none;
      }
  filter:
    include:
      - entity_id: [...]

How to remove that? Do you have suggestions @thomasloven? :slight_smile:

1 Like

Did you check in the inspector which element has the box-shadow? I’d guess ha-card


1 Like