Hi,
Noob question - I’m using custom button card, and I cannot for the life of me change the background colour of a card based on its state being either on or off. I feel like this is a really easy thing to do, but I have been searching and searching and I cannot work this out.
This is what I have so far, but I’m really struggling to understand when to put a dash or not, so that may be the issue too.
Any help would be really appreciated. Thank you
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
styles:
card:
- background-color: orange
- value: 'off'
color: blue
styles:
card:
- background-color: green
tap_action:
action: toggle
entity: switch.sonoff_1000c0d660
name: Hallway light
theme: noctis
ghassan
(Ghassan Christensen)
March 17, 2022, 8:16pm
2
Hi @macca_andy ,
You simply need to indent “card” after styles.
Here is a working version
show_name: true
show_icon: true
type: custom:button-card
state:
- value: 'on'
color: red
styles:
card:
- background-color: orange
- value: 'off'
color: blue
styles:
card:
- background-color: green
tap_action:
action: toggle
entity: switch.sonoff_1000c0d660
name: Hallway light
theme: noctis
Kind regards,
Ghassan
3 Likes
Wow. What a simple change you just made. Do you know if there are any good resources to learn about spacing and indents?
Thank you very much for your help.
ghassan
(Ghassan Christensen)
March 17, 2022, 8:35pm
4
No general rules.
You follow the instruction and examples of the component you are trying to use.
For custom:button-card see for example:
Fun with custom:button-card - Share your Projects! / Lovelace & Frontend - Home Assistant Community (home-assistant.io)
or the instructions at the cards Github repository:
custom-cards/button-card: Lovelace button-card for home assistant (github.com)
Please remember to tag my reply as solution.
Kind regards,
Ghassan
Not sure how to mark it as solved with your solution… these are the only options i have?
ghassan
(Ghassan Christensen)
March 18, 2022, 10:08am
6
You should have more options like this
on my post not on yours