Picture Elements with custom Gauge card

Configuration
1

I’m using a picture elements card to display the status of my car via “fordpass” integration. I’ve managed to add a gauge card within the picture elements card, but I want to make the background of the gauge card transparent. I can make it transparent via “style” configs. I can also relocate the gauge via style; however, I can’t figure out how to make the card background transparent AND still be able to add the coordinates under style. Any suggestions?

Here is the code that works to make the background transparent:

- type: custom:hui-element
    card_type: gauge
    style: |
      ha-card {
        background-color: transparent; border: none; box-shadow: none;
      }
    entity: sensor.fordpass_fuel
    gauge:
      needle: false
    min: 0
    max: 100
    segments:
      - from: 0
        color: '#000099'
      - from: 35
        color: '#009900'
      - from: 75
        color: '#990000'

And this is the code to locate the card:

- type: custom:hui-element
    card_type: gauge
    name: test
    hide_name: true
    needle: true
    min: 10
    max: 30
    segments:
      - from: 0
        color: '#000099'
      - from: 18
        color: '#009900'
      - from: 25
        color: '#990000'
    entity: sensor.fordpass_fuel
    style:
      left: 93.5%
      top: 50%

Any help combining these would be appreciated

1 Like