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

spudje · August 7, 2021, 11:13am

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

When inspecting I can change the layout:

pollinolas · August 7, 2021, 12:05pm

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

ASNNetworks · August 7, 2021, 2:41pm

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:

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 !

Ildar_Gabdullin · August 7, 2021, 3:00pm

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

P.S. Added this example here.

ASNNetworks · August 7, 2021, 3:34pm

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 · August 7, 2021, 9:45pm

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 · August 7, 2021, 9:50pm

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

pw44 · August 9, 2021, 9:21pm

Hya,

whats the URL for custom HACS repo?

Thx in advance.

parautenbach · August 10, 2021, 4:42am

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 · August 10, 2021, 12:05pm

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 · August 10, 2021, 9:52pm

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 · August 11, 2021, 11:21am

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

ASNNetworks · August 11, 2021, 11:30am

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 · August 11, 2021, 11:30am

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 · August 11, 2021, 11:41am

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

ASNNetworks · August 11, 2021, 12:00pm

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 · August 11, 2021, 12:14pm

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

so, i didn’t understand your warning.

woks · August 11, 2021, 1:12pm

thanks, its work

ASNNetworks · August 11, 2021, 1:30pm

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 · August 11, 2021, 1:39pm

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