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

Thanks for the help. Unfortunately I don’t manage to find the proper way to set the margin. The absolute DOM path of the icon is the following:
/html/body/home-assistant//home-assistant-main//app-drawer-layout/partial-panel-resolver/ha-panel-lovelace//hui-root//ha-app-layout/div/hui-view/hui-masonry-view//div/div[2]/restriction-card//div/div[1]/ha-icon

I tried with:

card_mod:
  style:

&
style:

No clue what the difference is BTW.

I tried with

:host,
restriction-card,
ha-icon,
div#overlay,
div#overlay>ha-icon,
div>div#overlay>ha-icon

And the full relative paths

"restriction-card":
  $: |
    div>div#overlay
"restriction-card":
  $: |
    div>div#overlay>ha-icon

And with styles:
–restriction-lock-margin-left
–restriction-lock-row-margin-left
–lock-margin-left
–lock-row-margin-left
margin-left

Nothing worked :frowning:

When inspecting I can change the layout:

            ha-card {
              margin-left: -15px;
              margin-top: -20px;
              margin-bottom: -25px;
              box-shadow: none;
            }
1 Like

Would anyone know if it’s at all possible to change the max height of the selection window of input_select entities? I’m talking about this popup window:

image

I want to set a max height. I have a sticky footer in my dashboard, but then the windows goes under my sticky footer if the window is too large (due to many options), which means I can’t select the bottom options. Or would someone know a way to make sure the popup window goes over the sticky footer? I tried setting z-index: 1000 for the input_select (the sticky footer is 999), but that didn’t work.

Open to any suggestions :slight_smile: !

You may play with these vars:

type: vertical-stack
title: Listbox
cards:
  - type: entities
    title: All items
    entities:
      - entity: input_select.test_sensors_for_graph
        card_mod:
          style: |
            :host {
              --paper-font-subhead_-_line-height: 30px;
              --paper-item-min-height: 20px;
            }

image

P.S. Added this example here.

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?

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.

1 Like

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

Hya,

whats the URL for custom HACS repo?

Thx in advance.

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.)

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

“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.

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!!!

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

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.

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.

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

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

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

so, i didn’t understand your warning.

thanks, its work

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.

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.

card-mod

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;
    }