How to make the background of OH-Label-Card transparent

Setup, Configuration and Use Items & Sitemaps
1
  • Platform information:
    • openHAB version: 3.3.0

Hi All,

I’m pretty used to create my own widgets. But I can’t get this to work. I want a graph line displaying the room temperature in a widget. The only way i could find and think of is using an oh-label-card with trendline. An oh-chart has a complete graph layout and I just want the line to be displayed, just like the oh-label-card has.

As you can see below, this is working but the background of the label-card is black and i’m unable to make it transparent…

trendline

This is what I tried:

    - component: f7-block
      config:
        style:
          top: 90px
          left: 100px
          position: absolute
          background: transparent
          width: 250px
      slots:
        default:
          - component: oh-label-card
            config:
              visible: =props.showtrend
              label: " "
              background: transparent
              trendItem: =props.trenditem
              trendGradient: ['#FFF', '#FFF', '#FFF']
              trendStrokeWidth: 5px
              style:
                --f7-theme-color-bg-color: transparent
                background: transparent
                background-opacity: 0%
                position: absolute
                width: 100%
                height: 100%
                top: 0
                left: 0
                z-index: 0

As seen above, I tried to put transparancy everywhere but none of it works.

Hopefully anyone has a sollution. Maybe this is the wrong way but i can’t think of anything else to accomplish what I want.

2
1 Like
3

Thanks! Did not find this topic, but this is the sollution!

- component: f7-block
  config:
    style:
      --f7-card-bg-color: transparent
1 Like