Fair enough, as long as everyone here knows that this is not a card that is supported any longer, at least by any sole dev.
Maybe the first post should indicate that, as well as the GitHub page should change to no longer supported. Currently it displays that itās actively maintained.
1 Like
Then you need to change the .js file since the original one doesnt support link functionā¦
You could do sizing with card-modder/card-tools, at least that is the way I do it. But yeah some features from this card would be welcome in core. However this custom button card lacks one big feature and that is a hold action.
1 Like
While not in core, you can change the color of the button on state changes using theme option and wrapping it in the config-template-card. Untested example:
type: custom: config-template-card
entities:
- light.bedroom
card:
- type: custom:hui-entity-button-card
entity: light.bedroom
theme: "${states['light.bedroom'].state === 'on' ? 'sunlight' : 'midnight'}"
Thanks Ianā¦ Iāll have a go at that.
So this works.
- type: 'custom:config-template-card'
entities:
- input_boolean.alarmgaragedoor
card:
type: 'custom:hui-entity-button-card'
entity: input_boolean.alarmgaragedoor
theme: "${states['input_boolean.alarmgaragedoor'].state === 'on' ? 'slateicon' : 'slate'}"
tap_action:
action: toggle
I just defined the on color in the slateicon theme and nothing else. Of course, that will go to shit if I change themeā¦
I was thinking of using the custom state switch card for buttons (the core one), that would work too now wouldnāt it? For example having the cards change when the state changes. I think that way themes wouldnāt matter.
Having the card changeā¦ not sure how that easily would change the color of the entityā¦
Maybe it can but not sure how to do that. or maybe I canā¦ hmmā¦
Actuallyā¦ noā¦ I donāt see a way to change an icon color - unless you change the themeā¦ and in that case the template card does it now.
Something like this, I just made this quickly so I donāt know if it actually works. But by the looks of it, it should. Also donāt mind the color choice as I just picked a color quickly out of the head.
- type: custom:state-switch
entity: switch.pc_van_stephanie
states:
"on":
type: 'custom:card-modder'
style:
--paper-card-background-color: '#FFFFFF'
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
font-size: 13px
card:
name: 'PC'
type: entity-button
icon: 'mdi:desktop-tower-monitor'
tap_action:
action: toggle
entity: switch.pc_van_stephanie
"off":
type: 'custom:card-modder'
style:
--paper-card-background-color: rgba(0, 137, 16, 0.2)
border-radius: 20px
box-shadow: 2px 2px rgba(0,0,0,0.3)
font-size: 13px
card:
name: 'PC'
type: entity-button
icon: 'mdi:desktop-tower-monitor'
tap_action:
action: toggle
entity: switch.pc_van_stephanie
Edit: ah I see, you meant icon color, I thought you meant the card itself.
- type: horizontal-stack
cards:
- type: ācustom:button-cardā
action: navigate
navigation_path: /lovelace/0
icon: mdi:undo-variant
size: 40px
style:
- text-transform: none
- color: white
- background-color: white
Did you ever get this or something like this to work?
Yes I have it worked but I have customized my .js file quite so much and added navigate optionā¦
I donāt take any responsibility for this one and will not give any major support so feel free to check it out and merge it if its good enough.
And I dont take any credit for it since I have just edited the original one.
2 new cards in this oneā¦ Space-card and link card see example below.
- type: horizontal-stack
cards:
- type: "custom:button-card"
color_type: link-card
url: /lovelace/7
name: Climate
entity:
icon: mdi:thermometer-lines
size: 40px
style:
- text-transform: none
- color: black
- background-color: white
- font-size: 14px
- font-weight: normal
- type: "custom:button-card"
color_type: space-card
div: 60px
Link to .js file:
https://pastebin.com/gRR40zDS
You could do this with the core entity button, I use dummy entities (just input booleans) as you have to have an entity assigned. The button does nothing though, it will just navigate to the correct page. Saves you a lot of custom cards which might break eventually. Also remember that this button card is no longer maintained by a sole dev.
1 Like
I do however, would love the core button to be ācolorableā. I removed the custom button card as I really need the hold action (which is not possible with this card) and switched to the core button card. I still managed to color the cards by using the custom:state-switch card. Not ideal, but made by Thomas Loven (which never failed me in the past). A lot of duplicate code unfortunately, but the result is what I cared about and this is what I have got:
1 Like
Thank you for your response and file ā¦
Sorry to pick your brain how to replicate the functionality of this card and code using your card instead
type: entity-button
name: Turn Off Lights
tap_action:
action: call-service
service: script.turn_on
service_data:
entity_id: script.turn_off_lights
entity: script.turn_off_lights
Can you post your code for this?
I did get mine working by using the theme change as suggested by @iantrich but that doesnāt play at all nice if you change the themeā¦ so maybe your solution is betterā¦
What are you trying to gain by switching from entity-button?
css styling would like to not sure how to apply style so they all look and act the same thats all
Thanks so very much super enhancement ā¦