How to go from custom Lovelace Card Modder to Lovelace Card Mod?

Configuration Frontend
1

Hi All

I’ve been using the Lovelace Card Modder to fix the margin etc. on a picture entities card for my pool.
I used it for getting a transparent background.
As that is now deprecated I’m trying to accomplish the same thing with Lovelace Card Mod, also by @thomasloven.
It currently looks like this:
pool-monitoring
To place the graph the right place in the picture, I’ve created the mini-graph card like this:

  - entities:
      - sensor.pool_temperature
    group: true
    hour24: true
    hours_to_show: 48
    refresh_interval: 300
    show:
      fill: false
      icon: false
      name: false
      state: false
    style:
      left: 50%
      top: 33%
    type: 'custom:mini-graph-card'

I’ve tried to add the style to make it transparent in the above, and make it as ‘card mod’ wants it, but when doing so it seems to then fail on placing the graph the right place with the ‘left’ and ‘top’, I think that is because the style here applies to the card, and when I add the ‘Card Mod’ the style is moved inside the card.
It’s the only place I use the Lovelace Card Mod, so if it doesn’t work for me, I think I’ll remove it, but I hope somebody can tell me how to accomplish this the proper way :slight_smile:

2

Try:

style: |
  ha-card {
    box-shadow: none;
    --ha-card-background: 'rgba(0, 0, 0, 0)';
  }
1 Like
3

Have you been doing this in an entities card?
It’s the perfect fit for a picture-elements. You don’t even need card-mod to do it.
Check out sharethelove.io.

Edit: Oh, wait. Now I see. It was the auto formating that threw me off.

Anyway. It’s still all doable without card-mod.
Just add box-shadow: none and --ha-card-background: rgba(0,0,0,0) (without semicolons) to your styles.

4

Hi @tom_l, thankyou for your help
Doing this:

  - entities:
      - sensor.pool_temperature
    group: true
    hour24: true
    hours_to_show: 48
    refresh_interval: 300
    show:
      fill: false
      icon: false
      name: false
      state: false
    style: |
      ha-card {
        box-shadow: none;
        --ha-card-background: 'rgba(0, 0, 0, 0)';
      }
      left: 50%
      top: 33%
    type: 'custom:mini-graph-card'

Will make it ignore the placement of the graph:

pool-monitoring2
pool-monitoring2637×533 67 KB

Hi @thomasloven, thankyou for chiming in.
I’m using the picture elements card to place all these things nicely.
The only thing I need the Card Mod for is to make the mini-graph background transparent.
If I enter this directly in the firefox debugger, the background is transparent:

ha-card[more-info] {
	background: transparent;
}