Hi,
I have a problem with displaying the alarmo control in the bottmcard of the sidebar. This is my piece of code, what am I doing wrong?
bottomCard:
type: custom:mushroom-alarm-control-panel-card
CardOptions:
entity: alarm_control_panel.alarmo
states:
- armed_home
- armed_away
name: Alarm
fill_container: false
show_keypad: false
Thanks
Kris
Hello,
first of all I would like to say that I really love this card in between. Thank you so much for the project.
I am currently also using a status in the navigation paths. This means that if a light is on somewhere in the house, the area is marked in the sidebar. So far so good, but now I see a strange overlap in two corners. Who can help me to get rid of this?
Enclosed is my sidebar configuration.
sidebar:
digitalClock: true
hideTopMenu: true
showTopMenuOnMobile: true
width:
mobile: 0
desktop: 25
tablet: 25
sidebarMenu:
- action: navigate
name: Home
icon: mdi:home
navigation_path: home
active: true
- action: navigate
name: Wohnzimmer
icon: mdi:sofa
navigation_path: wohnzi
active: true
- action: navigate
name: Lights
navigation_path: licht
icon: mdi:floor-lamp
state: light.lichter
- action: navigate
name: Alarm
navigation_path: alarm
icon: mdi:alarm-light
state: input_boolean.alarmanlage
- action: navigate
name: Music
navigation_path: music
icon: mdi:speaker
- action: navigate
name: Tanken
icon: mdi:gas-station
navigation_path: Benzin
active: true
- action: navigate
name: Wetter
navigation_path: wetter
icon: mdi:weather-cloudy
style: |
:host {
--sidebar-text-color: #fff;
--box-shadow: inset -11px 0px 6px 1px #242e42;
--border-radius: 30px;
}
.sidebarMenu li.active {
background-color: transparent!important;
font-weight: bold!important;
border-radius: 30px;
box-shadow: inset -11px 0px 6px 1px #242e42;
}
.digitalClock {
text-align: center;
}
.sidebarMenu li {
line-height: 30px !important;
text-align: left;
}
Furthermore I got a question, how to keep this state on all pages. An example:
While have a light in state on this is shown in the sidebar, If I switch to Home, the blue highlight frame in the Light disappears, although there is still a light on. Any Idee?
BR
Patrick
You’re a lifesaver!
where can I find icons to insert into the template?
Hello,
I’m à problèm with sidebar card in my log :
2024-01-06 16:33:01.895 ERROR (MainThread) [frontend.js.latest.202401040] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
SidebarCard.updateSidebarSize (/hacsfiles/sidebar-card/sidebar-card.js:18065:30)
/hacsfiles/sidebar-card/sidebar-card.js:18107:18
2024-01-06 16:33:01.897 ERROR (MainThread) [frontend.js.latest.202401040] Uncaught error from Chrome 120.0.0.0 on Windows 10
TypeError: Cannot read properties of null (reading 'shadowRoot')
getHeaderHeightPx (/hacsfiles/sidebar-card/sidebar-card.js:18652:23)
createCSS (/hacsfiles/sidebar-card/sidebar-card.js:18430:26)
updateStyling (/hacsfiles/sidebar-card/sidebar-card.js:18704:66)
/hacsfiles/sidebar-card/sidebar-card.js:18743:9
have you found a solution for the issue? Same here
Hello Patrick,
At this moment the active state for sidebar menu is always on so when you navigate it tries to update the active state in the menu. I need to add an option to disable this sidebar navigation update state
You still have this issue? thought it was fixed in last update
@pks150781 added an option in your config updateMenu when you set this false menu does not get active state when navigating.
Hi, is it possible to change the icon color by templates based on sensor values?
could you upload the code again please? love the layout
Hi!
Trying to smaller the analog clock. If I resize the width of .clock, I get an egg.
Def height or aspect-ratio does not solve that problem.
testcode:
.clock {
width: 100px!important;
height: 100px!important;
}
Anyone successful resized that clock?
Thanks - Michael
Hi all
Trying to find a way to keep track of which view is active and use the state-command to highlight the current view in the sidebar. Is this possible using state or do i have to do it some other way?
If the second proves to be the only current way to get this to work, has anyone got any examples for me to look at?
Thanks in advance and thanks for all the great work you’re doing here!
Somehow I don’t know what is going on, but I can’t change the background color for the sidebar…
here is code snip:
title: Übersicht
background: center / cover no-repeat url('/local/pic/background.png') fixed
sidebar:
digitalClock: true
date: true
style: |
:host {
--sidebar-background: white!important;
--sidebar-text-color: #000!important;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.date {
font-size: 32px;
margin-left: 6px;
}
.sidebarMenu li {
font-weight: 200!important;
background-color: white!important;
}
.sidebarMenu li.active {
font-weight: 400!important;
background-color: white!important;
}
width:
mobile: 0
tablet: 25
desktop: 25
sidebarMenu: null
bottomCard:
type: weather-forecast
cardOptions:
name: Home
show_forecast: true
entity: weather.forecast_home
cardStyle: |
:host {
width: 100%;
position: relative;
bottom: 0;
left: 0;
}
ha-card {
font-weight: 200;
padding: none;
width: 110%;
border: none;
overflow: hidden !important;
box-shadow: none !important;
ha-card-border-radius: 0px;
margin-top: -16px;
margin-right: -10px;
margin-left: -10px;
}
views:
- title: Handy
subview: false
visible:........
I think I found the issue, I always have to refresh the browser.
but now I have a question about the background.
I would like to have the sidebar “transparent” and the background all over the window, but the background gets cut off, what can I do?
same here - any solution ? thanks
This looks great!
Mind sharing your Yaml for your dashboard and especially for your navigation bar on the left?
In the clock style settings, you can add the following parameter and adapt it according to your needs.
padding-top: 70px
.digitalClock {0
color: rgba(255, 255, 255, 0.7)!important;
font-size: 5.41vw!important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
padding-top: 70px
}