Laravel AdminLTE

Appearance

Basic Configuration ​

In order to change the package configuration, the configuration file should be published (a default task when installing this package). However, if you don't see the adminlte.php file inside your Laravel config folder, then publish the configuration file with the next command:

sh
php artisan adminlte:install --only=config

Now, you will be able to edit the config/adminlte.php file and setup the title, layout, menu, URLs, etc. On the next sections, we are going to review all the available configuration options. Let's start with the most basic ones.

Title ​

This is the default title for your admin panel, and goes into the title tag of your page. However, you can override it per page with the available title section. Optionally, you can also specify a title prefix and/or postfix.

The following config options are available:

  • title: The default title.
  • title_prefix: The title prefix.
  • title_postfix: The title postfix.

Favicons ​

Favicons could be used easily. There are two different ways to do this. Take in mind that all the favicons should be placed in the public/favicons/ folder. The next two combinations determines how the favicons will be used:

  • ['use_ico_only' => true, 'use_full_favicon' => false]

    With the previous configuration, the file public/favicons/favicon.ico will be used.

  • ['use_ico_only' => false, 'use_full_favicon' => true]

    With the previous configuration, multiple favicon files located on the public/favicons/ folder will be used. The current code to use multiple favicons is the next one:

    blade
    <link rel="shortcut icon" href="{{ asset('favicons/favicon.ico') }}"/>
<link rel="apple-touch-icon" sizes="57x57" href="{{ asset('favicons/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60" href="{{ asset('favicons/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72" href="{{ asset('favicons/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76" href="{{ asset('favicons/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114" href="{{ asset('favicons/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120" href="{{ asset('favicons/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144" href="{{ asset('favicons/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152" href="{{ asset('favicons/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ asset('favicons/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ asset('favicons/favicon-16x16.png') }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ asset('favicons/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96" href="{{ asset('favicons/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="192x192" href="{{ asset('favicons/android-icon-192x192.png') }}">
<link rel="manifest" crossorigin="use-credentials" href="{{ asset('favicons/manifest.json') }}">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="{{ asset('favicons/ms-icon-144x144.png') }}">

Google Fonts ​

By default, the provided admin panel layout includes some google fonts, and you should note that they are an external resource. However, this may introduce performance issues in environments where the internet access is restricted somehow. For those scenarios, you may use the next option to disable the usage of the external google fonts.

  • google_fonts.allowed: Whether to allow the inclusion of the external web font used by AdminLTE v4 (Source Sans 3). The font source can be changed on the assets configuration.

The logo is displayed at the upper left corner of your admin panel. You can use basic HTML code here if you want a simple text logo with a small image logo (e.g. 50 x 50 pixels), or you can use two images: one big (e.g. 210 x 33 pixels) and one small (e.g. 50 x 50 pixels). You can also change the sizes of the images and the alternate text for both logos. The available option are:

  • logo: The text logo content, HTML markup is accepted.
  • logo_img: The path to the small logo image. The recommend size is: 50x50px.
  • logo_img_class: Extra classes for the small logo image.
  • logo_img_xl: The path to the large logo image, if you set a image url here, then it will replace the text & small logo with one big logo. When the sidebar is collapsed it will displays only the small logo. The recommend size is: 210x33px.
  • logo_img_xl_class: Extra classes for the large logo image.
  • logo_img_alt: The alternate text for the logo images.

The next options allows you to enable, disable and/or configure the authentication logo. The authentication logo, when enabled, will be shown on the login and register pages as a replacement for the standard logo. When disabled, the standard admin panel logo will be shown on those pages instead.

  • auth_logo.enabled: Whether to enable the authentication logo.
  • auth_logo.img.path: The path to the logo image that will be used. This image should be available somewhere inside the public folder of your Laravel project (if you did not change the asset_url config).
  • auth_logo.img.alt: The alternative text to use when the image can't be found or isn't available.
  • auth_logo.img.class: The additional classes to use on the logo image.
  • auth_logo.img.width: The width (on pixels) to use for the image.
  • auth_logo.img.height: The height (on pixels) to use for the image.

Preloader Animation ​

