Glad to hear that 
This reordering method does not hold, in my experience, for all browsers. It appears the variables are cached within the browser in come fashion. Further each browser requires a separate reordering. Guest on a site will NOT see the same list as the developer does.
This does not have the ability to create folded/unforled/dropdown-like menu items in the sidebar, right?
Or am I wrong here?
Thatâs right, it doesnât have that ability. Check this discussion.
Hi!. Could someone point me in the right direction regarding this? I´ve managed to have it installed and configured with this code:
title: Hi Flor!
title_color: white
sidebar_background: "#c5a991"
text_color: white
icon_color: white
secondary: ""
icon_color_selected: white
text_color_selected: white
sidebar_button_color: white
selection_opacity: 0.4
order:
- item: Flor
order: 1
- item: Tablet
order: 2
- item: HACS
order: 3
- item: Studio Code Server
order: 4
- item: Zigbee2MQTT
order: 5
- item: Developer tools
order: 6
- item: Settings
order: 7
- item: Overview
hide: true
- item: Energy
hide: true
- item: Logbook
hide: true
- item: History
hide: true
- item: Backups
hide: true
- item: Browser Mod
hide: true
- item: Calendar
hide: true
- item: ESPHome Builder
hide: true
- item: Media
hide: true
- item: Node-RED
hide: true
exceptions:
- user:
- Federico
title: Hi Fede
order:
- item: Overview
hide: false
- item: Tablet
- item: Flor
- item: HACS
- item: Studio Code Server
- item: Zigbee2MQTT
- item: Developer tools
- item: Settings
- item: Energy
hide: true
- item: Logbook
hide: true
- item: History
hide: true
- item: Backups
hide: false
- item: Browser Mod
hide: true
- item: Calendar
hide: true
- item: ESPHome Builder
hide: true
- item: Media
hide: true
- item: Node-RED
hide: true
And this is the result I get:
1- Is there a way to round the right edges of the sidebar?
2- Is there a way to replace the title with the person card (Image & âFlorâ)
3- How can I change the size of the text?
Thank you
1 . You can use a custom style for that:
styles: |
:host {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
}
But you need to be aware that this will not change the Home Assistant layout, so most probably you will get something that you donât expect in desktop. Instead of the header and the dashboard, what lies below the sidebar is the background of the page. For mobile devices, the sidebar is over the layout, so it should work with some customisations.
2 . You will need to make use of custom CSS for that, just inspect the elements and write your custom CSS inside the styles option. With some absolute positioning and some tweaks you should be able to move the profile to the top.
3 . The same, with custom CSS, for example, the next code will increase the font-size of the items text:
styles: |
.item-text {
font-size: 18px;
}
As a side note: Your âFedericoâ exception doesnât make much sense, it has multiple items just with the item option and without any personalisation, you should be able to remove those.
Hi! First of all, thank for your reply and taking the time to read me. The problem I face is that no matter what selector I use, I can´t seem to be targeting the correct selector.
Would you help me on how to point to this element? I have added manually the background-color: red in my dev tools, but no matter what I try I can´t seem to get the style to modify any item outside the host.
I think not being able to get outside the host it´s blocking me from everything you suggested.
Sidenote regarding the âFedericoâ. Yes, I know, but I´m first trying to finish the first one since as you can see I´m a disaster regarding frontend.
Once again, thanks!
Thatâs what I mentioned that it will not do what you expected. You will not be able to style elements outside the sidebar using the custom-sidebar styles option. This option is to change the styles only inside the sidebar. To change styles outside the sidebar you need to use generic solutions as card-mod.
The items texts and the profile are inside the sidebar, not outside, so you should be able to change the item texts font-size and the profile position using the styles option.
Perfect then
Hello, thanks for your great Mod!
I have a problem, i installed Card-Mod and the Sidebar changes a little bit:
Before Card Mod:
After Card Mod:
âDevelopers Toolsâ changes, and the item box are rounded do you know why?
Thanks!
still believe (we chatted in card_mod thread beforeâŚ) there is something installed in your system that interferes.
You must have a theme installed, because your screenshots dont show the default theme.
inside that theme, check for items with sidebar, and show us what you have there
it probably also sets another border-radius on a specific element, otherwise it would be just as in default?
fwiw, Ive just re-checked in my system and set to default theme nicely shows those item boxes as in your first picture (and I have card_mod installed)
I cannot say without more information. The easiest is just to go to those elements with Chrome dev tools and check what is adding those styles.
But I suspect that it will occur independently if custom-sidebar is installed or not. So I would start by uninstalling custom-sidebar and checking if the same happens or not.
Yes, this is also something to try.
Yes you are right! I have a Theme! I will try to uninstall this, maybe the theme is the problem! Thanks for your help!!!
I will try with google chrome! And maybe uninstall the theme! Thanks!!!
Itâs now fixed, the problem was with my theme. Specifically with the âwhite-spaceâ style. I changed it in my theme settings and now it works perfectly. Thank you very much.
1 Like
I like this look cuz it reminds me of material3, how can I add a border radius to the selected item, donât see it under themeable config so assuming itâs a custom style thing.
He is using a theme. You can use a card-mod theme or if you are using Custom Sidebar just add this to the styles option:
styles: |
:host([expanded]) .iron-selected paper-icon-item::before,
:host([expanded]) a:not(.iron-selected):focus::before {
border-radius: 40px;
}
2 Likes
Thank you! Just thought Iâd point out it seems like it applies the border-radius after its selected only but thatâs fine and barely noticeable.
Also I do have card-mod edited theme but not sure what to put in my theme to achieve the same since this might be better in there.
![Screen Recording 2025-01-28 at 12.07.08 AM.mov [video-to-gif output image]](https://community-assets.home-assistant.io/original/4X/1/c/f/1cfa9a3dfa6ea1fd6d62ecd53d1d1509af7efaa9.gif)
Yes im using the Theme: Material You!!
If I write a style in the Custom Sidebar settings this doesnât override my Theme settings right? I tried that just now and it didnât work.