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

[ASNNetworks]

Hi Idar, thanks for the suggestion. But this changes the height of each option in the list. This makes selecting it on mobile devices harder. My goal is to reduce the size of the window itself, so you can scroll in the window to see the options. Lovelace does this automatically when you’re at the bottom of the page and open a input_select window. But since I have a sticky footer, the list goes under it, and I can’t see all items.

So what I want to achieve is to set an own max height of the actual window (and not let Lovelace decide the max height based on the empty space under it). Using inspect element, I have located the element, but nothing I try has any effect.

I seems to some kind of responsive element as well. When the list is open and you resize the window, it auto adapts if the browser window is smaller than the list box itself (allowing you to scroll inside the box window, which is what I want to set myself at a fixed height).

Perhaps this is just not possible using card-mod?

[Ildar_Gabdullin]

@ASNNetworks

But this changes the height of each option in the list. This makes selecting it on mobile devices harder. My goal is to reduce the size of the window itself, so you can scroll in the window to see the options

Are you talking about this?

type: entities
title: List's height
entities:
  - entity: input_select.test_sensors_for_graph
    card_mod:
      style:
        ha-paper-dropdown-menu: |
          paper-listbox {
            max-height: 50px;
          }

Update (21.06.22): this style does not work with MDC controls (since HA 2022.3). Check updated styles here.

[ASNNetworks]

Yes exactly this! Once again, thank you very much!

[pw44 (Paulo Ven)]

Hya,

whats the URL for custom HACS repo?

Thx in advance.

[parautenbach (Pieter Rautenbach)]

You don’t need to do that. It’s a default HACS repo. Just search for it in HACS. (Also, go to the first post of this thread and follow the link to Github: All the instructions are there.)

[pw44 (Paulo Ven)]

well, i didn’t find it. I’m on bare metal, no supervisor, no hassio

“Repository ‘thomasloven/lovelace-card-mod’ exists in the store” is what i get from HACS when i try to add GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

but i cannot find it to install.

[Ildar_Gabdullin]

@pw44

I’m on bare metal, no supervisor, no hassi

I am using HA in Docker.

• install HACS from Settings → Integrations
• restart
• there is a new menu item on a left sidebar (“HACS”)
• find card-mod in HACS (no need to add a new repository)
• install
  …
• PROFIT!!!

[woks]

@pw44

i cannot find it to install.

I’ve try to follow your steps.
Same issue, i cannot find it to install.

[ASNNetworks]

Don’t use the search bar in HACS, but the button on the bottom right. The search bar is to search for plugins you already installed. The button on the bottom right is for installing new plugins.

[pw44 (Paulo Ven)]

solved:

HACS → frontend — three dots right upper → dismiss

reload — + explore & add repo… search for card-mod.

you will be able to install it.

i had to dismiss all before finding it.

[pw44 (Paulo Ven)]

@ASNNetworks what does “+ explore & add repo” means?

[ASNNetworks]

It means:

The button on the bottom right is for installing new plugins.

So if you want to install card-mod, then you need to press that button, search for it and install. This is something you should read if you don’t understand what it means: Getting started | HACS

[pw44 (Paulo Ven)]

right. and when you click it, you can search for repos, right?

so, i didn’t understand your warning.

[woks]

@pw44

card-mod

thanks, its work

[ASNNetworks]

Because many new HACS users use the search bar op top to find new plugins, instead of the button right under and then get stuck. Since you had issues, I just gave you a hint incase you were having the same misconception.

[neilv (Neil)]

Can someone help me? I’ve started editing my Lovelace, but I want the text centered and the icon visible only when there’s movement in red. But this doesn’t work no matter what I try.

type: entities
entities:
  - entity: binary_sensor.beweging_woonkamer
    type: custom:multiple-entity-row
    state_color: true
    show_state: false
    name: Woonkamer
    entities:
      - entity: sensor.temperatuur_thermostaat_woonkamer
        name: false
        styles:
          font-size: 0.8em
        format: precision 2
      - entity: sensor.vochtigheid_thermostaat_woonkamer
        name: false
        styles:
          font-size: 0.8em
      - entity: sensor.licht_woonkamer
        name: false
        styles:
          font-size: 0.8em
show_header_toggle: false
card_mod:
  style: |
    ha-card {
      color: #ffffff;
      background: #5A5A5A;
      margin-bottom: 20px;
    }
    :host {
      height: 47px;
      --paper-item-icon-active-color: #22F7F6;
      --paper-item-icon-color: #5A5A5A;
    }

[TommyWelle (Tommy Welle Jacobsson)]

I have this when theres movement.
It flashes while it’s ON, and goes away when it’s OFF

[kravalli7]

This works great I even made the buttons images, so I have bigger hitboxes. My only problem is the shadow of the picture element itself do you knwo how I can get rid of that?

[suxlala]

What do you mean by shadow?
Is it that the picture element is a bit brighter than the background? This only depends on the picture itself - if it’s fully transparent or not, or it has any color tint.

[kravalli7]

I mean this shadow around the picture and every button/ the black line