Hello,
I want the background of my mini-graph-card to be transparent
But I couldn’t figure out how.
I tried with styles backgroud-color, with ha-card {} and so on, but I don’t get it…
Can someone please point me into the right direction?
type: custom:button-card
aspect_ratio: 10/3
custom_fields:
value:
card:
type: custom:button-card
entity: sensor.wohnzimmer_klima_temperature
show_icon: false
show_state: true
show_name: true
name: "Indoor Temperature :"
styles:
name:
- padding-left: 70px
- justify-self: start
- font-size: 0.9em
- font-weight: bold
state:
- padding-left: 100px
- justify-self: start
- font-size: 0.7em
card:
- background-color: transparent
- width: 500px
- border-radius: 0%
- z-index: 1
tap_action:
action: none
hold_action:
action: none
graph:
card:
type: custom:mini-graph-card
entities:
- entity: sensor.wohnzimmer_klima_temperature
color_thresholds:
- value: -20
color: "#0000FF"
- value: -10
color: "#00BFFF"
- value: 0
color: "#ADD8E6"
- value: 10
color: "#00FF00"
- value: 20
color: "#80FF00"
- value: 25
color: "#FF8000"
- value: 30
color: "#FF0000"
hours_to_show: 24
hour24: true
points_per_hour: 2
animate: true
update_interval: 30
aggregate_func: avg
line_width: 2
bar_spacing: 5
height: 100
group: true
show:
labels: false
fill: fade
state: false
name: false
icon: false
styles:
card:
- background-color: var(--button-card-background-color)
custom_fields:
graph:
- position: absolute
- bottom: 0px
- left: 0px
- width: 100%
- height: 70%
- padding-bottom: 0
card_mod:
tap_action:
action: none
hold_action:
action: none