The example condition is simple for illustration and test purposes and not the one I will want to actually use. The code in the first screenshot works, the code in the second screenshot it refuses to save at all. So I'd be grateful to anyone who can point out the error in my syntax. To me it looks the same as many working examples I have tried out.
#Conditional color in Custom:Buttoncard
1 messages · Page 1 of 1 (latest)
I don't think you can use js in the styles section
if you define the styles in the state section it should work - https://github.com/custom-cards/button-card?tab=readme-ov-file#styling
Thanks for the reply. The slight complication with following that example is that the button isn't about an entity it's for navigating to a sub-view and the intended condition is based on the state of an input_boolean that isn't directly connected to the button-card
- background-color: |
[[[
if (states["input_boolean.alarms_armed"].state == 'on')
return 'red'
else
return 'green'
]]]
That's sort of what I actually want to achieve, what section can that go in?
I think it should be:
- operator: template
value: '[[[ return states["input_boolean.alarms_armed"].state == 'on' ]]]'
background-color: 'red'
- operator: default
background-color: 'green'```
you also need an:
- input_boolean.alarms_armed```
in the main section which forces the refresh
(i've not done a buttoncard that changes the background, so that might not be exactly correct, but that's how i change the icon colour based on an unrelated sensor)
Thanks I'll go and try this out and let you know how I get on
Not having any luck. It absolutely will not save. When I open the card in edit again it's still the same old code. I am beginning to wonder if there is something in the latest HA update that broke something in custom button-card.
Oh, slight error - you'd need to use " not ' inside the single line js I had.
Otherwise I'd recommend asking on their github page in an issue, I'm not an expert with it
Yeah I don't think the logic is the problem here. There's something off with the "architecture" of my code.
I just got the background colour working on mine, maybe this will help
I'll try that too. What I have managed to get working, which will do if all else fails, is conditional Name, so I can have it say "Security - Alarms armed" or "Security - not armed" which will fill the need. In some ways possibly better than changing the colour. Thank you for your time and help!
No worries
The other thing you can do which is a bit janky - just have 2 button cards and wrap them in a conditional card to hide/show based on alarm state (it's what I did before I moved to custom button cards)
Yeah I did think of that, but I'd like to get the proper way working. Ok your example did work for me, to change the icon colour. I just need to find out how to get the background colour of the whole tile. "background-color" doesn't seem to be it. But at least I feel the task is getting somewhere now.
It's actually not doing what the readme says. As far as I can see the author is saying setting color-type to card should apply "color" to the font, but it's not doing so for you or for me. Only our icon colors are changing
so i found putting the color_type: card in the main body meant returning color: red/green in the state changed the background properly and then i could use styles: icon: -color to set icon colour independently
but that was just me messing around a bit, idk if there are other ways to arrange the syntax
update:
- operator: template
value: '[[[ return variables.boost_on ]]]'
styles:
card:
- background-color: red
icon:
- color: rgb(255, 193, 7)
- operator: default
styles:
card:
- background-color: green
icon:
- color: rgb(68, 115, 158)
works just fine for me, without having to define the color_type in the main body
(answering this question has got me playing around with a couple of things i've been putting off till now)