What calendar card are you using?
Fantastic work!
Would you mind telling me how you got the weather to appear like that?
@ASNNetworks I love that card, and it is just a core picture elements right? Would you be so kind to share this?
hello, can you send me please file empty_frame.png.
then could you explain to me how to create that avatar?
what size should it have?
thank you
Please let us see your config, you have so many cool things postet , let us see all together 
1 Like
Unfortunately I am extremely busy having two jobs and my configuration is split into 40+ different files and locations. But I do want to share a proper write up of this media player with detailed explanation. I am on holidays this week, so I’ll try to do that end of this week!
@jimz011 tagging you as well I saw your message this thread, I’ll update you when I have the write up!
I’ll create a new thread with the write up.
1 Like
I did it like this.
aspect_ratio: '4'
elements:
- card_type: weather-forecast
entity: weather.eindhoven
secondary_info_attribute: humidity
style: |
ha-card {
background: purple;
font-family: Days One;
font-size: 20px;
height: 400px;
left: 250px;
text-shadow: 2px 2px 2px black;
top: 0px;
width: 490px;
}
type: 'custom:hui-element'
image: 'http://192.168.0.117:8123/local/back.png'
type: picture-elements
1 Like
Just started with HA and this is what i have so far. But guess i have to make some changes as custom header won’t work in the future.
5 Likes
please can you sendme back.png file?
For a first timer a helluva good-looking setup. Goed gedaan man. Share? 
!Dank je! At this piont it’s not finished yet and i have to make some big changes because CH won’t work in the future. So at this point i wanna have a look in which direction i will go. Will update when i have made progression
I can’t download
Here is a configuration to set the time of an automation :
Disabling the alarm clock prevents editing of the configuration.
The change of color and icon is done thanks to the customize part.
Rest assured the colors will match your theme 
This card uses:
- card-mod : https://github.com/thomasloven/lovelace-card-mod
- time-picker-card : https://github.com/GeorgeSG/lovelace-time-picker-card
- button-card: https://github.com/custom-cards/button-card
- custom-ui: https://github.com/Mariusthvdb/custom-ui
- a transparent image : --> here |
| <-- here
Card code
elements:
- entity: sensor.vide
prefix: Réveil 1
style:
color: var(--primary-color)
font-size: 20px
font-variant: small-caps
left: 13%
pointer-events: none
top: 70%
tap_action:
action: none
type: state-label
- entity: input_boolean.wakestatus_1
style:
'--paper-item-icon-color': var(--primary-color)
left: 13%
top: 35%
tap_action:
action: toggle
type: state-icon
- entity: input_datetime.wake_time_1
hide:
name: true
hour_step: 1
layout:
align_controls: center
name: inside
link_values: true
minute_step: 1
name: ''
style:
.: |
ha-card {
box-shadow: none;
background-color: rgba(0,0,0,0);
opacity: {% if is_state('input_boolean.wakestatus_1', 'off') %} 0.3 {% endif %};
pointer-events: {% if is_state('input_boolean.wakestatus_1', 'off') %} none {% endif %};
}
.time-picker-row{
margin-left: 5px !important;
}
.time-picker-row:
.time-picker-content:
.: |
.time-separator {
display: none;
}
time-unit:
$: |
.time-unit {
padding: 2px !important;
}
.time-input {
border: 2px solid var(--primary-color) !important;
background-color: rgba(0,0,0,0) !important;
color: black !important;
border-radius: 5px;
}
.time-picker-icon {
color: var(--primary-color) !important;
z-index: 100;
}
left: 45%
top: 50%
type: 'custom:time-picker-card'
- entity: input_boolean.wakeweekday_mon_1
icon: 'mdi:alpha-l-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_tue_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 20%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_wed_1
icon: 'mdi:alpha-m-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 22%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_thu_1
icon: 'mdi:alpha-j-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 12%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_fri_1
icon: 'mdi:alpha-v-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 2%
top: 50%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sat_1
icon: 'mdi:alpha-s-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 17%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
- entity: input_boolean.wakeweekday_sun_1
icon: 'mdi:alpha-d-circle'
show_label: false
show_name: false
show_state: false
style:
'--paper-item-icon-color': var(--primary-color)
right: 7%
top: 80%
styles:
card:
- width: 35px
- height: 35px
- border-radius: 999px
- background-color: 'rgba(0, 0, 0, 0)'
- box-shadow: none
- opacity: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return '0.3';
else return '1';
]]]
- pointer-events: |
[[[
if ( (states['input_boolean.wakestatus_1'].state == 'off') ) return 'none';
else return 'auto';
]]]
icon:
- transform: scale(2.1)
type: 'custom:button-card'
image: /local/images/transparent/transparent.png
type: picture-elements
Entities code
#Input_booleans
input_boolean:
wakestatus_1:
name: Alarm 1
icon: mdi:alarm
wakeweekday_sun_1:
name: Sunday
icon: mdi:calendar
wakeweekday_mon_1:
name: Monday
icon: mdi:calendar
wakeweekday_tue_1:
name: Tuesday
icon: mdi:calendar
wakeweekday_wed_1:
name: Wednesday
icon: mdi:calendar
wakeweekday_thu_1:
name: Thursday
icon: mdi:calendar
wakeweekday_fri_1:
name: Friday
icon: mdi:calendar
wakeweekday_sat_1:
name: Saturday
icon: mdi:calendar
#Input_datetime
input_datetime:
wake_time_1:
name: wake_time_1
has_date: false
has_time: true
#Sensors
sensor:
- platform: template
sensors:
vide:
value_template: ""
automation:
- id: 'wake_1_detect_time'
alias: Wake 1
trigger:
platform: template
value_template: "{{states('sensor.time') == (state_attr('input_datetime.wake_time_1','timestamp') | int | timestamp_custom('%H:%M', False))}}"
condition:
condition: template
value_template: >
{% set today = 'input_boolean.wakeweekday_' ~ now().strftime("%a") | lower ~ '_1' %}
{{ is_state('input_boolean.wakestatus_1', 'on') and is_state(today, 'on') }}
action:
homeassistant:
customize:
input_boolean.wakestatus_1:
templates:
icon_color: if (state === 'on') return 'green'; else return 'red';
icon: if (state === 'on') return 'mdi:alarm-check'; else return 'mdi:alarm-off';
3 Likes
How did you 1 background for - sidebar and other part
It’s just a Picture Elements card with my floorplan as image. On top i have the custom:sidebar-card and some other cards. I also use Custom Header to hide the top header, but that function will break with the next update.
Buth how you have same image underneath side bar, whole background looks like one background
The background is just the background as it is in the theme. On top i have the Picture Elements card, in the tab in the header make sure panelmodus is selected. So the card spread over the whole screen. The image i use in de Picture Elements card is my floorplan.png, so with transparacy around the ‘house’.
In the Picture elements card i also placed the Sidebar-card, with the background set to transparant.