Customization Sidebar | Velzon - Flask Admin & Dashboard Template Documentation

Sidebar

How to Modify the Background Color of the Sidebar in SCSS

You can make changes in the src/scss/config/default/_variables-custom.scss file.

// Light Menu
$vertical-menu-bg:                                $white;
$vertical-menu-border:                            $white;

// Dark Menu
$dark-vertical-menu-bg:                           $primary;
$dark-vertical-menu-border:                       $primary;

// Gradient one
$vertical-menu-bg-gradient:                       linear-gradient(to right, var(--#{$prefix}primary), var(--#{$prefix}success));
$vertical-menu-border-gradient:                   var(--#{$prefix}success)
$twocolumn-menu-iconview-bg-gradient:             var(--#{$prefix}primary)

// Gradient-2
$vertical-menu-bg-gradient-2:                     linear-gradient(to right, var(--#{$prefix}info), var(--#{$prefix}secondary));
$vertical-menu-border-gradient-2:                 var(--#{$prefix}secondary)
$twocolumn-menu-iconview-bg-gradient-2:           var(--#{$prefix}info)

How to Modify the text color of the Sidebar in SCSS

You can make changes in the src/assets/scss/config/default/_variables-custom.scss file.

// Light Menu
$vertical-menu-item-color:                        darken($gray-600, 10%);
$vertical-menu-item-hover-color:                  $primary;
$vertical-menu-item-active-color:                 $primary;
$vertical-menu-sub-item-color:                    darken($gray-600, 4%);
$vertical-menu-sub-item-hover-color:              $primary;
$vertical-menu-sub-item-active-color:             $primary;
$vertical-menu-title-color:                       #919da9;

// Dark Menu
$dark-vertical-menu-item-color:                   #abb9e8;
$dark-vertical-menu-item-hover-color:             $white;
$dark-vertical-menu-item-active-color:            $white;
$dark-vertical-menu-sub-item-color:               #abb9e8;
$dark-vertical-menu-sub-item-hover-color:         $white;
$dark-vertical-menu-sub-item-active-color:        $white;
$dark-vertical-menu-title-color:                  #838fb9;

How to Modify the Background Color of the Sidebar in CSS

You can make changes in the src/assets/css/app.css or src/assets/css/app.min.css file.

// Light Sidebar                                                
:root[data-sidebar=light] {
    --vz-vertical-menu-bg:                            #fff;
    --vz-vertical-menu-border:                        #fff;
}

// Dark Sidebar                                                
:root[data-sidebar=dark] {
    --vz-vertical-menu-bg:                            #405189;
    --vz-vertical-menu-border:                        #405189;
}

// gradient Sidebar                                                
:root[data-sidebar=gradient] {
    --vz-vertical-menu-bg:                            linear-gradient(to right, var(--vz-primary), var(--vz-success));
    --vz-vertical-menu-border:                        var(--vz-success);
    --vz-twocolumn-menu-iconview-bg:                  var(--vz-primary);
}

How to Modify the layout size of the Sidebar in SCSS

You can make changes in the src/assets/scss/config/default/_variables-custom.scss file.

$vertical-menu-width:                             250px; // sidebar-size = lg
$vertical-menu-width-md:                          180px; // sidebar-size = md
$vertical-menu-width-sm:                          70px; // sidebar-size = sm

How to Modify the layout size of the Sidebar in CSS

You can make changes in the src/assets/scss/config/default/_variables-custom.scss file.

:root {
  --vz-vertical-menu-width:                       250px; // sidebar-size = lg
  --vz-vertical-menu-width-md:                    180px; // sidebar-size = md
  --vz-vertical-menu-width-sm:                    70px; // sidebar-size = sm
}