#Conditional color in Custom:Buttoncard

1 messages · Page 1 of 1 (latest)

lethal sandal
#

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.

potent atlas
#

I don't think you can use js in the styles section

lethal sandal
#

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?

potent atlas
#

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)

lethal sandal
#

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.

potent atlas
#

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

lethal sandal
#

Yeah I don't think the logic is the problem here. There's something off with the "architecture" of my code.

potent atlas
#

I just got the background colour working on mine, maybe this will help

lethal sandal
#

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!

potent atlas
#

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)

lethal sandal
#

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

potent atlas
#

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

potent atlas
#

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)

lethal sandal
#

Ah right, a deeper nested styles.

#

Yep that's working. Great, thanks!