Layout and Styling Configuration

The next set of configuration options enables you to change the layout and style of your admin panel.

Layout & Styling Configuration
Layout
Auth View Classes
Admin Panel Classes
Sidebar
Control Sidebar

Layout

It's possible to change the admin panel layout, you can use a top navigation (navbar) only layout, a boxed layout with sidebar, or enable the fixed mode for the sidebar, the navbar or the footer.

Caution

Currently, you cannot use a boxed layout with a fixed navbar or a fixed footer. Also, do not enable layout_topnav and layout_boxed at the same time. Anything else can be mixed together.

The following config options are available:

• layout_topnav

  Enables/Disables the top navigation only layout, this will remove the sidebar and put all your links at the top navbar. Can't be mixed with layout_boxed.

Tip

When enabling layout_topnav, the recommendation is to also tune the classes_topnav_nav configuration to add the class navbar-expand-md or navbar-expand-lg instead of navbar-expand, in order to get a correct functionality of the hamburger button at low screen sizes.

• layout_boxed

  Enables/Disables the boxed layout that stretches width only to 1250px. Can't be mixed with layout_topnav.

• layout_fixed_sidebar

  Enables/Disables the fixed mode for the sidebar. Can't be mixed with layout_topnav.

• layout_fixed_navbar

  Enables/Disables the fixed mode for the navbar (top navigation), here you can use a value of true or an array for responsive usage. Can't be mixed with layout_boxed.

• layout_fixed_footer

  Enables/Disables the fixed mode for the footer, here you can use a value of true or an array for responsive usage. Can't be mixed with layout_boxed.

• layout_dark_mode

  Enables/Disables the dark mode, set this option to the boolean true to enable the dark mode.

Important

The layout_dark_mode configuration is only available for package version v3.6.0 or greater.

Responsive Usage

When using an array on the layout_fixed_navbar or layout_fixed_footer configuration options, you can disable or enable the fixed layout for specific viewport sizes.

The following keys are available to use inside the array, you can set them to true or false:

Key	Description
xs	Represent screens from 0px to 575.99px width
sm	Represent screens from 576px to 767.99px width
md	Represent screens from 768px to 991.99px width
lg	Represent screens from 992px to 1199.99px width
xl	Represent screens from 1200px or more width

Examples:

• ['xs' => true, 'lg' => false]:

  The element will be fixed from mobile to small tablet (<= 991.99px).

• ['lg' => true]:

  The element will be fixed starting from desktop (>= 992px).

• ['xs' => true, 'md' => false, 'xl' => true]:

  The element will be fixed for mobile (<= 767.99px) and extra large desktops (>= 1200px) but not for a small tablet and normal desktop (>= 768px & <= 1199.99px)

Authentication Views Classes

You can change the look and behavior of the authentication views (login, register, email verification, etc). The following config options are available:

• classes_auth_card

  Extra classes for the card box. Classes will be added to the element div.card.

• classes_auth_header

  Extra classes for the card box header. Classes will be added to the element div.card-header.

• classes_auth_body

  Extra classes for the card box body. Classes will be added to the element div.card-body.

• classes_auth_footer

  Extra classes for the card box footer. Classes will be added to the element div.card-footer.

• classes_auth_icon

  Extra classes for the icons (Font Awesome icons) used on the input fields.

• classes_auth_btn

  Extra classes for the submit buttons.

Default Style

The set of current default values and the rendered look is the next one:

'classes_auth_card' => 'card-outline card-primary',
'classes_auth_header' => '',
'classes_auth_body' => '',
'classes_auth_footer' => '',
'classes_auth_icon' => '',
'classes_auth_btn' => 'btn-flat btn-primary',

However, you can customize the options as you want to get some particular themes, for example:

Dark Theme Style

A dark background with light buttons and icons.

'classes_auth_card' => 'bg-gradient-dark',
'classes_auth_header' => '',
'classes_auth_body' => 'bg-gradient-dark',
'classes_auth_footer' => 'text-center',
'classes_auth_icon' => 'fa-fw text-light',
'classes_auth_btn' => 'btn-flat btn-light',

Lightblue Theme Style

A lightblue header background with lightblue icons.

'classes_auth_card' => '',
'classes_auth_header' => 'bg-gradient-info',
'classes_auth_body' => '',
'classes_auth_footer' => 'text-center',
'classes_auth_icon' => 'fa-lg text-info',
'classes_auth_btn' => 'btn-flat btn-primary',

Admin Panel Classes

You can change the look and behavior of the admin panel by adding extra classes to the body, brand, sidebar, sidebar navigation, top navigation and top navigation container.

The following config options are available:

• classes_body

  Extra classes for the body. From version v3.8.0 you may use the experimental sidebar-hidden class to hide the sidebar.

• classes_brand

  Extra classes for the brand. Classes will be added to element a.navbar-brand if layout_topnav is used, otherwise they will be added to element a.brand-link.

• classes_brand_text

  Extra classes for the brand text. Classes will be added to element span.brand-text.

• classes_content_header

  Classes for the content header container. Classes will be added to the container of the element div.content-header. If you left this empty, a default class container will be used when layout_topnav is used, otherwise container-fluid will be used as default.

• classes_content_wrapper

  Classes for the content wrapper container. Classes will be added to the container of the element div.content-wrapper.

• classes_content

  Classes for the content container. Classes will be added to the container of the element div.content. If you left this empty, a default class container will be used when layout_topnav is used, otherwise container-fluid will be used as default.

