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

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

hello
how can i solve this?

thanks

You can’t. If you use style: the GUI editor doesn’t support it and you’ll have to use yaml instead.

Thanks !
this one?

This one




thanks @thomasloven but i am not understanding
what do i have to do ? thanks?

You need to read the message. It’s not an error, it’s an information message.

It’s telling you that your config is not supported by the UI editor - the GUI editor does not support the style: parameter.
It’s also telling you it’s falling back to the YAML editor - the window full of yaml code right below the error message.
If you want to use card-mod, you cannot use the gui editor, but will instead have to edit the YAML of each card manually. Whether you do this in the provided YAML editor visible in your first screenshot or in the RAW editor shown in your second one is up to you.

thanks
the problem is that with the mentioned code colors do not change


so for example in the following card how can i put value in red is they are lower than a value?

background: 'radial-gradient(lightgray, green)'
entities:
  - entity: sensor.planta_conductivity
    name: Condutividade
  - entity: sensor.planta_moisture
    name: Humidade
  - entity: sensor.planta_temperature
    name: Temperatura
  - entity: sensor.planta_light_intensity
    name: Luz
heading: "\U0001F33F Ficus Benjamina"
link: /lovelace/bathroom
panel: true
row_size: 4
type: 'custom:banner-card'

1 Like