I have, in my case, simply used the default person entity instead of a custom person sensor. I did not see any added value in the use of a custom person sensor. So it now simply uses the image of the peron entities:
homeassistant/lovelace.yaml at main · CM000n/homeassistant (github.com)
I did that and nothing
I have a card with name and state battery and geolocation but not in your style
I will give that a try, thanks.
I am also finding when navigating to the dashboard, it automatically takes it to a sub-view instead of the main view and you cannot navigate back to it. Dunno what I did there haha.
Did you changed the navigation path of the default_view? Than you have to change the navigation paths for the exit “x” buttons on the sub views also accordingly.
Yep I did and updated all paths, however it just takes me to /lovelace instead of /lovelace/home (which is what I set the home page URL to)
you must be use this: /lovelace/1 or the number that you want to go.
My only other issue is the media player, most of the time the buttons do not appear…
do you mind sharing your script.yaml as well?
How can we change the color of the icons in the persons card??? Icons are blue and don’t see them good because of blue background. Want the icons in white
Can you build any of this using the Lovelace UI or did you do it all via yaml?
You can start off doing it that way, but all the CSS mods you will have to do via YAML
I did it exclusively in the UI, but mainly in YAML mode.
Nice. I’ll have to play around with it.
this looks great! going to give it a try - with your design background, have you thought about multi-room audio? Not figured out a good way to use Sonos across the various devices yet
Same problem:
Bonjour Cloos,
Est ce que tu pourrait adapter la carte météo et atomic calendar et mettre que le calendrier à la place dans cette petite carte?
J’ai essayer mais ca ne va pas chez moi
Merci d avance
Please rewrite your post. This is an english speaking forum 
Simon,
i saw that the person that made the dashboard speaks French and i could better ask my question in French
Yes I understand that. But this does not correspond to the convention here and thereby you exclude all others from the discussion who do not know French. We do not want Babylonian conditions here
Hey guys, sorry for bothering you but I have kind of a problem with readapting this for myself. First of all the YAML kinda scares me so I am currently just cherry picking stuff from here but even with almost everything coppied I am running into issues regarding sizes and overlaying/colors.
views:
- theme: noctis
title: NewMain
path: newmainewmain
type: sidebar
badges: []
cards:
- type: custom:mini-graph-card
entities:
- entity: sensor.avg_temp
color: var(--accent-color)
hours_to_show: 24
hour24: true
animate: true
update_interval: 30
aggregate_func: avg
line_width: 1
bar_spacing: 10
height: 70
group: true
show:
labels: false
fill: false
state: false
name: false
icon: false
style: |
ha-card {
box-shadow: none;
background: none;
border-radius: 0;
margin-bottom: -90px;
opacity: 0.3;
margin-left: -0.6em;
margin-right: -0.6em;
}
- type: custom:paper-buttons-row
styles:
justify-content: space-between
background: none
margin: 34px 20px 8px
buttons:
- name: '{{ now().strftime(''%H'') }}:{{ now().strftime(''%M'')}}'
styles:
name:
font-weight: 300
font-size: 40px
letter-spacing: '-1px'
margin-left: 2px
position: relative
left: '-10px'
button:
pointer-events: none
- layout: name_state
name: '{{ states(''sensor.nameday_cz'') }}'
state: '{{ now().strftime(''%A'') }}'
styles:
button:
width: 200px
height: 32px
pointer-events: none
position: relative
name:
position: absolute
left: '-10px'
top: 0
font-weight: 400
white-space: nowrap
state:
position: absolute
left: '-10px'
bottom: 0
font-weight: 600
white-space: nowrap
- name: '{{ state_attr(''weather.openweathermap'',''temperature'') }}°C'
icon: mdi:thermometer
layout: icon|name
styles:
name:
font-size: 18px
margin-left: '-2px'
button:
pointer-events: none
- name: '{{ states(''sensor.avg_temp'') }}°C'
icon: mdi:home-thermometer
layout: icon|name
styles:
name:
font-size: 18px
margin-left: 2px
button:
pointer-events: none
margin-right: '-6px'
style: |
ha-card {
background: none !important;
margin: 15px 20px;
border-radius: 26px;
}
ha-card:before {
content: '';
display: block;
background: var( --ha-card-background, var(--card-background-color, white) );
position: absolute;
right: 0;
width: 76%;
height: 54px;
border-radius: 26px;
}
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: grid
square: true
columns: 2
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:weather-card
entity: weather.openweathermap
icons: /local/icons/weather_icons/animated/
number_of_forecasts: '3'
current: false
details: false
style: |
ha-card {
#margin: 12% 0 2% !important;
background: rgba(0,0,0,0);
box-shadow: none;
padding: 0 !important;
font-size: 12px;
}
div.precipitation {
display: none;
}
div.precipitation_probability {
display: none;
}
i.icon {
transform: scale(0.17);
transform-origin: 0 19.5%;
margin-left: -1.4em !important;
position: absolute;
top: -18px;
#right: 0;
padding: 0;
#background-size: 75% !important;
height: 240% !important;
width: 240% !important;
}
.dayname:after {
content:'';
height: 3.4em;
width: 3.5em;
display: block;
margin-top: -20px;
}
.dayname {
margin-top: -6px
}
div.day {
border-right: 0.06em solid rgb(26,137,245,0.3);
}
div.lowTemp {
margin-top: -10px;
}
forecast: true
hourly_forecast: true
style: |
ha-card {
box-shadow: none;
height: 100% !important;
padding: 12% 7%;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:atomic-calendar-revive
entities:
- entity: calendar.ceske_statni_svatky
name: Svatky
color: white
max_results: 12
icon: mdi:calendar
- entity: calendar.okylisterhome_gmail_com
name: Spolecne
color: white
icon: mdi:calendar
firstDayOfWeek: 1
refreshInterval: 60
style: |
ha-card {
#margin: 12% 0 2% !important;
background: rgba(0,0,0,0);
box-shadow: none;
padding: 0 !important;
font-size: 12px;
}
ha-card > div > table > tbody > tr.daywrap {
border-top: none;
}
ha-card > div > table > tbody {
padding: 0px !important;
}
ha-card > div > table {
margin-top: -10px !important;
animation: scroll 15s ease infinite;
}
ha-card > div > table > tbody > tr > td {
padding-bottom: 20px !important;
padding-top: 2px !important;
}
ha-card > div {
padding-top: 0.3em !important;
margin: 0 !important;
}
div.event-main {
width: 100% !important;
#white-space: nowrap !important;
#overflow: visible !important;
text-overflow: ellipsis !important;
height: 3em !important;
}
ha-card > div > table > tbody {
font-size: 13px;
line-height: 18px;
}
div.relativeTime {
display: none;
}
@keyframes scroll {
0% { opacity: 0; transform: translateY(0); }
3% { opacity: 1; transform: translateY(0); }
20% { opacity: 1; transform: translateY(0); }
23% { opacity: 0; transform: translateY(0); }
26% { transform: translateY(calc(-25%)); opacity: 0;}
29% { transform: translateY(calc(-25%)); opacity: 1;}
46% { transform: translateY(calc(-25%)); opacity: 1;}
49% { transform: translateY(calc(-25%)); opacity: 0;}
52% { transform: translateY(calc(-50%)); opacity: 0;}
55% { transform: translateY(calc(-50%)); opacity: 1;}
72% { transform: translateY(calc(-50%)); opacity: 1;}
75% { transform: translateY(calc(-50%)); opacity: 0;}
78% { transform: translateY(calc(-75%)); opacity: 0;}
81% { transform: translateY(calc(-75%)); opacity: 1;}
97% { transform: translateY(calc(-75%)); opacity: 1;}
100% { transform: translateY(calc(-75%)); opacity: 0;}
}
showDate: false
hideDuplicates: false
hideFinishedEvents: true
showCurrentEventLine: false
showProgressBar: false
showMonth: true
showWeekDay: false
showDescription: false
disableEventLink: true
showFullDayProgress: false
showEventIcon: false
showHiddenText: false
showCalendarName: false
showWeekNumber: false
calShowDescription: false
showLastCalendarWeek: false
dimFinishedEvents: true
disableCalLink: true
disableCalLocationLink: true
disableCalEventLink: truemaxEventCount
noEventsForNextDaysText: Neni nic naplanovano
showLoader: false
maxEventCount: 4
cardHeight: 210px
maxDaysToShow: 90
style: |
ha-card {
height: 100% !important;
width: 100% !important;
}
style: |
ha-card {
margin: 14px 20px !important;
background: none;
}
.type-custom-vertical-stack-in-card {
overflow: visible !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: grid
square: true
columns: 2
cards:
- type: entities
show_header_toggle: false
style: |
* {
padding: 0px;
}
h1.card-header {
padding: 10px;
margin-top: -4px
}
#states {
padding: 10px;
}
ha-card {
{% if is_state('sensor.roborock_s5e_a930_status','Uklízí') %}
background: radial-gradient(at bottom, rgba(255,255,255, 0.26) 0%, rgba(43,55,78,0) 70%);
background-size: 140% 70%;
background-repeat: no-repeat;
background-position: 50% 100%;
background-color: #3e4c69;
transition: background 1.5s, background-position 2s, background-color 1.5s;
transition-delay: 0.6s;
{% else %}
transition: background 1.5s;
transition-delay: 0.2s;
background-color: var( --ha-card-background, var(--card-background-color, white) );
background-size: 140% 70%;
background-position: 50% 360%;
{% endif %}
}
entities:
- entity: vacuum.roborock_s5e_a930_robot_cleaner
state_color: false
icon: mdi:robot-mower-outline
name: >-
{{ states("sensor.roborock_s5e_a930_battery_level")
}}
style: |
hui-generic-entity-row {
margin-bottom: 14px;
margin-top: -2px;
padding-right: 0.6em;
}
hui-generic-entity-row > div {
width: max-content !important;
}
- type: section
label: Robot
style: |
div.divider {
display: none;
}
div.label {
margin-top: -12px;
margin-bottom: 10px;
font-size: 17px;
font-weight: 600
}
- entity: vacuum.roborock_s5e_a930_robot_cleaner
type: custom:multiple-entity-row
icon: mdi:battery
attribute: battery_level
name: Battery
unit: '%'
style:
hui-generic-entity-row$: |
div {
display: none !important;
}
.: |
hui-generic-entity-row {
position: absolute !important;
top: -14px !important;
margin-left: -7px !important;
transform: scale(0.9, 0.9);
}
footer:
type: custom:paper-buttons-row
styles:
justify-content: space-between;
padding: 8px;
width: auto;
margin-top: '-6px;'
margin-bottom: 0px;
filter: drop-shadow(0px 2px 2px rgba(0,0,0,0.5));
buttons:
- name: false
icon: mdi:play
tap_action:
action: call-service
service: vacuum.start
target:
entity_id: vacuum.herbicat
- name: false
icon: mdi:pause
tap_action:
action: call-service
service: vacuum.pause
target:
entity_id: vacuum.herbicat
- name: false
icon: mdi:home-map-marker
tap_action:
action: call-service
service: vacuum.vacuum.return_to_base
target:
entity_id: vacuum.herbicat
style: |
ha-card {
margin: 14px 20px !important;
background: none;
box-shadow: none;
}
#states > :last-child {
z-index: 10;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:slider-button-card
entity: light.bulb_lamp_m
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: false
tap_action:
action: more-info
icon: mdi:home-lightbulb
action_button:
show: false
style: |
:host {
font-weight: 600;
}
div.icon {
margin: 4px;
font-size: 10px;
}
- type: custom:paper-buttons-row
styles:
position: absolute;
top: 0;
right: 0;
buttons:
- icon: mdi:plus
tap_action:
action: navigate
navigation_path: livingroom
styles:
icon:
'--mdc-icon-size': 34px
margin: 1px
style: |
ha-card {
margin: 14px 20px !important;
background: none;
border-radius: 26px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:slider-button-card
entity: light.bulb_bed_d
slider:
direction: left-right
background: gradient
use_state_color: true
use_percentage_bg_opacity: true
show_track: false
toggle_on_click: false
force_square: false
show_name: true
show_state: false
compact: true
icon:
show: true
use_state_color: false
tap_action:
action: more-info
icon: mdi:sofa
action_button:
mode: toggle
icon: mdi:power
show: false
show_spinner: true
tap_action:
action: toggle
style: |
:host {
font-weight: 600;
}
div.icon {
margin: 4px;
font-size: 10px;
}
- type: custom:paper-buttons-row
styles:
position: absolute;
top: 0;
right: 0;
buttons:
- icon: mdi:plus
tap_action:
action: navigate
navigation_path: bedroom
styles:
icon:
'--mdc-icon-size': 34px
margin: 1px
style: |
ha-card {
margin: 14px 20px !important;
background: none;
box-shadow: none;
border-radius: 26px;
}
ha-card:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
outline-right: 10px solid blue !important;
box-shadow: inset -1px 0px 0px 0px var(--ha-card-background) !important;
z-index: 1;
pointer-events: none;
border-radius: 26px;
}
- type: custom:mushroom-vacuum-card
commands:
- on_off
- start_pause
- stop
- locate
- clean_spot
- return_home
icon_animation: true
fill_container: false
layout: horizontal
entity: vacuum.roborock_s5e_a930_robot_cleaner
name: Robot
hold_action:
action: more-info