Hello. How to use the sidebar with the new sections functionality? Thank you
background: none;
Is there a way to put weather under the clock?
Hello everyone. I just started with this awesome side bar and I loved, thank you
My question is about custom greeting, how I can move from bottom to top of the sidebar?
TY
title: НАШ ДОМ
sidebar:
active: true
width:
mobile: 0
tablet: 25
desktop: 15
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}, {{user}}.
Today is {{now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix = ['st',
'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day // 10 == 1
or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
Temperature {{states('sensor.openweathermap_temperature') | int }}°C
{{states('sensor.openweathermap_condition') }}.
</li>
style: |
:host {
--sidebar-background: transparent;
--sidebar-text-color: dodgerblue;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
--sidebar-icon-color: darkorange;
--divider-color: dodgerblue;
}
.digitalClock {
font-weight: 400!important;
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 100px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
.bottomCard {
icon-size: 185px;
}
digitalClock: false
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: false
dateFormat: dddd DD MMM
clock: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home1-mine
name: Home
active: true
icon: mdi:castle
Hey there,
i have some issues with navigation and updating the selected sidebarMenu.
when i navigate on my dashboard using the sidebarMenu the selected sidebarMenu Item will be shown as selected → this works fine!
But when i use “action: navigate” on a normal button on my dashboard the selected sidebarMenu is not shown as selected. The selected sidebarMenu Item stays the page i’m coming from.
updateMenu is set to true!
Thanks a lot!
Looks like , this project not supported anymore. It’s sad. I found similar in HACS apps. It’s call HA-Dashboard by wassy92x, and it’s look the same but with more futures.
Yet another responsive Dashboard with Sidebar (HA Dashboard) - Share your Projects! / Dashboards & Frontend - Home Assistant Community (home-assistant.io)
1 Like
I was playing with sidebar for a little bit, an here is what i got so far:
sidebar:
active: true
bottomcard: true
width:
mobile: 0
tablet: 20
desktop: 25
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Good morning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}, {{user}}.
Today is {{now().strftime('%A') }}, {{ now().strftime('%B') }} {% set suffix = ['st',
'nd', 'rd'] %}{% set day = now().day %}{% set index = 3 if day // 10 == 1
or day % 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
Temperature {{states('sensor.openweathermap_temperature') | int }}°C
{{states('sensor.openweathermap_condition') }}.
</li>
style: |
:host {
--sidebar-background: transparent;
--sidebar-text-color: white;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
--sidebar-icon-color: darkorange;
--divider-color: white;
}
.title h1{
text-align: center;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
digitalClock: false
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: false
dateFormat: dddd DD MMM
clock: false
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: custom:text-divider-row
text: '-'
text-divider-color: white
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Main Page
secondary: ''
icon: ios:house
icon_color: teal
fill_container: true
tap_action:
actio: navigate
navigation_path: main-page
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
- type: custom:mushroom-template-card
primary: First Floor
secondary: '{{ states(''light.first_floor_lights'') }}'
tap_action:
action: navigate
navigation_path: first-floor
icon: mdi:home-floor-1
icon_color: >-
{%if is_state('light.first_floor_lights', 'off') %} teal {% else
%} amber {% endif %}
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
width: 50px !impotant;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'First Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Living Room', 'Kitchen', 'Hallway','Kids Room','Garage','Outside', 'My Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Second Floor
secondary: '{{ states(''light.second_floor_lights'') }}'
tap_action:
action: navigate
navigation_path: second-floor
icon: mdi:home-floor-2
icon_color: >-
{%if is_state('light.second_floor_lights', 'off') %} teal {%
else %} amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Second Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Upstairs', 'Master Bedroom', 'Sonia Room','Artem Room'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights_all'') }}'
tap_action:
action: navigate
navigation_path: basement
icon: mdi:home-floor-b
icon_color: >-
{%if is_state('light.basement_lights_all', 'off') %} teal {%
else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after {content: " {{ states.light and states.switch
| selectattr('state','eq', 'on')
| rejectattr('name', 'search', 'Basement')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Basement', 'Basement Restroom', 'Utility'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''light.outside_lights'') }}'
tap_action:
action: navigate
navigation_path: outside
icon: phu:outside
icon_color: >-
{%if is_state('light.outside_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Outside')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Outside'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.yevgeniy
name: Yevgeniy
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: person.irina
name: Iina
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: device_tracker.life360_sonia
name: Sonia
fill_container: true
icon_type: entity-picture
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-person-card
entity: device_tracker.life360_boris_bolembakh
name: Papa
icon_type: entity-picture
fill_container: true
tap_action:
action: navigate
navigation_path: /our-home/family
- type: custom:mushroom-chips-card
chips:
- type: action
tap_action:
action: navigate
navigation_path: family
icon: mdi:family-tree
icon_color: primary
- type: action
tap_action:
action: navigate
navigation_path: weather
icon: mdi:weather-hazy
icon_color: primary
- type: action
icon_color: primary
tap_action:
action: navigate
navigation_path: ha-info
icon: mdi:memory
alignment: center
Hi all,
is it possible, to let the Template Text blink or flashing?
Having a hard time getting the bottom card transparent. I’ve tried “transparent”, “none”, and the actual color of the sidebar background with no luck.
active: true
width:
mobile: 0
tablet: 20
desktop: 20
breakpoints:
mobile: 768
tablet: 768
desktop: 1024
style: |
:host {
--sidebar-background: #393646;
--sidebar-text-color: #FFF;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
.digitalClock {
font-weight: 200!important;
text-align: left;
padding-bottom: 1px;
padding-top: 1px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: left;
}
.title h1{
text-align: center;
}
.bottomCard {
icon-size: 185px;
}
.template {
font-weight: 100!important;
text-align: center;
}
digitalClock: true
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: true
dateFormat: dddd DD MMM
clock: false
sidebarMenu:
- action: navigate
navigation_path: /dashboard-tablet/home
name: Home
active: true
icon: mdi:home-account
- action: navigate
navigation_path: /dashboard-tablet/weather
name: Weather
active: true
icon: mdi:weather-lightning-rainy
- action: navigate
navigation_path: /dashboard-tablet/security
name: Security
active: true
icon: mdi:cctv
- action: navigate
navigation_path: /dashboard-tablet/lights
name: Lights
active: true
icon: mdi:lightbulb-group
- action: navigate
navigation_path: /dashboard-misc/0
name: Misc
active: true
icon: mdi:alpha-m-circle
bottomCard:
type: grid
theme: Mushroom
cardOptions:
columns: 1
square: false
cards:
- type: custom:stack-in-card
mode: vertical
theme: Bubble
cards:
- type: weather-forecast
entity: weather.forecast_35th_silver_palm
forecast_type: daily
show_current: true
show_forecast: true
secondary_info_attribute: humidity
theme: Bubble
- type: horizontal-stack
cards:
- type: custom:mushroom-person-card
entity: person.justin
- type: custom:mushroom-person-card
entity: person.lisa
- type: conditional
conditions:
- entity: sensor.nws_alerts
state_not: '0'
card:
type: custom:mushroom-template-card
primary: ''
secondary: '{{state_attr(''sensor.nws_alerts'', ''Alerts'')[0].Headline}}'
icon: mdi:alert
icon_color: red
tap_action:
action: navigate
navigation_path: weather
hold_action:
action: none
double_tap_action:
action: none
entity: sensor.nws_alert_type
multiline_secondary: true
cardStyle: |
ha-card {
background: none;
overflow: hidden !important;
box-shadow: none !important;
}
Thanks for any help.
Hi guys,
I dont’t get the bottomCard working. The cards are not visible. I allready installed/reinstalled the newest version 0.1.9.7
What am I doing wrong?
sidebar:
title: "Sidebar title"
digitalClock: true
clock: false
date: true
dateFormat: dddd DD.MM.YYYY
width:
mobile: 0
desktop: 20
style: |
:host {
--sidebar-background: transparent !important;
}
h1.digitalClock {
padding-top: 50px;
color: #B4B7B7;
font-weight: 400;
font-size: 70px!important;
text-align: center; }
.date {
color: #B4B7B7;
font-size: 40px;
text-align: center;
font-weight: 200;
line-height: 35px;}
.template li {
padding-left: 0px;
padding-top: 10px;
font-size:.1.3vw!important;
font-weight: 200!important;
opacity: 0.85;
letter-spacing: -0.05vw!important;
text-align: left;}
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: "Geen idee"
bottomCard:
type: "horizontal-stack"
cardOptions:
cards:
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
template: |
<li>
{% if now().hour < 5 %} Goede nacht {{'\U0001F634'}}
{% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
views:
- title: "Home"
cards:
- type: "custom:sidebar-card"
Regards,
Karim
Try this.
bottomCard:
type: custom:button-card
cardOptions:
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
But your button doesn’t seem to do anything???
This is the example code from HACS. The button doesn’t show up at the bottom of the sidebar panel. And in this topic many people had problems with it. But it should be fixed.
Thanks for the suggestion. Unfortunately, it doesn’t work to make the bottom card transparent.
Hi
Im using the sidebar card a long time now.
However i recently adjusted it, to contain some mushroom chips.
I do have problems with this
Sometimes i see the chips, but some times they dont show up, this happens especially when i view another view…
If i refresh then hey come back sometimes
Any idea?
This issue is with mushroom cards in the sidebar itself?
I have had this issue randomly ever since I started using sidebar card. However, it seems to be happening a lot more frequently since the update to HASS 2024.09
Just trying to understand if it is the same issue I am having. Unfortunately I dont have any solution.
yes
Think its the same issue
if you are talking about the bottomCard, try removing type: horizontal-stack and specify the card you want to add directly. That’s what I did and I haven’t had any problems since,
Mm
How can i make sure then that some are in horizontal stack and some are beneath it in horizontal stack?
Heres my code
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: alarm_control_panel.risco
icon_color: red
name: Alarm
use_entity_picture: false
content_info: name
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.huidig_stroomopbrengst_watt
above: 0
chip:
type: template
icon: mdi:transmission-tower-export
icon_color: green
content: >-
{{(states('sensor.dsmr_reading_electricity_currently_returned')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: conditional
conditions:
- condition: numeric_state
entity: sensor.huidig_stroomverbruik_watt
above: 0
chip:
type: template
icon: mdi:transmission-tower-import
icon_color: red
content: >-
{{(states('sensor.dsmr_reading_electricity_currently_delivered')
| float * 1000) | round(0)}}W
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.current_lights_on
icon: mdi:lightbulb-multiple
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: entity
entity: sensor.current_media_players_on
icon: mdi:play-circle
icon_color: amber
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
ha-card {
--chip-background: transparant;
--text-color: white;
}
- type: action
tap_action:
action: navigate
navigation_path: /dashboard-tablet/lab
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:test-tube
card_mod:
style: |
ha-card {
--chip-background: transparant;
--color: white;