The next options allows you to enable, disable and configure the preloader animation. The preloader animation, when enabled, will be shown while a page is loading, and then will be hidden automatically.

  • preloader.enabled: Whether to enable the preloader animation.
  • preloader.mode: The preloader animantion mode: fullscreen or cwrapper. On fullscreen mode (the default), the preloader animation will cover the entire page. When using cwrapper mode, the preloader animation will be attached into the content wrapper (main.app-main) element to avoid covering the sidebars and navbars.
  • preloader.img.path: The path to the logo image that will be used on the preloader animation. This image should be available somewhere inside the public folder of your Laravel project (if you did not change the asset_url config).
  • preloader.img.alt: The alternative text to use when the image can't be found or isn't available.
  • preloader.img.effect: The animation effect to use on the image. The accepted values are animation__shake, animation__wobble, animation__flipInX, animation__fadeIn, animation__fadeOut and animation__spin (the keyframes provided by the AdminLTE v4 stylesheet). Any other value leaves the image without animation.
  • preloader.img.width: The width (on pixels) to use for the image.
  • preloader.img.height: The height (on pixels) to use for the image.

If you don't want an image logo in your preloader (the one allowed by the configuration), you can setup a custom preloader content by using the yielded section @section('preloader'), for example:

blade
@extends('adminlte::page')
...
...
...
{{-- Setup Custom Preloader Content --}}

@section('preloader')
    <div class="spinner-border text-secondary" style="width: 4rem; height: 4rem;" role="status"></div>
    <h4 class="mt-4">Loading</h4>
@stop

User Menu ​

The user menu is displayed at the upper right corner of your admin panel. The available options for the user menu are:

  • usermenu_enabled

    Whether to enable the user menu instead of the default logout button.

  • usermenu_header

    Whether to enable the header section inside the user menu.

  • usermenu_header_class

    Extra classes for the header section of the user menu.

  • usermenu_image

    Whether to enable the user image for the usermenu & lockscreen.

CAUTION

For this feature to work, you will need to add an extra function named adminlte_image() that returns the user image path inside the User model, usually located on the app/User.php file. The recommend image size is: 160x160px.

  • usermenu_desc

    Whether to enable the user description for the usermenu.

CAUTION

For this feature to work, you will need to add an extra function named adminlte_desc() that returns the user description, inside the User model, usually located on the app/User.php file.

  • usermenu_profile_url

    Whether to enable if the user profile url can be set dynamically for the user instead of using the config option profile_url.

CAUTION

For this feature to work, you will need to add an extra function named adminlte_profile_url() inside the User model. The return value should be a string with the profile url path, not a route.

Code Example: ​

Here you have a code example for the User model with the custom image, description and profile url functions.

php
class User extends Authenticatable
{
    …

    public function adminlte_image()
    {
        return 'https://picsum.photos/300/300';
    }

    public function adminlte_desc()
    {
        return 'I\'m a nice guy';
    }

    public function adminlte_profile_url()
    {
        return 'profile/username';
    }
}

URLs ​

The next configuration options provides a way to setup the urls for the login, register and other links used on the admin panel.

  • use_route_url

    Whether to use route() instead of the url() Laravel method when internally generating the urls.

CAUTION

When set to true, the next set of URLs should be defined by using route names. For example: password.email on password_email_url, password.update on password_reset_url, etc.

NOTE

A route name that can not be resolved (because the route does not exist, or because it needs parameters) falls back to a plain url built from the same value, instead of aborting the request. Enabling the option on an application that misses one of these routes would otherwise break every page of the panel. So, when a link of the layout points at something like /home while you expected a named route, the route is the thing to check first.

  • dashboard_url

    Changes the dashboard/logo URL. This URL will be used, for example, when clicking on the upper left logo.

  • logout_url

    Changes the logout URL. This URL will be used when you click on the logout button.

  • logout_method

    Changes the logout send method, the available options are: GET, POST & null (Laravel default).

  • login_url

    Changes the login URL. This URL will be used when you click on the login button.

  • register_url

    Changes the register URL. Set this option to false or null to hide the register link shown on the login view.

  • password_reset_url

    Changes the password reset URL. This url should point to the view that displays the password reset form. Set this option to false or null to hide the password reset link shown on the login view.

  • password_email_url

    Changes the password email URL. This url should point to the view that displays the send reset link form.

  • profile_url

    Changes the user profile URL. When not false or null, it will displays a button in the dropdown user menu.

  • disable_darkmode_routes

    When set to true the dark mode routes won't be registered in your Laravel's application. Please note these routes are needed when color_mode.remember is disabled, since the package then drives the color mode with its own server side toggle, and also by the special menu item Navbar Darkmode Widget.