SOLVED: Any idea how to make custom-mini-graph background transparent?

Configuration
1

I want to illustrate the temperature with my new pool temperature sensor.
pool-attempt1
I want the graph to be the same blue or transparent, I’m using @kalkih custom mini-graph card
If I go to the CSS, I can enter

background-color: transparent

for the ha-card
But this doesn’t have any effect in the card:

type: picture-elements
title: Pool
image: /local/pool-pictogram.png
elements:
  - type: state-label
    entity: sensor.pool_temperature
    style:
      left: 20%
      top: 13%
      color: black
  - type: 'custom:mini-graph-card'
    entities:
      - sensor.badevaerelse_temperatur
    hour24: true
    hours_to_show: 48
    refresh_interval: 300
    show:
      fill: false
      name: false
      state: false
      icon: false
    style:
      width: 52%
      left: 50%
      top: 61%
      background-color: transparent
      box-shadow: none

I’ve also tried adding !important to it to no avail, is it possible to do with the custom mini graph card?

1 Like
2

You can’t mix and match card attributes on any old card. You need to read the cards documentation and only use the attributes that the card allows. Mini graph card doesn’t support a style attribute

If you want to change the style, you should use the card-modder card to adjust the style.

2 Likes
3

Hey @fribse

Awesome concept, very creative!
The styles applied in the picture-element is only applied to the root element of the card and not the actual <ha-card> element, which is the element containing the actual background.

As petro said, you can utilize card-modder to apply styles to the <ha-card> element.
I would also recommend using the mini-graph-card config option group: true in your setup.

1 Like
4

Thankyou for your suggestions @petro and @kalkih , I’ll try it out!

5

And this is the result, the card modder worked perfectly!
One thing @kalkih, it would be great if the graph showed the time for the sample when the mouse is placed over a point, but I don’t see an option for that, is that worth a feature request? :slight_smile:
The ‘pump’ in the animation is not really what I want, we do have a small waterfall in the pool, but I would rather have a pump of some sort animated, just can’t find a proper one.

6

Cool!
I don’t have flash installed so can’t watch the video unfortunately.
The time & value is displayed by default when you hover a point, it’s not visible if you hide the state however.
58

1 Like
7

Ahh, I see, ok, that will not work for me, as the text is placed too high, I will need to manipulate my background image, and stretch it to have room enough for it…
I’ll just live without it :slight_smile:

I uploaded the mp4 of the pool here: https://1drv.ms/v/s!AncbkEDUWhO6g28iKVFKBSh5XkV7
It doesn’t show the mouse, but I click on the ‘waterfall’.

1 Like
8

Hi, this was a bit of an old post but I really wished you had posted your ha-card code as I can’t figure out the CSS of it to make the bg of the custom mini card transparent. If you still have… would you mind? Thanks (The screencast requires flash which is not possible to use anymore)
Thanks!

9

You need card mod.

The code he would have used is completely different now as card-modder has been deprecated.

1 Like
10

Exactly, and I can’t make it work after the update :slight_smile:

11

Have you found a solution with lovelace-card-mod ? I would be interested as well :slight_smile:

12

Yes, I did.
It currently looks like this:

image

I had to add the hui-element custom card for this to work.
The card is still a picture elements card.

The relevant part with the graph looks like this:

  - type: custom:hui-element
    card_type: sensor
    detail: 2
    entity: sensor.pool_temperature
    graph: line
    card_mod:
      style: |
        ha-card {
          --ha-card-background: "rgba(0, 0, 0, 0.3)";
          box-shadow: none;
          color: var(--primary-color);
        }
        .header {
          display: none !important;
        }
    style:
      left: 58%
      top: 38%
      width: 45%
      height: 25%

So I make the background transparent, and removes the headlines, and then place it correctly.

1 Like