how do i get the custom card to show under goedenmiddag? now it shows at the bottom and is only visible on desktop on tablet it just drops of and is not visible.
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