Does it (the sidebar card) also work with the section view?
Hey
great work, thanks. But I have some Question:
First: I can’t activate the Icon in sidebar.
style: |
:host {
--sidebar-background: #0f0f0f;
--sidebar-text-color: #bcbebf;
}
.sidebarMenu li.active {
background-color: #232729!important;
icon-size: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 15px
font-size: 150px;
line-height: 95px;
}
.date {
text-align: center;
}
...
sidebarMenu:
- action: navigate
navigation_path: /lovelace-tablet-wz/tablet_wz_0/
name: Home
active: true
icon: 'mdi:home'
When activ
What is wrong?
I have found it:
.sidebarMenu li ha-icon {
color: white!important;
}
1 Like
Hi guys,
This is a great card but I’m having a major issue. I can’t seem to get access to the edit mode/raw config once I hide the topmenubar & sidehassbar
I have tried ?sidebaroff but it just doesn’t work. Any ideas? I have tried clearly my browser cookies and using different browsers too.
Do you have a problem with the sidebar being hidden? The window loads and it’s OK, I select an entity, click on the journal/history, go back to the main window and the sidebar is gone. I have to refresh the window and it’s visible again.
Hi, would really appreciate if someone could help. Unable to get the date on the side card to say Saturday, 5 October 2024 rather than just 5 October tried using custom code but nothing shows.
Any one have any ideas? No matter what I try I get nothing.
sidebar:
bottomCard:
type: custom:simple-weather-card
cardOptions:
entity: sensor.outdoor_temp
icon: mdi:temperature-celsius
state_color: false
digitalClock: false
twelveHourVersion: true
date: false
customClockDate:
type: custom:hui-markdown-card
content: |
<div class="clock-date-container">
<span class="clock">{{ states('sensor.time') }}</span>
<span class="date">{{ states('sensor.custom_formatted_date') }}</span>
</div>
style: |
:host {
display: flex;
flex-direction: column;
align-items: center;
}
.clock-date-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.clock {
font-size: 30px;
color: white;
margin-right: 10px;
}
.date {
font-size: 20px;
color: white;
font-weight: bold;
}
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Control Rooms
active: true
icon: mdi:floor-plan
- action: navigate
navigation_path: /lovelace/home
name: Control Lights
icon: mdi:lightbulb-group
active: true
- action: navigate
navigation_path: /lovelace/home
name: All Devices
icon: mdi:speedometer
active: true
- action: navigate
navigation_path: /lovelace/home
name: Media
icon: mdi:play-circle-outline
active: true
sidebar: null
- entity: media_player.kitchen
hide:
controls: true
name: true
power: true
source: true
volume: true
progress: true
idle_view:
after: 0.1
when_idle: true
when_paused: true
when_standby: true
style: |
:host {
left: 11.7%;
top: 41.5%;
width: 20.5078125%;
border-radius: 5vw;
overflow: hidden;
height: 3.8vw;
box-shadow: none !important;
}
ha-card {
border-radius: 5vw;
overflow: hidden !important;
box-shadow: none !important;
padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
}
ha-card.--inactive .mmp-player{
opacity: 0 !important;
}
#primaryProgress{
background: #474A52 !important;
}
.entity__info{
height: 2.6vw;
width: 65% !important;
max-height: 20vw !important;
font-size: 0.9vw !important;
margin:0 0 0 1.04vw !important;
display: inline-block !important;
}
div.mmp__bg{
background: #1E2022;
}
ha-card.--inactive div.mmp__bg{
background: none;
}
div.mmp-player {
padding: 0vw;
height: 100%;
}
ha-card {
height: 100%;
}
mmp-powerstrip {
width: 100%;
display: block;
padding:0;
}
ha-icon{
display: block !important;
height: 2vw !important;
width: 2vw !important;
margin: 0.3vw 1.5vw 0 0vw !important;
}
.entity__icon{
float:right;
padding: 0.1vw;
width: 3vw !important;
height: 3vw !important;
min-width: 0 !important;
min-height: 0 !important;
margin:0 !important;
display: inline-block !important;
}
.mmp-player__core {
height: auto;
width: 100% !important;
margin-bottom: 0.1vw;
display: block !important;
position: absolute !important;
bottom: 0;
}
.entity__info__media{
max-height: 20vw !important;
}
.entity__info__media span::before{
content: none !important
}
.attr__media_title{
display:block;
color: white;
font-weight: 300;
font-size: 1.2vw !important;
}
.attr__media_artist{
font-size: 0.8vw !important;
font-weight: 200;
color: white;
}
.entity__artwork{
display:inline-block;
float: right;
margin-right: 0 !important;
display: inline-block;
float: right;
width: 2.2vw !important;
height: 2.2vw !important;
min-width: 0 !important;
margin: 0.2vw 1vw 0 0 !important;
}
tap_action:
action: navigate
navigation_path: /lovelace/2
type: custom:mini-media-player
style: |
:host {
--sidebar-background: rgba(255, 255, 255, 0.1);
--sidebar-text-color: #FFFFFF;
box-shadow: none;
border-radius: 10px;
}
views:
- title: Home
here is part of my sidebar
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') }}.
<br/>
Thanks @Zenia. Any chance you also know a way to make the weather span the bottom of the bar? Tried using CSS to no avail.
You welcome
Try to use animated weather card( or other weather card )in place of bottomCard
Not quite working, it’s still showing as normal and not spanning the full bar. Also is your Today template in your title? Thanks for your help.
sidebar:
bottomCard:
type: custom:weather-card
cardOptions:
graph: line
entity: sensor.outdoor_temp
detail: 1
icon: mdi:thermometer
style: |
:host {
width: 100% !important; # Ensures full width
height: auto; # Adjust height as needed
}
ha-card {
width: 100% !important; # Ensures the card itself spans the entire width
box-shadow: none !important; # Optional: Removes shadow if not needed
border-radius: 10px; # Optional: Customize border radius
}
digitalClock: true
twelveHourVersion: true
date: true
dateformat: dddd DD MMMM
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Control Rooms
active: true
icon: mdi:floor-plan
- action: navigate
navigation_path: /lovelace/home
name: Control Lights
icon: mdi:lightbulb-group
active: true
- action: navigate
navigation_path: /lovelace/home
name: All Devices
icon: mdi:speedometer
active: true
- action: navigate
navigation_path: /lovelace/home
name: Media
icon: mdi:play-circle-outline
active: true
sidebar: null
- entity: media_player.kitchen
hide:
controls: true
name: true
power: true
source: true
volume: true
progress: true
idle_view:
after: 0.1
when_idle: true
when_paused: true
when_standby: true
style: |
:host {
left: 11.7%;
top: 41.5%;
width: 20.5078125%;
border-radius: 5vw;
overflow: hidden;
height: 3.8vw;
box-shadow: none !important;
}
ha-card {
border-radius: 5vw;
overflow: hidden !important;
box-shadow: none !important;
padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
}
ha-card.--inactive .mmp-player{
opacity: 0 !important;
}
#primaryProgress{
background: #474A52 !important;
}
.entity__info{
height: 2.6vw;
width: 65% !important;
max-height: 20vw !important;
font-size: 0.9vw !important;
margin:0 0 0 1.04vw !important;
display: inline-block !important;
}
div.mmp__bg{
background: #1E2022;
}
ha-card.--inactive div.mmp__bg{
background: none;
}
div.mmp-player {
padding: 0vw;
height: 100%;
}
ha-card {
height: 100%;
}
mmp-powerstrip {
width: 100%;
display: block;
padding:0;
}
ha-icon{
display: block !important;
height: 2vw !important;
width: 2vw !important;
margin: 0.3vw 1.5vw 0 0vw !important;
}
.entity__icon{
float:right;
padding: 0.1vw;
width: 3vw !important;
height: 3vw !important;
min-width: 0 !important;
min-height: 0 !important;
margin:0 !important;
display: inline-block !important;
}
.mmp-player__core {
height: auto;
width: 100% !important;
margin-bottom: 0.1vw;
display: block !important;
position: absolute !important;
bottom: 0;
}
.entity__info__media{
max-height: 20vw !important;
}
.entity__info__media span::before{
content: none !important
}
.attr__media_title{
display:block;
color: white;
font-weight: 300;
font-size: 1.2vw !important;
}
.attr__media_artist{
font-size: 0.8vw !important;
font-weight: 200;
color: white;
}
.entity__artwork{
display:inline-block;
float: right;
margin-right: 0 !important;
display: inline-block;
float: right;
width: 2.2vw !important;
height: 2.2vw !important;
min-width: 0 !important;
margin: 0.2vw 1vw 0 0 !important;
}
tap_action:
action: navigate
navigation_path: /lovelace/2
type: custom:mini-media-player
style: |
:host {
--sidebar-background: rgba(255, 255, 255, 0.1);
--sidebar-text-color: #fffff;
--clock-font-size: 30px;
box-shadow: none;
border-radius: 10px;
}
.date {
font-size: 20px;
color: #ffffff;
font-weight: light;
}
.clock {
font-weight: light;
font-size: 30px;
views:
- title: Home
background: {}
cards: []
Not keen on this layout - trying to get it to look like this. Like it’s part of the sidebar with no border.
I am not an expert in yaml code. Try to add
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
With card_mod
Without:
Wondering if anyone could please help? Looking to remove the two lines in the sidebar menu and change the padding and margins.
If I change in the browser inspector and carry over to YAML I am getting nothing. I imagined that adding this under .sidebar would work but no. Any Ideas would be much appreciated.
I have attached my current view and the view that I am looking to achieve.
sidebar:
bottomCard:
type: sensor
cardOptions:
entity: sensor.outdoor_temp
graph: line
icon: mdi:thermometer
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
border-width: 0px;
width: 304px;
margin-left: 0px !important; # Ensure no margin on the left
padding-left: 0px !important;
border-radius: 0px !important;
}
digitalClock: true
width:
mobile: 0
tablet: 25
desktop: 20
date: true
dateformat: dddd DD MMMM
debug: true
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Control Rooms
active: true
icon: mdi:floor-plan
- action: navigate
navigation_path: /lovelace/home
name: Control Lights
icon: mdi:lightbulb-group
active: true
- action: navigate
navigation_path: /lovelace/home
name: All Devices
icon: mdi:speedometer
active: true
- action: navigate
navigation_path: /lovelace/home
name: Media
icon: mdi:play-circle-outline
active: true
sidebar: null
- entity: media_player.kitchen
hide:
controls: true
name: true
power: true
source: true
volume: true
progress: true
idle_view:
after: 0.1
when_idle: true
when_paused: true
when_standby: true
style: |
:host {
left: 11.7%;
top: 41.5%;
width: 20.5078125%;
border-radius: 5vw;
overflow: hidden;
height: 3.8vw;
box-shadow: none !important;
}
ha-card {
border-radius: 5vw;
overflow: hidden !important;
box-shadow: none !important;
padding: 0.1vw 0.9vw 0.7vw 1.05vw !important;
}
ha-card.--inactive .mmp-player{
opacity: 0 !important;
}
#primaryProgress{
background: #474A52 !important;
}
.entity__info{
height: 2.6vw;
width: 65% !important;
max-height: 20vw !important;
font-size: 0.9vw !important;
margin:0 0 0 1.04vw !important;
display: inline-block !important;
}
div.mmp__bg{
background: #1E2022;
}
ha-card.--inactive div.mmp__bg{
background: none;
}
div.mmp-player {
padding: 0vw;
height: 100%;
}
ha-card {
height: 100%;
}
mmp-powerstrip {
width: 100%;
display: block;
padding:0;
}
ha-icon{
display: block !important;
height: 2vw !important;
width: 2vw !important;
margin: 0.3vw 1.5vw 0 0vw !important;
}
.entity__icon{
float:right;
padding: 0.1vw;
width: 3vw !important;
height: 3vw !important;
min-width: 0 !important;
min-height: 0 !important;
margin:0 !important;
display: inline-block !important;
}
.mmp-player__core {
height: auto;
width: 100% !important;
margin-bottom: 0.1vw;
display: block !important;
position: absolute !important;
bottom: 0;
}
.entity__info__media{
max-height: 20vw !important;
}
.entity__info__media span::before{
content: none !important
}
.attr__media_title{
display:block;
color: white;
font-weight: 300;
font-size: 1.2vw !important;
}
.attr__media_artist{
font-size: 0.8vw !important;
font-weight: 200;
color: white;
}
.entity__artwork{
display:inline-block;
float: right;
margin-right: 0 !important;
display: inline-block;
float: right;
width: 2.2vw !important;
height: 2.2vw !important;
min-width: 0 !important;
margin: 0.2vw 1vw 0 0 !important;
}
tap_action:
action: navigate
navigation_path: /lovelace/2
type: custom:mini-media-player
style: |
:host {
--sidebar-background: rgba(255, 255, 255, 0.1);
--sidebar-text-color: #fffff;
--clock-font-size: 30px;
box-shadow: none;
border-radius: 10px;
text-align: center;
}
.sidebarMenu {
border-top: 0px solid rgba(255, 255, 255, 0.2);
border-bottom: 0px solid rgba(255, 255, 255, 0.2);
}
.sidebar-inner {
display: contents !important; # Change display to contents
padding: 30px !important; # Remove any padding if needed
margin: 0px !important; # Ensure no margin is added
}
.date {
font-size: 20px;
color: #ffffff;
font-weight: light;
margin-bottom: 35px;
}
.digitalclock {
font-weight: light;
font-size: 30px;
padding-top: 10px;
margin-bottom: 3px;
}
views:
- title: Home
background: {}
cards: []
Hi all,
In my sidebar dashboard I’m trying to set a vertical stack on bottomcard for test but it didn’t work
sidebar:
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: area
area: bagno_cantina
- type: area
area: bagno_cantina
Solved using the custom:stack-in-card
Use ‘?sidebarOff’ with big ‘O’ instead
Is it possible to show and hide the sidebar dynamically (based on a button)? I have a floorplan that I display together with the sidebar. This works perfectly on my desktop computer but unfortunately not on my wall table. To get round this, I would like to hide the sidebar.
Is there a way to achieve this?