I don’t have time to strip it out of my config and post it, but you’re welcome to dig into it yourself.
search my github ui-lovelace.yaml file for BASEMENT LIGHTS and take a look at the code. It uses anchors so you’ll have to walk backwards and find each anchors definition. Anchors start with a <<: *anchor_name. Just search upwards the anchor_name
Thanks @petro for the link to your .yaml file.
any tip why glow effect disappears when i go between pages?
I need help to get “show last changed” in “off” state. Only in On state right now.
Thanks,
button_slider: &button_slider
type: custom:button-card
label: >
[[[
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
]]]
color: auto-no-temperature
size: 30%
aspect_ratio: 1/1
show_last_changed: true
# show_state: true
# show_label: true
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: success
styles:
state_label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
card:
- border-radius: 15px
- background-color: 'var(--paper-card-background-color)'
- padding-left: 5px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
label:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-align: start
- padding-right: 45px # push to the state column
state:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "stateDisplay" "l"' #'"i" "slider" "n" "stateDisplay" "l"' #'"i" "n" "stateDisplay"' # '"i" "slider" "n" "stateDisplay"' #'"i" "n" "s" "l"'
# - grid-template-areas: '"i" "n" "stateDisplay" "l"' #'"i" "slider" "n" "stateDisplay" "l"' #'"i" "n" "stateDisplay"' # '"i" "slider" "n" "stateDisplay"' #'"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
# - grid-row-gap: 5px
img_cell:
- justify-content: start
- align-items: start
custom_fields:
slider:
- filter: opacity(80%)
- color: rgb(240, 194, 9)
- padding-left: 0px
state:
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
return fakestate +' ' + fakelabel;]]]
styles:
card:
# - color: white #'#F0C209'
# - --paper-card-background-color: rgba(40, 40, 40)
- box-shadow: 0px 0px 10px 3px var(--button-card-light-color)
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
id: on-icon
- value: 'off'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
label:
- color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
state:
- color: grey
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: grey
id: off-icon
- value: 'unavailable'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
card:
- opacity: 0.8
- color: '#D3D3D3'
icon:
- color: '#D3D3D3'
label:
- color: rgba(0, 0, 0, 0.0)
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: '#D3D3D3'
Mind sharing your code for the buttons at the top please?
You smoking something? It’s in his post…
Change your style for value: ‘off’'s label from:
label:
- color: rgba(0, 0, 0, 0.0)
to
label:
- color: grey
show_last_changed appears in your label field. When you give it an RGBA of 0.0 (r), 0.0 (g), 0.0 (b), 0.0 (a) you’re telling it to make it transparent. R = red, G = green, B = blue, A = alpha. 100% alpha = you can see it. 0.0% alpha = you can’t see it.
Got it, really appreciate your explanation.
the code should be in anchors, then in your card
- title: Light
icon: mdi:lightbulb-outline
panel: false
path: light
cards:
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- <<: *button_slider
entity: light.kitchen
- <<: *button_slider
entity: light.dining_room
- <<: *button_slider
entity: light.bathroom_2
- <<: *button_slider
entity: light.basement
found the fix which needs adding items to value: ‘closed’, ‘closing’ and ‘open’, ‘opening’ beside ‘on’ and ‘off’
do you know why light switch and cover did not work?
Thanks,
state:
- value: 'on'
icon: >
[[[
if (entity.attributes.device_class == 'light')
return 'mdi:lightbulb';
if (entity.attributes.device_class == 'switch')
return 'mdi:lightbulb';
if (entity.attributes.device_class == 'motion')
return 'mdi:run';
if (entity.attributes.device_class == 'door')
return 'mdi:door-open';
if (entity.attributes.device_class == 'window')
return 'mdi:window-open';
if (entity.attributes.device_class == 'cover')
return 'mdi:garage-open-variant';
]]]
id: on-icon
- value: 'off'
icon: >
[[[
if (entity.attributes.device_class == 'light')
return 'mdi:lightbulb-outline';
if (entity.attributes.device_class == 'switch')
return 'mdi:lightbulb-outline';
if (entity.attributes.device_class == 'motion')
return 'mdi:walk';
if (entity.attributes.device_class == 'door')
return 'mdi:door-closed';
if (entity.attributes.device_class == 'window')
return 'mdi:window-closed';
if (entity.attributes.device_class == 'cover')
return 'mdi:garage-variant';
]]]
Can’t anyone help me with my config please?
This config results in nothing displayed correctly…
Note ‘bedside lamp’ at the bottom, there should be 2 cards…
- type: horizontal-stack
cards:
- type: light
entity: light.lounge_light
name: Lounge Light
- type: light
entity: light.lounge_lamp
name: Lounge Lamp
- type: light
entity: light.bridge
name: Bookshelf
- type: light
entity: light.kitchen_cupboard_lights
- type: horizontal-stack
cards:
- type: light
entity: light.landing_light
name: Top Landing Light
- type: light
entity: light.bottom_landing_light
name: Bottom Landing Light
- type: vertical-stack
cards:
- type: custom:button-card
entity: light.landing_light
color: auto
name: Landing Light
icon: mdi:lamp
label: >
[[[
return states['light.landing_light''].state;
]]]
show_label: true
hold_action:
action: more-info
styles:
card:
- height: auto
- type: custom:button-card
entity: switch.bedside_lamp_relay
color: auto
name: Bedside Lamp
icon: mdi:lamp
label: >
[[[
return states['switch.bedside_lamp_relay'].state;
]]]
show_label: false
hold_action:
action: more-info
styles:
card:
- height: auto
What’s not working about it?
Only difference I see between the hidden one and the visible one is that the hidden one has ‘show_label’: false.
No, that hasn’t help 
you sure that light.landing_light is correct?
Yep. You’ll have to excuse my naming logic…
I got it working, the garage icon did not display garage door icon because value should have ‘closed’, ‘closing’ and ‘open’, ‘opening’ so I add those conditions to value.
You must have a fancy garage door. I have a binary_sensor and it would have worked in your card if you added device_class: garage
Just as a test I pasted the stack into a separate view and still see the problem
Paste the single card that’s not visible outside the vertical stack. See if that works. Most likely it doesn’t It’s probably your label template.
Actually, i see the problem now.
label: >
[[[
return states['light.landing_light''].state;
^
|
Extra Quote, remove
]]]
Good spot. Knew it would be something daft!
Now the buttons are very small though…no icon being shown?
It’s just wifi liftmaster garage door opener.
I did change device_class: garage, thanks.