About style of the Sidebar content

[AnZeng00]

Hi,
I want to modify the style of the sidebar item.

Could you please tell me the way?

[gvreddy04]

@AnZeng00 Thank you for trying the BlazorBootstrap components.

Yes, you can customize the sidebar colors.

Add the below CSS variables to the application CSS file and update the CSS variables according to your colors. It will work.

<style>
        :root {
            --bb-sidebar-width: 270px;
            --bb-sidebar-collapsed-width: 50px;
            --bb-sidebar-background-color: rgba(234, 234, 234, 1);
            --bb-sidebar-top-row-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-top-row-border-color: rgb(194,192,192);
            --bb-sidebar-title-text-color: rgb(0,0,0);
            --bb-sidebar-brand-icon-color: #6f42c1;
            --bb-sidebar-brand-image-width: 24px;
            --bb-sidebar-brand-image-height: 24px;
            --bb-sidebar-title-badge-text-color: rgb(255,255,255);
            --bb-sidebar-title-badge-background-color: rgba(25,135,84,var(--bs-bg-opacity,1));
            --bb-sidebar-navbar-toggler-icon-color: rgb(0,0,0);
            --bb-sidebar-navbar-toggler-background-color: rgba(0,0,0,0.08);
            --bb-sidebar-content-border-color: rgb(194,192,192);
            --bb-sidebar-nav-item-text-color: rgba(0,0,0,0.9);
            --bb-sidebar-nav-item-text-active-color-rgb: 0,0,0;
            --bb-sidebar-nav-item-text-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-text-active-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.9);
            --bb-sidebar-nav-item-background-hover-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
            --bb-sidebar-nav-item-group-background-color: rgba(var(--bb-sidebar-nav-item-text-active-color-rgb),0.08);
        }
</style>

Refer Customize sidebar:

• Docs: https://getblazorbootstrap.com/docs/components/sidebar#customize-sidebar
• Demos: https://demos.blazorbootstrap.com/sidebar#customize-sidebar

[AnZeng00]

Hi,
But I want to customize the nav-item height and font size, it seems there is no such properties in the style.

[gvreddy04]

@AnZeng00 In the upcoming releases, we will give CSS variables to customize the font size and nav item height. If you are good in CSS, you can still customize the font size and nav-item height by writing custom CSS overrides.

[AnZeng00]

I look forward to the new releases, could you please tell me probably when the new version release?

[gvreddy04]

@AnZeng00 We plan a release for every 2-3 weeks. But in case of bug fixes, it will release within a day or two.

[AnZeng00]

Thanks a lot.

[AnZeng00]

Hi,
Have you released this function for customize the font size and nav item height?

[gvreddy04]

@AnZeng00 This is not yet planned.