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

[klogg]

Has something changed with the use of mod-card since 2022.3 or a recent card-mod upgrade?

Yes, I’ve read the instructions and as the read-me says “I know what I’m doing”. In fact I have been using this successfully for well over a year.

Now I have upgraded to 2022.03 and I get this error

I have this in my configuration.yaml

frontend:
  themes: !include_dir_merge_named themes/
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js

and have tried with and without this in my resources.yaml (Do I need it or not?)

- url: /hacsfiles/lovelace-card-mod/card-mod.js
  type: module

card-mod is obviously installed and working everywhere else.

Usual restarts, refreshes and clearing cache have been tried.
Any help please!

PS Edge browser desktop and phone if that makes a difference.

[Mariusthvdb (Marius)]

see: mod-card 'doesnt exist' on first load · Issue #185 · thomasloven/lovelace-card-mod · GitHub and please chime in…

[reste_narquois (Chris Warne)]

I saw this with update to 2022.03 as well.

I took it as a sign that with constant changes to the frontend, the writing is likely on the wall for the mod_card trick (I should underline of course that this is not official in any way), so I ended up replacing all my styled horizontal-stack and vertical-stack cards with Custom Stack In Card

It has a ha-card element so can be more easily styled with the standard card_mod approach.

[Recte]

I use a picture-glance (in a vertical stack card) for my camera and am pleased with the result in general.
The only downer is that it takes a short while before the image is loaded, but just enough to be annoying.
The picture-glance is the top card and just when you want to tap a button, the image is loaded and so the button jumps to a lower position in the screen.

I am wondering if it’s possible to somehow set a predefined height. Unfortunately am too new to the Card-mod to figure it out by myself. Anyone a suggestion how to solve it?

[Ildar_Gabdullin]

@Recte

picture-glance

Try to find your solution here:
1st post -> link at the bottom -> post with styles -> post for Picture Glance card
If no solution is present then come back with a more detailed description.

[Recte]

I added (your) code for a picture-elements: Styling elements in Picture elements card: a small tutorial - #2 by Ildar_Gabdullin

That seemed to work.

[danielschuessler (Daniel)]

Hi,
thanks for this mod.
I want to create a simple card with big time numbers.

What I’ve tried is very simple. Color and weight change is working, but font and size don’t work. Increasing the font size does result in a bigger space at the top of the card, but the size of the numbers stay the same. Any suggestion?

type: entity
entity: sensor.time
card_mod:
  style: |
    ha-card {
        font-size: 150px;
        font-family: Helvetica;
        color: yellow;
        font-weight: bold;
        }
state_color: false
name: Bechtolsheim

[Ildar_Gabdullin]

@danielschuessler

type: entity

1st post -> link at the bottom -> post with styles -> post for Entity card

[klogg]

Thanks for that, I was just about to install Custom Stack In Card via HACS when I saw that Card-Mod had an update. I updated and it seems to work again…

[Mariusthvdb (Marius)]

dont think I found a post on the core Lovelace type: grid card above, so here’s my quest:

using

  - type: grid
    columns: 10
    cards:

and a set of button cards, I get a nice horizontal row of small buttons, which I need’ but unfortunately with gaps between the buttons.

I tried:

  - type: custom:layout-card
    layout_type: custom:horizontal-layout
    layout:
      width: 40
      max_cols: 10
      card_margin: 0px
      margin: 0px

which comes close,

but this is bothered by the resizing (probably the fixed width) and the iPhone screen size. taking 1 or 2 buttons to the next line.

Grid auto-resizes nicely.

So, I want to card_mod the gap in the type: grid card to be 0px.

could anyone help me out doing so please?

thanks for having a look!

maybe:

  - type: custom:stack-in-card
    mode: horizontal
    keep:
      background: true
    cards:

does just that, but then I would need yet another custom card…

[arganto]

And why do you not stay with grid, e.g. inside a custom:vertical-stack-in-card (to have a ha-card) and then remove the gaps with card_mod?

Edit: Ah, o.k. last paragraph. I see.

[Mariusthvdb (Marius)]

that is exactly what I was asking…

@Mariusthvdb

to card_mod the gap in the type: grid card to be 0px.

btw I dont use the vertical-stack-in-card, had too many issues with that in the past
I always try an entities card first (can throw anything in an entities), or a core stack (either horizontal or vertical). Grid card is magic.

