Hi @LE0N,
Thank you for this beautiful dashboard!
I’m trying to setup the Robot vacuum screen, and currently I’m struggling with 6 zone cards, namely with the button label value of: '[[[return states["sensor.robotstofzuiger_laatst_actief_woonkamer"].state ]]]'
If I’m getting this right, robotstofzuiger_laatst_actief_woonkamer is a custom sensor added via template integration into configuration.yaml.
But what sets its value? Do you have some more custom scripts for this?
Play with margin-top value in the hui-view section of your theme file
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipecard full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
/* Making sure the 'Add card' FAB can be seen in edit mode */
ha-fab {
margin-bottom: 80px;
}
.: |
/* Correct spaces top and bottom for bottom tabbar */
hui-view {
padding-bottom: 80px;
margin-top: -10px;
}
to move the navbar to bottom you can try this also in your theme.yaml file. Worked for me
card-mod-root: |
/* ___________ Bottom tabbar ___________ */
.header {
top: auto !important;
bottom: 0 !important;
transform: translate3d(0px, 0px, 0px) !important;
backdrop-filter: blur(50px);
-webkit-backdrop-filter: blur(50px);
-moz-backdrop-filter: blur(50px);
-o-backdrop-filter: blur(50px);
-ms-backdrop-filter: blur(50px);
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
.header::before {
box-shadow: none;
height: 20px;
bottom: -20px;
}
.toolbar {
height: 80px !important;
padding: 4px 8px 20px 8px;
background-color: rgba(0,0,0,0) !important;
}
.header div[sticky] {
margin: -20px 0 20px 0 !important;
transform: none !important;
}
ha-tabs, ha-menu-button, ha-button-menu {
color: var(--contrast20);
}
ha-tabs, paper-tabs {
--paper-tabs-selection-bar-color: none !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
#view {
min-height: 100% !important;
margin-top: 0px !important;
}
hui-view {
padding-bottom: 0px !important;
}
Just updated to 2023.4 and noticed the same. But when I’m switching back to the default theme without any card-mod code the dashboard still doesn’t work properly. So I’m gonna wait for a .1 or .2 version before trying to fix it by changing the card-mod code 
Most of the time I recommend waiting for a 2023.4.x version to update to.
I stand corrected, I had a two scroll bars which bugged out but it wasn’t because of core HA but because of an older version of the custom-button card.
I’ve also looked at the card-mod code and mode some changed so the navigation stays at the bottom in 2023.4.x
Only thing which changed is the removal of the blurred background behind the nav bar. Currently the main content doesn’t fall behind the navigation bar anymore, so there is nothing to blur. We can “fix” this in the code but it felt too hacky, so I left it out.
card-mod-root-yaml: |
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
}
.header {
top: auto !important;
bottom: 0;
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
Keep in mind that the above code is ONLY to create a bottom navigation bar. Combining all the card-mod code will end up like the code below. Still need to include the custom variables of course, this isn’t a complete theme.yaml file, only the card-mod section:
card-mod-theme: Rounded
card-mod-root-yaml: |
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
height: calc(100vh - 80px - env(safe-area-inset-top)) !important;
}
.header {
top: auto !important;
bottom: 0;
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
card-mod-view-yaml: |
hui-masonry-view:
$: |
/* Swipecard full width on mobile */
@media screen and (max-width: 599px) {
#columns .column swipe-card {
margin-left: -4px;
margin-right: -4px;
}
}
card-mod-card-yaml: |
.: |
/* General changes */
ha-card {
transition: none !important;
font-family: 'hk nova semibold', 'Roboto', 'Noto', sans-serif !important;
}
/* Vacuum card load transition disabled */
.type-custom-xiaomi-vacuum-map-card {
transition: none !important;
}
/* Graph card style */
.graph {
background: var(--blue-tint);
display: flex;
overflow: hidden; /* Temporary fix for graph overflow bug */
}
.graph .name {
font-size: 12px;
line-height: 18px;
background: var(--black);
color: var(--white);
padding: 6px 10px;
border-radius: 100px;
z-index: 1;
}
.graph .icon {
display: none;
}
.graph .info {
margin-top: 0;
padding: 24px 24px 0 24px;
order: 1;
}
.graph hui-graph-header-footer {
order: 3;
}
.graph .header {
padding: 0 24px;
order: 2;
margin: 4px 0 -16px 0;
z-index: 1;
}
/* Entities card style */
.type-entities {
background: none;
}
.type-entities .card-header {
padding: 0 0 12px 0;
}
.type-entities .card-content {
padding: 0;
}
card-mod-row: |
/* Entities card row style */
:host {
display: block;
background: var(--contrast2);
border-radius: 24px;
padding: 6px 12px 6px 6px;
}
@Vorlex, Ye it’s a sensor template:
- platform: template
sensors:
robotstofzuiger_laatst_actief_woonkamer:
friendly_name: "Robotstofzuiger laatst actief woonkamer"
value_template: "{{as_timestamp(states('input_datetime.woonkamer_robotstofzuiger_laatste_datum_actief')) | timestamp_custom('%a %-d %b', true)}}"
Hi @LE0N thanks for sharing. How did you go by implementing custom fonts into your HA instance? for example: font-family: ‘hk nova semibold’, ‘Roboto’, ‘Noto’,
Hi @LE0N , thanks for sharing the customizations for home Assistant 2023.4. Unfortunately the bottom navigation bar display is a bit buggy for me with this. For me, about half of the navigation bar is transparent and the other half is opaque. Does anyone have a solution for this?
@LE0N Could you please share your sonos_play_pause script? Thanks for your help. Love your work!
No idea why Leon is using a script for this but you can simply use a tap_action with a call-service action media_player.media_play_pause.
thank you.tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: "[[[ return entity.entity_id ]]]"
Cheers, worked great.
@CM000n Could you post your theme.yaml code? I’m not sure if all the card-mod codes are applied correctly.
@nickw082 Ye the solution @StickyClient posted is correct, no point in making a script out of it. This is one of my earlier scripts which I completely forgot even existed. Updating mine as well
Hi,
Can you share youre code for this Tablet version? Looks amazing!
I’m interested in the dynamic light group, I didnt get it to work. Can any of you share your code?
Hi Leon,
I have change the bottom bar code with the newest HA update. However, the bar is still at the top. What can be wrong?
Restarted HA already.
Code:
card-mod-theme: Rounded
card-mod-root-yaml: |
.: |
/* ___________ Bottom tabbar ___________ */
#view {
margin-top: 0 !important;
}
.header {
top: auto !important;
bottom: 0;
background-color: rgba(var(--contrast1-RGB),0.6) !important;
}
:host([scrolled]) .header {
box-shadow: none !important;
}
.toolbar {
height: 80px !important;
padding: 4px 4px 16px 4px !important;
}
paper-tab {
color: var(--contrast10);
border-radius: 16px;
}
paper-tab.iron-selected {
color: var(--contrast20);
}
ha-menu-button, ha-button-menu {
color: var(--contrast10);
}
Hey @LE0N
just working on the Vacuum like a few others, I’ve got most of it working but I can’t work out the script script.robotstofzuiger_herhalingen
would mind sharing that too please
Basically a simple if/else statement. This is how I did it:
alias: Vacuum Repetitions
sequence:
- if:
- condition: numeric_state
entity_id: input_number.vacuum_repetitions
above: 2
then:
- service: input_number.set_value
data:
value: 1
target:
entity_id: input_number.vacuum_repetitions
else:
- service: input_number.increment
data: {}
target:
entity_id: input_number.vacuum_repetitions
mode: single
I love this design, just creating a new dashboard for 2023 according to your design guidelines, thank you dear @LE0N for your efforts.
Question1: Is there a solution for the bottom navigation problem?
Question2: When can we expect a release on GitHub - lovelace-rounded/ui: 🟣 Lovalce Rounded UI components?
First off thank you for the extensive write up! Have you/are you sharing your full config to github?
Could you share the media logos you used? I really like the look of them and cant find anything similar
I agree was thinking to ask the same about his config on github. Might learn a thing or two there aswell
thanks
I had the increment but not the return to 1
alias: vacuum_cleaner_repeat
sequence:
- service: input_number.increment
data: {}
target:
entity_id: input_number.vacuum_cleaner_zone_repeats
enabled: true
- if:
- condition: numeric_state
entity_id: input_number.vacuum_cleaner_zone_repeats
above: 3
then:
- service: input_number.set_value
data:
value: 1
target:
entity_id: input_number.vacuum_cleaner_zone_repeats
else: []
mode: single
icon: mdi:repeat
I went with the ‘increment’ 1st otherwise the ‘else’ gave an odd behavior around 1, needing a 2nd tap to get to 2