It looks like you’re starting with a new installation of home assistant? Your config here is going to look pretty different to mine, since I have multiple dashboards with different configurations - my main dashboard is managed in yaml as set in my configuration.yaml, so I can’t use the UI to manage that one. But I have created a separate Dashboard (in Home Assistant Settings) specifically for a kiosk tablet, and that one has the sidebar card installed.
Either way, you need to start with a working Dashboard that has multiple tabs - setting this up via the UI is the easiest - click the hamburger menu in the top right corner and select Edit Dashboard.
Once your dashboard is setup and working with entities and tabs etc, click the hamburger menu in the top right corner and select Edit Dashboard again. Then go back to the hamburger menu and click Manage Resources - if sidebar card isn’t installed here you’ll need to add the resource. Check the HACS link below if you’re running into issues here.
Once all that is sorted, go back to Editing mode and open the hamburger menu again to select “Raw Configuration Editor”. It’s here that you can add the code for sidebar card.
If you’re not familiar already with how dashboards work: Dashboards - Home Assistant (home-assistant.io) Install hacs in home assistant for themes and custom cards | JuanMTech
falco1717
April 7, 2023, 8:16pm
651
Would you be willing to share your full config so I can look at it?
I am starting out with a full new install of home assistant, I went ahead and made a new dashboard and added the config above to it with my devices but its still not adding it.
title: Dashboard
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: false
twelveHourVersion: false
period: false
date: true
hideTopMenu: true
hideHassSidebar: true
width:
desktop: 15
mobile: 15
tablet: 24
sidebarMenu:
- action: navigate
active: true
name: MAIN
icon: mdi:shield-home
navigation_path: /lovelac/home
- action: navigate
active: true
name: CLIMATE
icon: mdi:thermometer
navigation_path: /front-door-lenovo/climate
- action: navigate
active: true
name: LIGHTS
icon: mdi:lightbulb-on
navigation_path: /front-door-lenovo/lights
- action: navigate
active: true
name: CCTV
icon: mdi:cctv
navigation_path: /front-door-lenovo/cctv
- action: toggle
entity: input_boolean.guest_mode
state: input_boolean.guest_mode
name: GUEST
icon: mdi:face-man
style: |
:host {
--sidebar-background: #000;
--sidebar-text-color: #EEE;
views:
- path: default_view
title: Home
cards:
- type: entities
entities:
- person.falco1717
- type: grid
square: false
columns: 1
cards:
- type: media-control
entity: media_player.all
- type: media-control
entity: media_player.command_center_speaker_2
- type: media-control
entity: media_player.guest_bedroom_speaker
- type: media-control
entity: media_player.hallway_speaker
- type: media-control
entity: media_player.kitchen_display
- type: media-control
entity: media_player.living_room_tv
- type: media-control
entity: media_player.main_floor
- type: media-control
entity: media_player.master_bathroom_speaker
- type: media-control
entity: media_player.master_bedroom
- type: media-control
entity: media_player.master_bedroom_speaker
- type: media-control
entity: media_player.party
- type: media-control
entity: media_player.theater_tv
- type: media-control
entity: media_player.upstairs
- type: entities
entities:
- sensor.hacs
title: Sensor
- type: entities
entities:
- entity: sensor.sun_next_dawn
name: Next dawn
- entity: sensor.sun_next_dusk
name: Next dusk
- entity: sensor.sun_next_midnight
name: Next midnight
- entity: sensor.sun_next_noon
name: Next noon
- entity: sensor.sun_next_rising
name: Next rising
- entity: sensor.sun_next_setting
name: Next setting
title: Sun
falco1717
April 7, 2023, 8:58pm
652
I created a whole new dashboard as seen in the image.
Here is my new raw configuration. But still no sidebar. The resource is also there.
title: Home
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: false
twelveHourVersion: false
period: false
date: true
hideTopMenu: true
hideHassSidebar: true
width:
desktop: 15
mobile: 15
tablet: 24
sidebarMenu:
- action: navigate
active: true
name: Google
icon: mdi:google
navigation_path: /dashboard-test/google
- action: navigate
active: true
name: Lights
icon: mdi:ceiling-light-outline
navigation_path: /dashboard-test/lights
style: |
:host {
--sidebar-background: #000;
--sidebar-text-color: #EEE;
views:
- path: default_view
title: Home
cards:
- type: entities
entities:
- person.falco1717
- type: grid
square: false
columns: 1
cards:
- type: media-control
entity: media_player.all
- type: media-control
entity: media_player.command_center_speaker_2
- type: media-control
entity: media_player.guest_bedroom_speaker
- type: media-control
entity: media_player.hallway_speaker
- type: media-control
entity: media_player.kitchen_display
- type: media-control
entity: media_player.living_room_tv
- type: media-control
entity: media_player.main_floor
- type: media-control
entity: media_player.master_bathroom_speaker
- type: media-control
entity: media_player.master_bedroom
- type: media-control
entity: media_player.master_bedroom_speaker
- type: media-control
entity: media_player.party
- type: media-control
entity: media_player.theater_tv
- type: media-control
entity: media_player.upstairs
- type: entities
entities:
- sensor.hacs
title: Sensor
- type: entities
entities:
- entity: sensor.sun_next_dawn
name: Next dawn
- entity: sensor.sun_next_dusk
name: Next dusk
- entity: sensor.sun_next_midnight
name: Next midnight
- entity: sensor.sun_next_noon
name: Next noon
- entity: sensor.sun_next_rising
name: Next rising
- entity: sensor.sun_next_setting
name: Next setting
title: Sun
- title: Google
path: google
icon: mdi:google
type: sidebar
badges: []
cards:
- type: media-control
entity: media_player.all
- type: media-control
entity: media_player.command_center_speaker_2
- type: media-control
entity: media_player.guest_bedroom_speaker
- type: media-control
entity: media_player.hallway_speaker
- title: Lights
path: lights
icon: mdi:ceiling-light-outline
badges: []
cards:
- type: light
entity: light.wiz_rgbw_tunable_4ed9de
It looks like its slightly there in the mobile side though.
@Hell255 I really like your sidebar configuration. In installed sidebar a couple days ago (under 2023.4) and for the life of me I can’t get the styling to work. I’m wondering if the styling problem I’m having has to do with Issue #83 or if it something wrong in my code. I have no “before and after” associated with 2023.4 to compare to…
Here is my full sidebar setup… some of the styling works but some does not (e.g. digitalClock and bottomCard are not working). Any suggestions?
width:
mobile: 0
tablet: 16
desktop: 16
digitalClock: true
twelveHourVersion: true
period: false #am/pm
date: true
dateFormat: ddd MMM DD
sidebarMenu:
- action: navigate
navigation_path: "/lovelace/floor_plan"
name: "Floor Plan"
active: true
- action: navigate
navigation_path: "/lovelace/overview"
name: "Overview"
- action: navigate
navigation_path: "/lovelace/outside_and_garage"
name: "Outside & Garage"
- action: navigate
navigation_path: "/lovelace/upstairs"
name: "Upstairs"
- action: navigate
navigation_path: "/lovelace/downstairs"
name: "Downstairs"
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.downstairs_ecobee
secondary_info_attribute: humidity
tap_action:
action: none
cardStyle: |
:host {
width: 100%;
background-color:#F5F5F5;
position: relative;
bottom: 0;
left: 0;
}
style: |
:host {
--sidebar-background: #F5F5F5;
--sidebar-text-color: #000;
}
.digitalClock {
font-size: 320px;
margin-left: 6px;
text-align: left;
}
.date {
font-size: 20px;
font-weight: 200 !important;
margin-left: 6px;
text-align: left;
}
.sidebarMenu li {.
font-weight: 200 !important;
font-size: 18px;
text-align: left;
margin-left: -10px
}
.sidebarMenu li.active {
font-weight: 400 !important;
font-size: 18px;
text-align: left;
margin-left: -10px
}
Hey
Can someone help me move the menu to the right side? (Marked in red)
DBuit
April 11, 2023, 9:43am
656
The problem with the topmenu over the sidebar and the positioning of the bottomCard should be fixed in new version just released.
3 Likes
mhaast
April 11, 2023, 10:14am
657
Just installed the new version.
Abeksis
April 11, 2023, 10:27am
658
Thanks for FIX. You do a wonderful job.
Thanks to try to help me move the menu to the right?
Dave888
April 11, 2023, 12:56pm
659
Thanks @DBuit !
To confirm, should this resolve the issue of the bottom card disappearing since the Core upgrade to 2023.4 ? Only mine still seems to be missing (have cleared cache etc).
Thanks again for all your work on this!
Hi, can you provide the code?
You can find is code here: GitHub - TPX01/hass
1 Like
Remcove
April 16, 2023, 7:17pm
662
@DBuit
Thanks for your great work.
I’ve noticed that my bottomcards are not always showing up. I’m running HA 2023.4.4.
Thanks!
Is it possible to change the font of the sidebar card? I’m using the google font Roboto. Any ideas?
I installed the repository from HACS, and added the file in the resources, but the bar doesn’t appear…
[image]
title: Casa
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
digitalClock: true
hideTopMenu: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace/lampen
name: Lampen
- action: navigate
navigation_path: /lovelace/music
name: Muziek
- action: navigate
navigation_path: /lovelace/4
name: Test
- action: toggle
entity: light.beganegrond
name: Lichtstrip
state: light.beganegrond
icon: mdi:led-strip-variant
views:
I managed to show them, but it’s empty…
[image]
@martheijnen , it’s been a while since you posted about the “panel: true” issue with sidebar… I’m having the exact issue you appear to have had back in May 2020. It looks to have been resolved back then with an update to sidebar. Are you by chance having this issue again with the latest version? Or did you figure out a work around to continue to use the “panel: true” option?
1 Like
Unfortunately i dont use this part anymore, sorry.
Hell255
April 26, 2023, 12:39am
668
Is this dot a typo?
.sidebarMenu li {.
Also recheck all alignements, maybe (just maybe), the last parenthesis needs to be at the same level as the “:” of :host {
Finally, i would just keep a double-space in yaml to intend. YAML syntax is really annoying
width:
mobile: 0
tablet: 16
desktop: 16
Thanks @Hell255 I seemed to get it working. I think the spacing of the syntax was key…
1 Like