if nothing of these does what I need, I might resort to stack-in-card , but it always gives trouble when using fold-entity-rows and needs heavy card-modding in that situation…
but, I have to admit, it seems to be the easiest card for concatenating images/buttons in a single row.

though I very often see this happening:

first load after a lovelace refresh shows perfectly:

and a reload messes it up:

grr,

need to override that yet again with:

    card_mod:
      style: |
        ha-card {
          background-color: var(--background-color-off);
        }

on the stack-in-card…

[arganto]

Hm. Expected the the problem was only to have it without helpe-card around. If it is only the css, you are asking. The root inside grid-card has

grid-gap: var(--grid-card-gap, 8px);

[arganto]

@Mariusthvdb

I always try an entities card first (can throw anything in an entities), or a core stack (either horizontal or vertical).

Don’t get it both topics:

Core stack do not have ha-card to card-mod it. Have it?

And “can throw anything in an entities”? Without lovelace-hui-element?

[Mariusthvdb (Marius)]

@arganto

Core stack do not have ha-card to card-mod it. Have it?

its easy to mod the contained cards.

@arganto

Without lovelace-hui-element?

nope, with hui-element, one of the most used cards in my config

now, how to get to the .root in the type: grid card and set the grid-gap: 0px;

[arganto]

@Mariusthvdb

its easy to mod the contained cards.

No, if those do not have ha-card and the contained card neither (like here grid), then you can’t. That was the topic and therefor I proposed

@arganto

e.g. inside a custom:vertical-stack-in-card (to have a ha-card)

@Mariusthvdb

now, how to get to the .root in the type: grid card and set the grid-gap: 0px;

Just set it. Here with custom:vertical-stack-in-card as helper.

type: custom:vertical-stack-in-card
title: abc
card_mod:
  style: |
    :host { --grid-card-gap: 100px; }
cards:
  - type: grid

Or (not so efficient):

type: custom:vertical-stack-in-card
title: abc
card_mod:
  style:
    hui-grid-card$: |
      #root { grid-gap: 100px !important; }
cards:
  - type: grid

[Mariusthvdb (Marius)]

@arganto

card_mod:
  style: |
    :host { --grid-card-gap: 100px }

thanks, however that is not what I can use, since I need the mod to be set in the grid-card itself and need a mod-card for that, like

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          grid-gap: 0px;
        }

    card:
      type: grid
      columns: 10

since the grid card doesnt have a ha-card element. This doesn’t work though.

this does !

  - type: custom:mod-card
    card_mod:
      style:
        hui-grid-card$: |
          #root { grid-gap: 0px; }
    card:
      type: grid
      columns: 10

also without the !important

[arganto]

I’m currenlty not sure, where is the node in your thoughts. The vertical-stack-in-card was an example. You can use whatever around the grid, as long as it brings an ha-card element to start card-modding. So yes, it will work, as long as you are using my examples and not elaborating whyever new ideas, which are of course not working. I showed two ways. Both are working with mod-card as well.

type: custom:mod-card
title: abc
card_mod:
  style: |
    :host { --grid-card-gap: 100px; }
card:
    type: grid

and

type: custom:mod-card
title: abc
card_mod:
  style:
    hui-grid-card$: |
      #root { grid-gap: 100px !important; }
card:
    type: grid

BTW in first way, I am setting only the (existing, but not set) variable in host, which is then used later on.

Without such card around, you don’t have ha-card and it will not work.

[Mariusthvdb (Marius)]

well, I am doing that with a purpose, and have done so from the start. This is not the only grid card in the vertical-stack. I can not set it on the stack for that matter.

thats why I use mod-card.

I now see that:

  - type: custom:mod-card
    card_mod:
      style: |
        :host {
          --grid-card-gap: 0px;
        }

also works indeed.

@arganto

where is the node in your thoughts

no node, just exploring different options. of all of the options, this seems to be the most stable. SO thank you very much!

final solution, a perfectly adjusting row of 10 buttons, no gap, no box-shadow (set in the individual cards), and no peeking background color (as on the stack-in-card)

[Mariusthvdb (Marius)]

just found/realized we can do this on a regular horizontal-stack too:

type: custom:mod-card
card_mod:
  style: |
    :host {
      --stack-card-margin: 0px;
    }
card:
  type: horizontal-stack
  cards:

which is a mod Ive been looking for since a very long time… #TIL
this can replace a lot of other stuff in the config, and is so concise.
once you see it it is so obvious…