jade hornet
I am trying to make a custom button toggle card for light/switch entities with no brightness attribute to match my hacs big slider card. https://github.com/nicufarmache/lovelace-big-slider-card
Here is my current button card code: https://pastebin.com/3hCam3tp
rain gyro
I'm a bit confused on what you're trying to do and what the problem is. In your screenshot, is the top card the big-slider-card and the bottom is the custom:button-card with the code link?
You're going to need to look at the grid-template-areas a bit closer. - grid-template-areas: "\"i i\" \"n n\" \"state icon\"" is a mess and you have two "icons" in use. Set show_icon: false. For the custom_field icon, set - justify-self: start. This should get you a little bit closer to what the top card looks like: yaml styles: grid: - grid-template-areas: '"icon n" "icon state"' - grid-template-columns: 15% 1fr - grid-template-rows: min-content min-content
jade hornet
I'm a bit confused on what you're trying to do and what the problem is. In your ...
I was wanting the icon, title, and state formatted like it is in the big slider card but instead of the blank space on the right I wanted to have the toggle icon there
So Im basically trying to recreate the big slider card without the slider for a basic on/off entity with an added toggle icon on the right side of the card
rain gyro
Ultimately, you just want a card like I posted above, but then a toggle switch on the other side. Right? I think I can help with that. I wrote up a solution a while back ago. #1140425401139724448 message
Lemme see if I can throw something together that is a bit more like what you're looking for.
rain gyro
Here's what I did. I took your original code and made a couple of modifications. I adjusted the layout for the elements a bit. I turned your toggle custom_field into another custom:button-card and stylized it as a toggle button. I removed the state custom_field, enabled the card's state field, moved the state custom_field's styling into the card's state styling. (It was extreanous since the card is capable of showing the same time. If you want customized values (like "It's on" instead of "On", you can use ```yaml
state_display: |
[[[
return entity.state == "on" ? "It's on" : "It's off";
]]]
type: custom:button-card
entity: light.living_room_lights
name: Garage
show_icon: true
show_state: true
icon: phu:light-string
tap_action:
action: toggle
state:
- value: "off"
styles:
card:
- background: "#23252b"
icon:
- color: white
name:
- color: white
custom_fields:
state:
- color: white
- value: "on"
styles:
card:
- background: "#2C2F36"
icon:
- color: "#858aa0"
name:
- color: white
custom_fields:
state:
- color: white
styles:
grid:
- grid-template-areas: |
"i n toggle"
"i s toggle"
- grid-template-columns: 15% 1fr
- grid-template-rows: min-content min-content
card:
- padding: 10px 15px
- height: 75px
name:
- justify-self: start
- font-size: 14px
- color: "#848AA2"
- opacity: "0.7"
- padding: 0
icon:
- width: 24px
- color: "#848AA2"
img_cell:
- justify-self: start
- width: 24px
- height: 24px
state:
- justify-self: start
- font-size: 16px
- font-weight: 500
- margin-top: 0
- padding: 0
custom_fields:
toggle:
card:
type: custom:button-card
entity: input_boolean.tester
show_name: false
state:
- icon: mdi:toggle-switch
value: "on"
color: green
- icon: mdi:toggle-switch-off
value: "off"
color: red
size: 50px
tap_action:
action: toggle
styles:
card:
- height: 50px
- width: 50px
- background-color: transparent
- border: none
- box-shadow: none
