Hi
I am trying to put this code into a button, but I am doing something wrong!!
type: custom:button-card
entity: person.darren
aspect_ratio: 4/4
show_name: false
show_icon: false
styles:
card:
- padding: 4%
- background-image: >-
url ('/local/grin_smile.png')
- background_size: 90%
custom_fields:
battery:
- align-self: right
- position: absolute
- right: 4%
- top: 4%
- color: >-
[[[ if (states["sensor.kingkong_x_pro_battery_level"].state <= 30) return
"#e45649"; if (states["sensor.kingkong_x_pro_battery_level"].state <= 50)
return "#ffa229"; else return "#50A14F"; ]]]
custom_fields:
battery: |
[[[
return `<ha-icon
icon="mdi:battery"
style="width: 20px; height: 20px;"></ha-icon
this is what I get:-
You have issues with
custom_fields:
battery: |
Please review this thread
yeap, you where correct, I have changed things a bit and have now managed this, where am I going wrong with the background image ?
type: custom:button-card
entity: person.darren
aspect_ratio: 4/4
show_name: true
show_icon: true
styles:
card:
- padding: 4%
- background-image: url ('/local/grin_smile.png')
- background_size: 90%
- background_repeat: no repeat
- background_position: top
- " --keep-background": "true"
custom_fields:
location:
- position: absolute
- left: 4%
- top: 4%
- color: >-
[[[ if (states["person.darren"].state == "home") return "#50A14F"; if
(states["person.darren"].state == "Work") return "#FFA500"; else
return "#e45649"; ]]]
battery:
- align-self: right
- position: absolute
- right: 4%
- top: 4%
- color: >-
[[[ if (states["sensor.kingkong_x_pro_battery_level"].state <= 30)
return "#e45649"; if
(states["sensor.kingkong_x_pro_battery_level"].state <= 50) return
"#ffa229"; else return "#50A14F"; ]]]
custom_fields:
battery: >
[[[ return `<ha-icon icon="mdi:battery" style="width: 20px; height:
20px;"></ha-icon
<span>${states['sensor.kingkong_x_pro_battery_level'].state}%</span>`
]]]
The image settings need to be under custom_fields:
type: custom:button-card
entity: person.darren
aspect_ratio: 4/4
show_name: true
show_icon: true
custom_fields:
styles:
card:
- background-image: url ('/local/grin_smile.png')
- background-size: cover
- padding: 30%
- border: none
