How do you manage different dashboards? I have created a dashboard for each floor in my house, but with the refresh bug, it’s not possible to use the sidebar card
I’m starting to use popups instead of multiple dashboards
Thanks, it works fine. I hide the top and sidemenu with custom header. First tests
looking great, going to pinch a couple of ideas off you 
If you need, here is some of the quickly written :host style code that I use to style my sidebar
…
style: |
:host {
background-image: linear-gradient(115051deg, #210443, #210c49, #21144e, #221b53, #222158, #1e285d, #1b2e61, #183464, #123c67, #124368, #184a68, #225068);
-webkit-box-shadow: inset -38px -3px 11px -28px #15082e;
-moz-box-shadow: inset -38px -3px 11px -28px #15082e;
-o-box-shadow: inset -38px -3px 11px -28px #15082e;
box-shadow: inset -38px -3px 11px -28px #15082e;
border-radius: 15px 0px 0px 15px;
}
…
1 Like
Hi. Looks great. Could you please share your complete sidebar yaml please? Thxs
Here to you. I did everything quickly and didn’t have time to clean up the code. I’m messy haha
It is not the final version. There is a lot of style dead code from previous experiments to delete.
And maybe, if you want, post improvements here.
title: Casa
background: var(--background-image)
sidebar:
digitalClock: true
clock: false
hideTopMenu: false
date: true
dateFormat: 'dddd, DD MMMM YYYY'
title: null
style: |
:host {
--sidebar-background: #210443;
--sidebar-text-color: #fff;
--face-color: #210443;
--face-border-color: #21353E;
--clock-hands-color: #fff;
--clock-seconds-hand-color: #fff;
--clock-middle-background: #21353E;
--clock-middle-border: #21353E;
background-image: linear-gradient(115051deg, #210443, #210c49, #21144e, #221b53, #222158, #1e285d, #1b2e61, #183464, #123c67, #124368, #184a68, #225068);
-webkit-box-shadow: inset -38px -3px 11px -28px #15082e;
-moz-box-shadow: inset -38px -3px 11px -28px #15082e;
-o-box-shadow: inset -38px -3px 11px -28px #15082e;
box-shadow: inset -38px -3px 11px -28px #15082e;
border-radius: 15px 0px 0px 15px;
}
#customSidebar {
}
.bottom {
width: 100% !important;
}
.sidebarMenu {
border: #210443!important;
}
.sidebarMenu li {
line-height: 35px !important;
color: rgba(255, 255, 255, 0.8)!important;
}
.sidebarMenu li ha-icon {
color: #210443!important;
}
.sidebarMenu li.active {
background-color:transparent;!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: white!important;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 50px
}
.digitalClock {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 5.41vw!important;
font-weight: 200!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.date {
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 1.3vw;
font-weight: 300;
text-align: center;
letter-spacing: -0.05vw;
}
.template li {
color: rgba(255, 255, 255, 0.7)!important;
font-size:.1.3vw!important;
font-weight: 200!important;
opacity: 0.3;
letter-spacing: -0.05vw!important;
text-align: center;
}
template: >
<li>latitudine: {{ state_attr('zone.home', 'latitude') | float | round(4)
}}</li>
<li>longitudine: {{ state_attr('zone.home', 'longitude') | float | round(4)
}}</li>
<li>
</li>
width:
mobile: 0
tablet: 35
desktop: 19
bottomCard:
type: 'custom:stack-in-card'
mode: vertical
cardOptions:
cards:
- type: grid
cards:
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/media
icon: 'mdi:music'
name: Musica
show_name: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/sensorinew
name: Sensori
icon: 'mdi:chip'
show_name: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/home
name: Home
icon: 'mdi:home'
show_name: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/sicurezza
name: Sicurezza
icon: 'mdi:security'
show_name: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/meteo
name: Meteo
icon: 'mdi:cloud'
show_name: false
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/maxsea
name: MaxSea
show_name: false
icon: 'mdi:navigation'
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/lista
name: lista
show_name: false
icon: 'mdi:currency-usd'
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/folder
name: folder
show_name: false
icon: 'mdi:folder-search'
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/mappa3d
name: folder
show_name: false
icon: 'mdi:desk-lamp'
- type: button
tap_action:
action: navigate
navigation_path: /lovelace-prova/change
name: folder
show_name: false
icon: 'mdi:ferry'
columns: 5
square: false
- type: markdown
content: >-
Ciao, {{user}}
{% set time = now().hour %} {% if time <= 1 %} Buonanotte
{{'\U0001F611'}} {% elif time <= 3 %} Buonanotte {{'\U0001F62A'}} {%
elif time <= 5 %} Buonanotte {{'\U0001F634'}} {% elif time <= 7 %}
Sei sveglio? Allora buongiorno e buon inizio!!! {{'\U0001F4A9'}} {%
elif time <= 9 %} E’ ora del caffè!! {{'\u2615\uFE0F'}} {% elif time
<= 10 %} **Buongiorno** {{'\U0001F642'}} {% elif time <= 13 %} Buon
pomeriggio {{'\U0001F60A'}} {% elif time <= 15 %} Buon pomeriggio
{{'\U0001F60E'}} {% elif time <= 17 %} Buon
pomeriggio{{'\U0001F44B\U0001F3FB'}} {% elif time <= 19 %} Buonasera
{{'\U0001F44B\U0001F3FB'}} {% elif time <= 22 %}
Buonanotte{{'\U0001F60C'}} {% elif time <= 23 %} Buonanotte
{{'\U0001F974'}} {% else %} Buonanotte {{'\U0001F974'}} {% endif %}
Le luci accese sono:
{% for l in config.entities %}
- {{ l.entity }}
{%- endfor %}
E la porta e' {% if is_state('binary_sensor.door', 'on') %} aperta {% else %} chiusa {% endif %}.
style: |
ha-card {
background-color:transparent;
box-shadow: none;
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 1.3vw;
font-weight: 300;
text-align: center;
letter-spacing: -0.05vw;
}
- type: 'custom:weather-card'
entity: weather.casa
current: true
details: true
forecast: false
hourly_forecast: false
style: |
ha-card {
background-color:transparent;
box-shadow: none;
}
- type: 'custom:stack-in-card'
mode: horizontal
cards:
- type: picture-entity
entity: person.luigi_della_monica
state_image:
home: \local\people\luigi.png
not_home: \local\people\luigiGone.png
unknown: \local\people\luigiGone.png
Casa Mare: \local\people\luigi.png
show_icon: false
show_state: false
show_name: false
- type: picture-entity
entity: person.raffaele_della_monica
state_image:
home: \local\people\lucia.png
not_home: \local\people\luciaGone.png
unknown: \local\people\luciaGone.png
show_icon: false
show_state: false
show_name: false
card_mod:
style: |
ha-card {
background-color:transparent;
box-shadow: none;
}
- type: 'custom:mini-media-player'
entity: media_player.spotify_luigi_della_monica
group: true
volume_stateless: true
artwork: true
source: full
sound_mode: full
card_mod:
styles: |
ha-card {
background-color:transparent;
box-shadow: none;
}
card_mod:
style: |
:host {
background-color:transparent;
box-shadow: none;
width: 100% !important;
}
width: 100% !important;
ha-card {
background-color:transparent;
box-shadow: none;
width: 100% !important;
}
element.style {
width: 100% !important;
}
div [style^="width: 100%"]{
width:100% !important;}
<stack-in-card style="
width: 100% !important;
"></stack-in-card>
cardStyle: |
:host {
background-color:transparent;
box-shadow: none;
width: 100% !important;
}
ha-card {
background-color:transparent;
box-shadow: none;
width: 100% !important;
}
element.style {
width: 100% !important;
}
div [style^="width: 100%"]{
width:100% !important;}
<stack-in-card style="
width: 100% !important;
"></stack-in-card>
views:
2 Likes
Very nice thxs a lot. I’ll give it a look.
You have to use the Custom Header addon to hide the top and sidebar.
If you need you can temporary disable the addon adding /1?disable_ch to the url
I already use kiosk mode for that
Hi,
I have been trying to get a solution but so far no.
Somehow it doesnt render but if i force it to render you add up with 100 sidebars because it won’t always detect if there is already one so not success yet…
First, love this card. Thank you for making it, because I love the Kiosk Mode / SideBar combo.
I’m not sure if I should post this in browser-mod or sidebar, but was anyone able to get a browser-mod popup service to run in the bottom card section? Basically I’m running this from the UI Raw-config and want a way to toggle on and off the sidebar/header but do it in a popup card.
I started with this:
sidebar:
title: Sidebar
clock: false
digitalClock: true
digitalClockWithSeconds: true
date: true
twelveHourVersion: true
period: true
hideTopMenu: true
hideHassSideBar: true
sidebarMenu:
- action: navigate
navigation_path: /lovelace-grid/grid1
name: Home
bottomCard:
type: button
cardOptions:
tap_action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.popup
service-data:
card:
type: entities
entities:
- input_boolean.hidesidebar
- input_boolean.hideheader
entity: input_text.kiosksettings
For the life of me i cant get this to work. So then i tried a simpler service… toast.
bottomCard:
type: button
cardOptions:
tap_action: fire-dom-event
browser_mod:
command: call-service
service: browser_mod.toast
service-data:
message: "hello world"
entity: input_text.kiosksettings
Still nothing. I’m sure i’m missing something simple. Any ideas would be welcome.
Hi,
I haven’t made any changes to my sidebar but since a few days i see the camera entity cards are to far up. Anyone else have this happen to them before?
here’s a before and recent image.
BEFORE:
NOW:
This is amazing! thank you so much! I’ve succesfully installed it and have it looking near-perfect. Could anyone tell me how to get the sidebar gradient?
my current code in my ui lovelace yaml is;
style: |
:host {
--sidebar-background: #1c2023;
--sidebar-text-color: #EEE;
--border-radius: 5px;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: #6A808D!important;
}
Not sure if this is a feature request but is it possible to dynamically change the name of the menu items?
In the same way a template item is created.
For example I have a lights menu item which links to the lights page. Would be great if that menu item could display dynamic text like the template does showing me how many lights are on.
my bottom card isnt on the bottom, how to put it all the way down
Hi, Is there a way to define more than one style of CSS for text within a < L I > tag in a template? To create something like this: Good morning (just as an example)
And
Is it possible to define more than one < L I > tag and apply CSS to it? For example <LI.a> <LI.b> <LI.c> etc.
i tried many variation but till now when i try to add the code my ui go completly black
ie.
resources:
- url: /local/sidebar-card.js
type: module
sidebar:
digitalClock: true
digitalClockWithSeconds: true
sidebarMenu:
- action: navigate
active: true
name: Home
navigation_path: /lovelace/tablet/home
- action: navigate
active: true
name: Lights
navigation_path: /lovelace/tablet/luci
@BeardyBrah thats an inset box shadow, you can add one by adding this to the style at the bottom.
You can check more here. box-shadow - CSS: Cascading Style Sheets | MDN (mozilla.org)
below is what im using in my config
style: |
:host {
--sidebar-background: #2f3233;
--sidebar-text-color: #fff;
--face-color: #21353E;
--face-border-color: #21353E;
--clock-hands-color: #fff;
--clock-seconds-hand-color: #fff;
--clock-middle-background: #21353E;
--clock-middle-border: #21353E;
box-shadow: inset -11px 0px 6px 1px #1d1f1f;
}
1 Like