• classes_sidebar

  Extra classes for sidebar. Classes will be added to the element aside.main-sidebar. There are some built-in classes you can use here to customize the sidebar theme:

  • sidebar-dark-<color>
  • sidebar-light-<color>

  Where <color> is an AdminLTE available color.

• classes_sidebar_nav

  Extra classes for the sidebar navigation. Classes will be added to the element ul.nav.nav-pills.nav-sidebar. There are some built-in classes that you can use here:

  • nav-child-indent to indent the child items.
  • nav-compact to get a compact navigation style.
  • nav-flat to get a flat navigation style.
  • nav-legacy to get a legacy v2 navigation style.

• classes_topnav

  Extra classes for the top navigation bar. Classes will be added to the element nav.main-header.navbar. There are some built-in classes you can use here to customize the topnav theme:

  • navbar-<color>

  Where <color> is an AdminLTE available color.

Tip

The recommendation is to combine the classes navbar-<color> with navbar-dark or navbar-light.

• classes_topnav_nav

  Extra classes for the top navigation. Classes will be added to the element nav.main-header.navbar. When enabling layout_topnav the recommendation is to use navbar-expand-md to get items auto collapsed into an hamburger button on low screen sizes. Otherwise, stay with navbar-expand class.

• classes_topnav_container

  Extra classes for top navigation bar container. Classes will be added to the div wrapper inside element nav.main-header.navbar.

Sidebar

You can modify the sidebar properties, for example you can disable the collapsed mini sidebar mode, start with a collapsed sidebar, enable sidebar auto collapse on a specific screen size, enable sidebar collapse remember option, change the scrollbar theme or auto hide option, disable the sidebar navigation accordion and change the sidebar animation speed.

The following configuration options are available:

• sidebar_mini

  Enables/Disables the collapsed mini sidebar mode. You can use the 'lg' token to enable the sidebar mini mode for desktop and bigger screens (>= 992px), use the 'md' token to enable it for small tablet and bigger screens (>= 768px), use the 'xs' token to always enable the sidebar mini mode, or disable the sidebar mini mode at all with a null value.

Important

For package versions previous or equal to v3.6.0 you need to use true in replacement of the 'lg' token. Also, the 'xs' token is only available for package versions greater than v3.6.0.

• sidebar_collapse

  Enables/Disables the sidebar collapsed mode by default. If you set this option to true the sidebar will start on the collapsed mode.

• sidebar_collapse_auto_size

  Enables/Disables auto collapse of the sidebar by setting a minimum width bound that will be used to trigger the collapsed mode when reaching this bound or a lower size. The accepted values are: false to disable the feature or a positive integer value representing the minimum width bound.

• sidebar_collapse_remember

  Enables/Disables the collapsed remember script. If you set this option to true the state of the sidebar will be keep between page reloads.

• sidebar_collapse_remember_no_transition

  Enables/Disables the transition animation effect for the sidebar after a page reload. This option will only have effect if sidebar_collapse_remember option is enabled.

• sidebar_scrollbar_theme

  Changes the sidebar vertical scrollbar theme used when the sidebar is on the fixed mode. Possible values are: 'os-theme-light', 'os-theme-dark' or 'os-theme-none' to hide the scrollbar.

• sidebar_scrollbar_auto_hide

  Changes the sidebar scrollbar auto hide trigger action. This option controls the possibility to hide the visible scrollbars automatically after a certain action. The possible values are:

  • 'never' or 'n': The scrollbars never get hidden automatically.
  • 'scroll' or 's': The scrollbars get hidden automatically after a scroll.
  • 'leave' or 'l': The scrollbars get hidden automatically after the mouse has left the host-element.
  • 'move' or 'm': The scrollbars get hidden automatically after a scroll and after the mouse has stopped moving.

• sidebar_nav_accordion

  Enables/Disables the sidebar accordion navigation feature. When enabled, any already opened menu will be collapsed when expanding another one.

• sidebar_nav_animation_speed

  Changes the sidebar slide up/down animation speed (in milliseconds).

Control Sidebar (Right Sidebar)

Here you have the option to enable a right sidebar. When enabled, you can use the @section('right-sidebar') section to setup his content. The icon you configure will be displayed at the end of the top menu, and will show/hide the sidebar. The slide option will slide the sidebar over the content, while false will push the content without animation. You can also choose the sidebar theme (dark or light).

The following configuration options are available:

• right_sidebar

  Enables/Disables the right (control) sidebar.

• right_sidebar_icon

  Changes the icon that will be used to toggle the right sidebar.

• right_sidebar_theme

  Changes the theme of the right sidebar, the following options are available: 'dark' or 'light'.

• right_sidebar_slide

  Enables/Disables the slide animation.

• right_sidebar_push

  Enables/Disables pushing the content instead of overlaying for the right sidebar.

• right_sidebar_scrollbar_theme

  Change the right sidebar scrollbar theme. Possible values are: 'os-theme-light' (default), 'os-theme-dark' or 'os-theme-none' to hide the scrollbar.

• right_sidebar_scrollbar_auto_hide

  Changes the sidebar scrollbar auto hide trigger action. This option controls the possibility to hide the visible scrollbars automatically after a certain action. Default value is 'l'. The possible values are:

  • 'never' or 'n': The scrollbars never get hidden automatically.
  • 'scroll' or 's': The scrollbars get hidden automatically after a scroll.
  • 'leave' or 'l': The scrollbars get hidden automatically after the mouse has left the host-element.
  • 'move' or 'm': The scrollbars get hidden automatically after a scroll and after the mouse has stopped moving.