Hey @DBuit how did you manage to get the “active” menu item rounded in your examples you show? "active=true"doesnt work and i can’t get it working. Can you maybe share the config of the screenshot you added in the github repo?
Thanks a lot!
Hello guys,
I has been a while, but i’m back to work on my lovelace cards 
I will try to make sure they keep working and fix bugs and maybe and some new stuff.
I just released a small update with some changes to make it render better: https://github.com/DBuit/sidebar-card/releases/tag/0.1.7
I’m working on the bottom card to make sure it renders for everyone it is really buggy…
2 Likes
You are awesome
Keep the good work
Thank you @DBuit The "active"status is now working, but only if I use the “above” menu and not the one in the sidebar.
Attached the screenshot to explain. If I use the items in the menu sidebar, it’s not switching. If i click on the menu items on the top (or refresh the page manually), it does change to the right active menu item…
Any help would be great
Yes! Works like a charm now!
Thanks so much
Now Only get back the possibility to add a card in the bar
Also, is there a possibility to make the title “center” aligned also? I tried it in code but I think it’s not configurable (such as clock and date and such)
style: |
:host {
--sidebar-background: rgba(0, 0, 0, 0.3);
--sidebar-text-color: #f0f0f0;
}
.sidebarMenu li.active {
background-color: rgba(35, 39, 41, 0.6)!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{
text-align: center;
}
I mean the “title” part in the code above
Hello guys,
for the people using the sidebar with a bottomCard.
I just released small update with an attempt to fix this: https://github.com/DBuit/sidebar-card/releases/tag/0.1.7.2
Try it out let me know if it works
Hi,
do this to center the title:
h1 {
text-align:center;
}
V 0.1.7.2 does not update entities in de bottomCard
Use V 0.1.7.3 => https://github.com/DBuit/sidebar-card/releases/tag/0.1.7.3
1 Like
I have the same issue with my last card on mobile where panel= true (with the homekit card from you @DBuit ) Can you maybe see why even tho my mobile: 0 on sidebar width… it is showing through?
So sorry for all the questions to you all…
@DBuit
So I’m trying to get a media card inside of the sidebar. But whenever the content of themediacard is switching, the card is also resizing (and starting to get bigger then the actual bar).
I have this code now:
bottomCard:
type: 'custom:mini-media-player'
cardOptions:
entity: media_player.spotify_mart
style: |
ha-card {
border-radius: 12px;
overflow: hidden !important;
box-shadow: none !important;
width: 300px;
height: auto;
align: right;
margin-bottom: 100px
}
hide:
name: true
power: true
source: true
volume: true
views:
!include_dir_merge_list views/
How can I make the width of the mediaplayer be static, and center aligned in the sidebar? If I resize the sidebar///switch to tablet view with other resolution for example, it’s messing up.
here are 2 examples to show.
Thanks !
how to resize card of bottom card
its working, nice
how to center bottom card
Options for bottomCard are minimal i will work on options to better position the card
Just updated the card: https://github.com/DBuit/sidebar-card/releases/tag/0.1.7.4
You can do something like this for example:
bottomCard:
type: custom:mini-media-player
cardOptions:
entity: media_player.keuken
cardStyle: |
:host {
width: 100%;
}
But when you change style of the card it could look weird so you have to tweak more css maybe to make it fit nicely
Thanks, and what about this issue:
The homekit card (panel-true = causing it, because if i disable it, it works…)
is showing the sidebar, even when sidebar is 0 on phone example of not good and good:
Strange more people have that problem, but i don’t… and i have panel = true
What is your config? can you share the full config of you sidebar
Sidebar:
sidebar:
title: "Sidebar title"
digitalClock: true
date: true
bottomcard: true
style: |
:host {
--sidebar-background: rgba(0, 0, 0, 0.5);
--sidebar-text-color: #f0f0f0;
}
.sidebarMenu li.active {
background-color: rgba(35, 39, 41, 0.6)!important;
icon-size: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
h1 {
text-align:center;
}
# width in percentage (dont add the %)
width:
mobile: 0
tablet: 15
desktop: 15
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
active: true
icon: mdi:home
- action: navigate
navigation_path: /lovelace/floorplan
name: Floorplan
active: true
icon: mdi:floor-plan
- action: navigate
navigation_path: /lovelace/test
name: test
active: true
icon: mdi:account-cog
- action: navigate
navigation_path: /lovelace/homekittest
name: homekittest
active: true
icon: mdi:account
template: |
<li>
{% if now().hour < 5 %} Goedenacht {{'\U0001F634'}}
{% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goedemiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
bottomCard:
type: 'custom:mini-media-player'
cardOptions:
entity: media_player.spotify_mart
hide:
name: true
power: true
source: true
volume: true
cardStyle: |
:host {
width: 100%;
}
ha-card {
border-radius: 12px;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: 42px
}
views:
!include_dir_merge_list views/
The view that is having the issue:
- title: Homekittest
path: homekittest
panel: true
cards:
- type: "custom:homekit-card"
home: true
rules: |
{% 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 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 %}
title: "Demo"
useBrightness: false
titleColor: "#FFF"
enableColumns: true
# statePositionTop: true
entities:
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Lichtstrip
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.beganegrond
name: Lichtstrip
icon: mdi:led-strip-variant
popupExtend:
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: "#FDCA64"
name: ontspannen
- service: scene.turn_on
service_data:
entity_id: scene.helder
color: "#FFE7C0"
name: helder
- service: scene.turn_on
service_data:
entity_id: scene.concentreren
color: "#BBEEF3"
name: concentreren
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
- entity: light.zithoek
name: Zithoek
icon: mdi:floor-lamp
- entity: light.eettafel
name: Eettafel
icon: mdi:ceiling-light
- entity: light.kookeiland
name: Kookeiland
icon: mdi:ceiling-light
- column: 2
tileOnRow: 3
entities:
- title: Buiten verlichting
entities:
- entity: light.voordeurlicht
name: Voordeur
- entity: light.buitenverlichting_achter
name: Achter
- entity: light.buitenverlichting_bomen
spin: true
name: Bomen
- row: 2
columns:
- column: 1
tileOnRow: 4
entities:
- title: "Overig"
entities:
- card: custom:blinds-tile-card
tap_action:
action: more-info
entity: input_number.blindone
cardOptions:
name: Luxaflex
entities:
- entity: input_number.blindone
positions:
- 60
- 0
- -45
- entity: input_number.blindtwo
positions:
- 75
- 0
- -50
- entity: input_number.blindthree
positions:
- -65
- 0
- 50
- card: custom:mini-graph-card
noPadding: true
cardOptions:
entities:
- sensor.wasmachine_energieverbruik
- entity: binary_sensor.wasmachine_status
- entity: weather.weersverwachting
- column: 2
tileOnRow: 3
entities:
- title: Muziek
entities:
- entity: media_player.keuken
icon: mdi:speaker-wireless
offIcon: 'mdi:garage'
offStates:
- "off"
- "unavailable"
- "paused"
- entity: media_player.woonkamer
icon: mdi:speaker-wireless
offStates:
- "off"
- "unavailable"
- "paused"
- entity: media_player.slaapkamer
icon: mdi:speaker-wireless
offStates:
- "off"
- "unavailable"
- "paused"
- row: 3
columns:
- column: 3
entities:
- title: Overig
entities:
- entity: switch.doorbell_chime_active
spin: true
- entity: switch.doorbell_chime
- entity: switch.doorbell_restart
- entity: binary_sensor.doorbell_button
I know entities in the card doenst exist and such… Just making the built of the interface/design first before using real entities and such.
Thanks for all your effort @DBuit
DBuit
Thanks for good work, you are awesome
martheijnen
What is that weather card