The buttons on the left are png images. They’re included in Luke’s config on GitHub and you can edit them yourself with any image editor you’re comfortable with.
For the text of the weather: may be theme related. Do you use the same theme on your different devices?
Thanks for your reply. Indeed my theme was the culprit here. But do you by any chance know the font used in the buttons? I did find the buttons of course but changing them to what I need is another story 
’
I’m not 100% sure, but I think the font is Roboto.
Thanks, created something that more or less looks the same.
Hi all,
I have this setup in my sensor.yaml:
day:
value_template: >
{% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
{{ days[now().weekday()] }}
month:
value_template: >
{% set months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
{{ months[now().month-1] }}
date_string:
friendly_name: "Full Date"
value_template: "{{ states('sensor.day') }}, {{ states('sensor.month') }} {{ now().year }}"
And in my ui-lovelace.yaml I have this:
- entity: sensor.time
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.7)'
font-size: 5.41vw
font-weight: 200
left: 2.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 10%
tap_action:
action: none
type: state-label
- entity: sensor.date_string
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.3)'
font-size: 1.3vw
font-weight: 300
left: 18.1%
letter-spacing: '-0.05vw'
text-align: left
top: 17%
width: 30%
tap_action:
action: none
type: state-label
But when opening my dashboard I see the date number in front of the actual day:
How can I get rid of that?
Try:
day:
value_template: >
{% set days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] %}
{{ days[now().weekday()] }}
{{ strptime(states('sensor.date'), '%Y-%m-%d').day }}
month:
value_template: >
{% set months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] %}
{{ months[now().month-1] }}
date_string:
friendly_name: "Full Date"
value_template: "{{ states('sensor.day') }}, {{ states('sensor.month') }} {{ now().year }}"
Hi all,
Hope that somebody maybe can help me with this weird time problem I got.
Everytime that the time changes it shows weird on my screen, but when I refresh the screen the problem is gone for 1 minute ;).
Below the code that i use:
- entity: sensor.time
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.7)'
font-size: 7.0vw
font-weight: 400
left: 1.7%
letter-spacing: '-0.05vw'
max-width: 1px
top: 10%
tap_action:
action: none
type: state-label
- entity: sensor.date_string
hold_action:
action: none
style:
color: 'rgba(255, 255, 255, 0.3)'
font-size: 1.7vw
font-weight: 400
left: 16.1%
letter-spacing: '-0.05vw'
text-align: left
top: 19%
width: 30%
tap_action:
action: none
type: state-label
Many thanks in advance!
Thanks, for that. I had to reorder some things and changed it completely in the end to:
- platform: template
sensors:
dayoftheweek:
entity_id: sensor.date
value_template: "{{ now().strftime('%A') }}"
month:
entity_id: sensor.date
value_template: "{{ now().strftime('%B') }}"
dateofthemonth:
entity_id: sensor.date
value_template: >
{% set suffix = ['st', 'nd', 'rd'] %}
{% set day = now().day %}
{% set index = 3 if day // 10 == 1 or day % 10 == 0 else (day % 10) - 1 %}
{{ day~'th' if index > 2 else day~suffix[index] }}
## Converts time and date into sentence for UI
date_string:
friendly_name: "Full Date"
value_template: "{{ states('sensor.dayoftheweek') }}, {{ states('sensor.dateofthemonth') }} of {{ states('sensor.month') }} {{ now().year }}"
Which looks great and exactly how I want it to look, but now for some strange reason my first main Lovelace view won’t auto-refresh anymore.
Time stands still and other elements don’t update. When I hit refresh in my browser the entities show correct values and the time jumps to the correct time, but only for that moment. All updates in that page fail then to show again until the next manual refresh.
All other Lovelace pages work fine (same date/time formats and sidebar settings used).
Any idea someone?
Responding to my own question… Finally figured it out…
I have this piece of code in my sensor.yaml to create (for me) a nicer representation of day and date:
- platform: template
sensors:
dayoftheweek:
value_template: "{{ now().strftime('%A') }}"
month:
value_template: "{{ now().strftime('%B') }}"
dateofthemonth:
value_template: >
{% set suffix = ['st', 'nd', 'rd'] %}
{% set day = now().day %}
{% set index = 3 if day // 10 == 1 or day % 10 == 0 else (day % 10) - 1 %}
{{ day~'th' if index > 2 else day~suffix[index] }}
## Converts time and date into sentence for UI
date_string:
friendly_name: "Full Date"
value_template: "{{ states('sensor.dayoftheweek') }}, {{ states('sensor.dateofthemonth') }} of {{ states('sensor.month') }} {{ now().year }}"
And in ui-lovelace.yaml in the Floorplan you have to add sensor.time and sensor.date_string to the entitities used in the custom config-template-card:
- title: Control Rooms
panel: true
icon: "mdi:floor-plan"
badges: []
cards:
- type: "custom:config-template-card"
entities:
### All the light entities I'm using
- light.keuken
- light.woonkamer
- light.gang
- light.muur_keuken
- light.kasten_keuken
- light.aanrecht
- light.buiten
- light.voordeur
- light.erker
- light.schuifdeuren
- light.erker_bank
- light.overkapping_rechts
- light.tuin_zijkant
- sun.sun
- sensor.time
- sensor.date_string
- sensor.christmas_time
- switch.plug_versterker_aangezet
This made everything work and update for me again. 
This weather overlay looks great, but I can’t seem to get it to work. Right now with us the weather condition states ‘pouring’ and when I refresh my lovelace UI it shows some drops very shortly and immediately after it shows the ‘normal’ floorplan again.
I’ve copied over your code like this in the way it’s in your yaml:
######################### WEATHER ANIMATIONS #########################
- action: none
entity: weather.buienweather
hold_action:
action: none
image: /local/ui/weather/rainstorm.gif
state_filter:
'pouring': opacity(100%)
style:
left: 70%
mix-blend-mode: color-dodge
top: 85%
width: 55%
opacity: 0
tap_action:
action: none
type: image
######################### Inside overlays for weather #########################
- action: none
hold_action:
action: none
image: /local/ui/floorplan/night.png
style:
height: 100%
left: 50%
top: 50%
width: 100%
tap_action:
action: none
type: image
- action: none
entity: sun.sun
hold_action:
action: none
state_image:
above_horizon: /local/ui/floorplan/day.png
below_horizon: /local/ui/floorplan/transparent.png
style:
height: 100%
left: 50%
mix-blend-mode: lighten
opacity: '${ states[''sensor.sunlight_opacity''].state }'
top: 50%
width: 100%
tap_action:
action: none
type: image
Anyone knows how to fix this and show my liquid sunshine?
I created my floorplan and I have home assistant running but I’m stuck and unsure how to replace the default lovelace UI to this.
Can someone point me in the right direction? Where exactly do I place the files from github? I understand that I need to change the config to my own but I am at a loss and unsure how to even get there.
Hey, I’ve the same issue. Did you find a way to resolve it? Thanks 
Hey, what exactly do you mean? I posted the solution to my issue and you’re replying to that 
Oh sorry, I thought I commented on @Floep1984 post…
I’ve the same graphical issue on the time displayed…
No sorry, I have still now luck with finding a solution, it’s more that after a little time it seems to be going fine.
what theme do you use? it is such a nice theme.
hello
when i use following code for button template, i get this:
hold_action_template1:
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
show_header_toggle: false
entities:
- entity: >
[[[ return entity.entity_id ]]]
secondary_info: last-changed
- type: 'custom:light-entity-card'
entity: light.wled_tv_top_shelf
brightness: false
color_temp: false
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
style: |
ha-card {
box-shadow: none;
margin-bottom: -1em;
}
- type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
icon: none
fullscreen: false
brightnessWidth: 90px
brightnessHeight: 250px
borderRadius: 1.8em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
style: |
#popup > div.action-holder > div > div > span {
background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
}
#popup > div.action-holder > div > div {
margin: 0.2em 0 0 0;
}
#brightnessValue {
color: rgba(255, 255, 255, 0.7);
margin: -0.8em 0 0.7em 0;
font-size: 1.9em;
font-weight: 400;
font-family: SF Display;
letter-spacing: 0.04em;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
#popup {
margin: 0 0 0.8em 0;
}
#popup > div.range-holder > input[type=range]::-webkit-slider-thumb {
border: 0;
height: 0;
width: 0;
cursor: pointer;
}
deviceID:
- this
style:
'--ha-card-border-radius': 0 0 0.8em 0.8em
border-radius: 0.8em
opacity: 0.9
title: >
[[[ return entity.attributes.friendly_name ]]]
i want the color wheel and brightness bar as horizontal stack, i changed the code and get this:
hold_action_template1:
hold_action:
action: call-service
service: browser_mod.popup
service_data:
card:
type: custom:vertical-stack-in-card
cards:
- type: entities
show_header_toggle: false
entities:
- entity: >
[[[ return entity.entity_id ]]]
secondary_info: last-changed
- type: horizontal-stack
cards:
- type: 'custom:light-entity-card'
entity: light.wled_tv_top_shelf
brightness: false
color_temp: false
full_width_sliders: true
hide_header: true
show_slider_percent: true
smooth_color_wheel: true
style: |
ha-card {
box-shadow: none;
margin-bottom: -1em;
}
- type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
icon: none
fullscreen: false
brightnessWidth: 90px
brightnessHeight: 250px
borderRadius: 1.8em
sliderColor: '#c7c7c7'
sliderTrackColor: rgba(25, 25, 25, 0.9)
style: |
#popup > div.action-holder > div > div > span {
background: radial-gradient(circle at 50% 0, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
radial-gradient(circle at 6.7% 75%, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
radial-gradient(circle at 93.3% 75%, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%) beige;
}
#popup > div.action-holder > div > div {
margin: 0.2em 0 0 0;
}
#brightnessValue {
color: rgba(255, 255, 255, 0.7);
margin: -0.8em 0 0.7em 0;
font-size: 1.9em;
font-weight: 400;
font-family: SF Display;
letter-spacing: 0.04em;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
#popup {
margin: 0 0 0.8em 0;
}
#popup > div.range-holder > input[type=range]::-webkit-slider-thumb {
border: 0;
height: 0;
width: 0;
cursor: pointer;
}
deviceID:
- this
style:
'--ha-card-border-radius': 0 0 0.8em 0.8em
border-radius: 0.8em
opacity: 0.9
title: >
[[[ return entity.attributes.friendly_name ]]]
what i dont like here, the fonts for brightness slider and background is changed. can any one help me what to change here?
Can you share your config for gauges if you are still using this?
I’m having issues with changing the color on the image itself (the state icon is changing but that’s it).
my “light on” image remains the default color (yellow) as I exported from the render app.
Am I missing something?
####################################--------Loft Lamp (TESTTTTTTT)--------####################################
- type: image
# - action: none
tap_action:
action: none
# hold_action:
# action: none
entity: light.nightstand_left
image: /local/floorplan/images/second_floor/loft_lamp_on.png
# state_filter:
# "off": opacity(1%)
# "on": opacity(100%)
style:
filter: >-
${ "hue-rotate(" + (states['light.nightstand_left'].attributes.hs_color ?
states['light.nightstand_left'].attributes.hs_color[0] : 0) + "deg)"}
mix-blend-mode: lighten
opacity: "${states['light.nightstand_left'].state === 'on' ? (states['light.nightstand_left'].attributes.brightness / 255) : '0'}"
top: 50%
left: 50%
width: 100%