HI Ben,
late to the party, but I couldn’t help noticing that nice Star vertical menu popup .
Is this native to the Sidebar card? or did you create that in another way.
Is there any way to add line breaks in the template code? This is what I have:
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 %}
</li>
<li>The {{states('input_select.bins')}} bin is
{{states('sensor.bin_day')}}</li>
<li>The outside temperature is currently
{{states('sensor.temperature_pagoda')}} degrees</li> <li>The forecast today
is {{states('weather.met_office_heanor_daily')}}</li></br>
<li>{% if "on" in states('binary_sensor.front_door_sensor') %}
Front Door is open {% endif %}
</li>
<li>{% if "on" in states('binary_sensor.back_door_sensor') %}
Back door is open {% endif %}
</li>
<li>{% if "on" in states('binary_sensor.bifold_door_sensor') %}
Bifolds are open {% endif %}
</li>
<li>{% if "on" in states('binary_sensor.garage_door_internal') %}
Internal garage door is open {% endif %}
</li>
Hi,
Am I doing something wrong? I can’t get the white space in the bottomCard disappear!!
Another question, is there a way to make the whole sidebar card background transparent?
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
breakpoints:
mobile: 768
tablet: 1024
style: |
:host {
–sidebar-background: #00FF00;
–sidebar-text-color: #FFF;
–face-color: #FFF;
–face-border-color: #FFF;
–clock-hands-color: #000;
–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: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title h1{
text-align: center;
}
.bottomCard {
background-color: #00FF00;
icon-size: 225px;
}
digitalClock: true
date: true
dateFormat: DD-MMM-YYYY
clock: false
hideOnPath:
- /lovelace-testing/bedroom2
hideHassSidebar: false
hideTopMenu: false
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>
{% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan
de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier
aan de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de
straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak
aan de straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_gft') %} <li>Morgen groenebak aan de
straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_papier') %} <li>Morgen oudpapier aan
de straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_pmd') %} <li>Morgen plastic aan de
straat</li> {% endif %}
{% if "Morgen" in states('sensor.blink_restafval') %} <li>Morgen grijzebak
aan de straat</li> {% endif %}
{% if states('sensor.current_lights_on') | float > 0 %}
<li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}
{% if states('sensor.current_media_players_on') | float > 0 %}
<li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif
%}
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace/lampen
name: Lampen
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: weather-forecast
show_current: true
show_forecast: true
entity: weather.home
secondary_info_attribute: humidity
- square: true
columns: 4
type: grid
cards:
- type: custom:mushroom-template-card
icon: none
primary: Fade
icon_color: ''
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: fade 25s linear infinite reverse;
--shape-color: none;
}
@keyframes fade {
6.24%, 12.49%, 18.74%, 24.99%, 31.24%, 37.49%, 43.74%, 49.99%, 56.24%, 62.49%, 68.74%, 74.99%, 81.24%, 87.49%, 93.74%, 100% { box-shadow: 0 0 20px 20px transparent inset; }
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7) inset; }
6.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange), 0.7) inset; }
12.5% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7) inset; }
18.75% { box-shadow: 0 0 0 0 rgba(var(--rgb-amber), 0.7) inset; }
25% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7) inset; }
31.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-lime), 0.7) inset; }
37.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-green), 0.7) inset; }
43.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-green), 0.7) inset; }
50% { box-shadow: 0 0 0 0 rgb(var(--rgb-teal), 0.7) inset; }
56.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-cyan), 0.7) inset; }
62.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-blue), 0.7) inset; }
68.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.7) inset; }
75% { box-shadow: 0 0 0 0 rgb(var(--rgb-indigo), 0.7) inset; }
81.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-deep-purple), 0.7) inset; }
87.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-purple), 0.7) inset; }
93.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-pink), 0.7) inset; }
}
- type: custom:mushroom-template-card
icon: mdi:dots-circle
primary: Dotty
fill_container: false
layout: vertical
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1s linear infinite reverse, color 60s infinite;
}
@keyframes color {
0% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
6.25% { border-color: rgb(var(--rgb-deep-orange)); color: rgb(var(--rgb-pink)); }
12.5% { border-color: rgb(var(--rgb-orange)); color: rgb(var(--rgb-purple)); }
18.75% { border-color: rgb(var(--rgb-amber)); color: rgb(var(--rgb-deep-purple)); }
25% { border-color: rgb(var(--rgb-yellow)); color: rgb(var(--rgb-indigo)); }
31.25% { border-color: rgb(var(--rgb-lime)); color: rgb(var(--rgb-blue)); }
37.5% { border-color: rgb(var(--rgb-light-green)); color: rgb(var(--rgb-light-blue)); }
43.75% { border-color: rgb(var(--rgb-green)); color: rgb(var(--rgb-cyan)); }
50% { border-color: rgb(var(--rgb-teal)); color: rgb(var(--rgb-teal)); }
56.25% { border-color: rgb(var(--rgb-cyan)); color: rgb(var(--rgb-green)); }
62.5% { border-color: rgb(var(--rgb-light-blue)); color: rgb(var(--rgb-light-green)); }
68.75% { border-color: rgb(var(--rgb-blue)); color: rgb(var(--rgb-lime)); }
75% { border-color: rgb(var(--rgb-indigo)); color: rgb(var(--rgb-yellow)); }
81.25% { border-color: rgb(var(--rgb-deep-purple)); color: rgb(var(--rgb-amber)); }
87.5% { border-color: rgb(var(--rgb-purple)); color: rgb(var(--rgb-orange)); }
93.75% { border-color: rgb(var(--rgb-pink)); color: rgb(var(--rgb-deep-orange)); }
100% { border-color: rgb(var(--rgb-red)); color: rgb(var(--rgb-red)); }
}
.shape {
--shape-color: none;
border: 5px dotted transparent;
--shape-animation: spin 2s linear infinite, color 60s infinite;
--icon-symbol-size: 30px;
--icon-size: 32px;
}
- type: custom:mushroom-template-card
icon: none
primary: Comet
icon_color: ''
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
border-right: 4px solid;
border-bottom: 4px solid transparent;
--shape-animation: spin 1s linear infinite, comet 10s infinite;
--shape-color: none;
--icon-size: 38px;
}
@keyframes comet {
0% { border-right-color: rgb(var(--rgb-red)); }
6.25% { border-right-color: rgb(var(--rgb-deep-orange)); }
12.5% { border-right-color: rgb(var(--rgb-orange)); }
18.75% { border-right-color: rgb(var(--rgb-amber)); }
25% { border-right-color: rgb(var(--rgb-yellow)); }
31.25% { border-right-color: rgb(var(--rgb-lime)); }
37.5% { border-right-color: rgb(var(--rgb-light-green)); }
43.75% { border-right-color: rgb(var(--rgb-green)); }
50% { border-right-color: rgb(var(--rgb-teal)); }
56.25% { border-right-color: rgb(var(--rgb-cyan)); }
62.5% { border-right-color: rgb(var(--rgb-light-blue)); }
68.75% { border-right-color: rgb(var(--rgb-blue)); }
75% { border-right-color: rgb(var(--rgb-indigo)); }
81.25% { border-right-color: rgb(var(--rgb-deep-purple)); }
87.5% { border-right-color: rgb(var(--rgb-purple)); }
93.75% { border-right-color: rgb(var(--rgb-pink)); }
100% { border-right-color: rgb(var(--rgb-red)); }
}
- type: custom:mushroom-template-card
icon: none
primary: Radial
icon_color: ''
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
--icon-animation: spin 1.5s linear infinite;
border-radius: 50%;
border: 3px solid rgb(var(--rgb-blue));
border-right-color: transparent;
}
.shape {
border: 3px solid rgb(var(--rgb-red));
border-right-color: transparent;
--shape-animation: spin 2s linear infinite;
--shape-color: none;
--icon-symbol-size: 24px;
--icon-size: 36px;
}
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
Maybe try this instead:
cardStyle: |
:host {
width: 100%;
}
ha-card {
border-radius: 12px;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: 0px;
}
1 Like
Anyway to achieve the described in the below image?
The thing is having the list wastes a lot of space without providing all the required buttons and makes it impossible to have a consist Sidebar on different devices.
I am trying to move from very custom beginner-mode dashboard to more robust and intuitive one using Mushroom cards.
My original dashboard (for mobile and larger devices Custom icons and entity pictures
moving to something like this:
Main screen (NEW)
GF Screen (NEW)
FF screen (NEW)
One of the bedrooms (NEW)
WIP Info screen (NEW)
I’m using browser_mod to navigate to the “home view url” after my wall tablet has been idle for a time. Though, doing so leaves the custom sidebar menu focus on the wrong item.
Say that I have chosen to view the CCTV view. When idle Home Assistant will run an automation and call browser_mod.navigate to go to the home URL. The home view is shown but the menu item focus will still be on CCTV.
Is there a way to change the menu item focus without the menu item actually being pressed?
Hello guys, I am trying to resize some cards on my sidebar or the hole sidebar.
sidebar:
stickyCards:
- type: custom:digital-clock
- type: area
area: dormitor
- type: area
area: cezara
- type: area
area: kitchen
- type: area
area: sufragerie
Do you have some tips?
good afternoon! I’m still relatively new to Home Assistant, so bear with me. Since so many structure and config changes have taken place since this awesome project was created, is the installation still the same? I don’t have a lovelace-ui.yaml file. Do I create one and then put info in there? How do I get rid of the sidebard that is currently there? Also, can I get back to the original sidebar if I needed it for some reason/ Sorry for all the questions…I did give the disclaimer in the beginning, that I’m new 
Can you share the themes?
like colors etc…
does anyone figure out how to use decluttering-cards inside sidebar?
mine does not want to show up 
Tablet view is kinda weird, any way to fix?
Another thing, the spacers on my does not show up…
anyone knows why? I like the “--------------” between the infos
did you manage to solve the problem?
I’s such a moron, I must remove my question to avoid any ridicule
What am I doing wrong that the bottomCard is not showing at the bottom ?
The best thing is that it showed up once, but after refreshing the page it no longer works…
I’ve never been able to use it stably, I’ve tried it once before with weather.
title: Dom
sidebar:
digitalClock: true
date: true
dateFormat: dddd DD MMMM YYYY
hideTopMenu: false
width:
desktop: 20
mobile: 0
tablet: 30
sidebarMenu:
- action: navigate
name: Home
navigation_path: /lovelace/default_view
- action: navigate
name: Bezpieczeństwo
navigation_path: /lovelace/1
- action: navigate
name: Oświetlenie i zasilanie
navigation_path: /lovelace/2
- action: navigate
name: Nagłośnienie
navigation_path: /lovelace/3
- action: navigate
name: Klimatyzacja i Ogrzewanie
navigation_path: /lovelace/4
- action: navigate
name: Ogrzewanie
navigation_path: /lovelace/5
- action: navigate
name: Kamery
navigation_path: /lovelace/6
- action: navigate
name: Energia
navigation_path: /lovelace/energia
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: conditional
conditions:
- entity: media_player.volumio_salon
state: playing
card:
type: custom:mushroom-media-player-card
entity: media_player.volumio_salon
show_volume_level: true
use_media_info: true
volume_controls:
- volume_set
- volume_mute
layout: horizontal
fill_container: false
media_controls: []
card_mod:
style: |
ha-card {
box-shadow: 0px 8px 10px 0px;
border-radius: 0px;
position: absolute;
bottom: 120px;
border-top: 0px solid #CCC;
left: 0px;
width: 100%;
}
style: |
:host {
--sidebar-background: #F5F5F5;
--sidebar-text-color: #333;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #333;
--clock-middle-border: #000;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px;
font-size: 220px;
line-height: 30px!important;
font-weight: 700;
letter-spacing: 5px;
}
.date {
text-align: center;
font-size: 20px;
}
.bottom {
display: grid!important;
}
template: |
<li>
{% if now().hour < 5 %} Dobry wieczór,
{% elif now().hour < 12 %} Dzień dobry,
{% elif now().hour < 18 %} Dzień dobry,
{% else %} Dobry wieczór, {% endif %}
</li>
<li>Temperatura na zewnątrz
{{states('sensor.salon_outside_temperature')}}°.</li> <li> Obecnie jest
{{states('sensor.weather_pl')}}.</li>
<li>
{% if states('sensor.number_of_lights_on') | float > 0 %} <li>Włączone jest {{states('sensor.number_of_lights_on')}}{{'\U0001F4A1'}}</li>X {% endif %}
<li>
{% if states('sensor.number_of_mediaplayer') | float > 0 %} <li>Działa w tej chwili {{states('sensor.number_of_mediaplayer')}} odtwarzaczy {{'\U0001F4FB'}}.</li>X {% endif %}
<li>Pobór prądu w mieszkaniu to {{states('sensor.pobor_wat')}} W.</li>
Same thing happened to me also. Simple design, bottomCard section not showing up anymore
Hi, did you get this to work? I have tried to but keep getting a template error.
How do I get browser mod popup to work with this. I have a single camera feed that I’d prefer to run from a popup rather than a new view but I don’t get anything showing in the popup. The relevant section is below.
- action: call-service
service: browser_mod.popup
service_data:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Camera
content:
type: picture-entity
show_state: true
show_name: true
camera_view: live
entity: camera.cctv_camera
camera_image: camera.cctv_camera
I have also tried the following as well. Neither work.
- action: call-service
service: browser_mod.popup
service_data:
type: picture-entity
show_state: true
show_name: true
camera_view: live
entity: camera.cctv_camera
camera_image: camera.cctv_camera
I do get a popup on both but nothing is displayed.
Nope, apparentely is a “bug” or limitation from sidebar.
Hi Martin, did you ever work out the line break? if so could you share please.