andrew47
January 6, 2021, 5:00pm
349
Is there something i am missing?
I use this code
sidebar:
digitalClock: true
clock: false
date: true
dateFormat: DD MMMM YYYY
hideTopMenu: false
style: |
:host {
--sidebar-background: #171D1F;
--sidebar-text-color: #B4B7B7;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
h1.digitalClock {
color: #B4B7B7;
font-weight: 350;
font-size: 70px!important;
padding-left: 30px;
padding-top: 30px;
}
.date {
color: #545C5F;
font-weight: 450;
line-height: 35px;
padding-left: 30px;
padding-top: 20px;
}
.template li {
font-weight: 450!important;
font-size: 26px;
line-height: 35px!important;
padding-left: 30px;
padding-top: 20px;
}
template: |
<li>{{ states('sensor.sidebar_greeting') }}</li>
<li>{{ states('sensor.sidebar_weather') }}</li>
<li>{{ states('sensor.sidebar_active') }}</li>
width:
mobile: 0
tablet: 30
desktop: 18
kiosk_mode:
hide_header: true
background: center / cover no-repeat url("/local/background.png") fixed
views:
- panel: true
path: "home"
cards:
- type: "custom:homekit-card"
home: true
useBrightness: false
useTemperature: false
titleColor: "#FFF"
enableColumns: true
statePositionTop: true
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Verlichting Begane grond
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.shelly_shdm_1_db2cc7
name: Gang
icon: mdi:track-light
- entity: light.shelly_shdm_1_d0ea50
name: schemerlamp woonkamer
icon: mdi:floor-lamp
- entity: light.shelly_shdm_1_db48c4
name: plafond woonkamer
icon: mdi:track-light
- entity: light.shelly_shdm_1_db30bc
name: plafond keuken
icon: mdi:track-light
Brinxx
January 7, 2021, 10:51am
350
Hey, have you tried with “home: false” in the homekit-card card ?
royle
January 7, 2021, 1:39pm
351
Hi,
I having some problems adding calendar card to my tablet dashboard.
When I am trying to add the calendar to the side bar is getting out of proportions
Any suggestions ?
DBuit
January 7, 2021, 3:31pm
352
Hi,
When you add the bottomCard, you can also add style you need to add css to make it fit nice and look good. it is not something the sidebar does for you.
1 Like
Twours
January 8, 2021, 5:11am
355
Hey man,
How did you get the side bar translucent? I have been trying for days and can’t manage to do it?
Twours
January 8, 2021, 5:14am
356
Man this is so clean.
How did you manage to make your graph be a gradient colour and without any borders?
peteywhit
January 9, 2021, 6:54am
357
The gradient, or color transition rather, is part of the options in mini-graph-card.
color_thresholds:
- value: 69
color: "#0846c2"
- value: 70
color: "#19b7e9"
- value: 72
color: "#ebd500"
- value: 74
color: "#c0392b"
To get the extents of the bottom card to fill the width of the sidebar, you have to add some css styles on the bottom card.
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: weather-forecast
entity: weather.home
show_forecast: false
style: |
ha-card {
background: transparent;
border-radius: 0px;
margin: 0px !important;
padding: 0px 16px 0px !important;
box-shadow: none !important;
font-size: 5px !important;
/*filter: grayscale(100%);*/
-webkit-tap-highlight-color: transparent;
}
:host .content {
flex-flow: row-reverse !important;
}
:host .state , :host .temp {
font-size: 18px !important;
font-weight: 300 !important;
}
.temp-attribute {
text-align: left;
margin-left: -78px;
}
ha-card .icon-image svg {
height: 32px !important;
}
:host .temp-attribute span {
font-size: 11px !important;
top: 7px !important;
color: rgb(156, 156, 156);
}
- type: custom:mini-graph-card
name: ' '
icon: 'mdi:home-thermometer-outline'
entities:
- sensor.current_temp
color_thresholds:
- value: 69
color: "#0846c2"
- value: 70
color: "#19b7e9"
- value: 72
color: "#ebd500"
- value: 74
color: "#c0392b"
show:
fill: fade
style: |
ha-card {
background: transparent;
color: #fff;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: -50px;
font-size: 8px !important;
border-radius: 0px !important;
-webkit-tap-highlight-color: transparent;
padding: 0px !important;
}
ha-card .header {
font-size: 8px !important;
line-height: 9px;
padding: 0px 16px 0px !important;
margin-bottom: -24px;
}
ha-card .states {
padding: 0px 16px 2px !important;
}
cardStyle: |
:host {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
And then a current screenshot. It’s still in the works, as I only work on it a little at a time, tweaking things before cramming everything in my lovelace. I took this screenshot from my browser window, but I style my lovelace based on what device I will be using it on. Notice the weather temperature value is pushed to the right a bit, but on my Lenovo M8, it is aligned perfectly with the forecast and the indoor temp.
5 Likes
peteywhit
January 9, 2021, 7:11am
358
There is a default style for h1.digitalclock for font-size, so you have to replace that style.
Use this:
h1.digitalClock {
font-size: 80px !important;
}
heartkingz
January 9, 2021, 1:41pm
359
well, i never changed a thing. After updating to 0.117 it was translucent. Right now, i think after updating to 2020.12.0, the translucency was gone… I’d like to have it back too, so if someone knows how
im trying to get the sidebar to work but it simply wont show up on my dashboard. this is what i have in my raw config.
sidebar:
digitalClock: true
clock: true
twelveHourVersion: true
date: true
width: 20
hideTopMenu: true
views:
- title: Home
icon: 'mdi:home-outline'
ect....
cannos88
January 13, 2021, 9:55am
361
hi, to insert a new lovelace dashboard in the configuration.yaml I entered this:
lovelace:
mode: storage
# Add yaml dashboards
dashboards:
lovelace-yaml:
mode: yaml
title: Vista Tablet
icon: mdi:script
show_in_sidebar: true
filename: tablet_lovelace.yaml
I created so I have tablet_lovelace.yaml file in which I entered:
resources:
- url: /local/sidebar-card.js
type: module
sidebar:
digitalClock: true
clock: true
twelveHourVersion: true
date: true
width: 20
hideTopMenu: true
unfortunately I can’t see anything. If I copy the content of the other dashboard instead I see everything
DBuit
January 13, 2021, 12:29pm
362
Hi,
i think the width:20 is the problem
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
@cannos88 you also use width:20 see above
I tried that but it is still not showing up.
andrew47
January 13, 2021, 4:57pm
364
Try to set “hideTopMenu: true” to false, I had the same problem and I think it worked when I set it to false.
1 Like
DBuit
January 14, 2021, 8:27am
365
Maybe just try the basic with no extra config.
peteywhit
January 15, 2021, 1:01am
366
Hey DBuit, I submitted a pull request on GitHub to fix the 12 hour time showing the wrong period (am/pm). Also added the option to be able to hide the period as well. It’s my first pull request or anything with Git to be honest.
DBuit
January 15, 2021, 7:41am
367
Hi @peteywhit ,
Nice! will check that today.
I got it to start working now but there are still some issues im having.
the sidebar card only shows up when i refresh my dasboard and if i switch dashboards it disapears.
See code.
sidebar:
title: MyHome
date: true
clock: true
digitalClock: true
twelveHourVersion: true
hideTopMenu: true
showTopMenuOnMobile: true
width:
mobile: 0
tablet: 25
desktop: 20
sidebarMenu:
- action: navigate
navigation_path: /lovelace-homekit/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace-homekit/living-room
name: Living Room
- action: navigate
navigation_path: /lovelace-homekit/kitchen
name: Kitchen
- action: navigate
navigation_path: /lovelace-homekit/bathroom
name: Bathroom
views:
is there any way to make the sidebar menu scrollable?
