Edit

How To Customize the UI

Look and feel

Customize the menu or sidebar

During installation, Backpack publishes a few files in you resources/views/vendor/backpack/base/inc folder. In there, you'll also find:

sidebar_content.php
topbar_left_content.php
topbar_right_content.php

Change those files as you please.

Customize the dashboard

The dashboard is shown from Backpack\Base\app\Http\Controller\AdminController.php::dashboard(). If you take a look at that method, you'll see that the only thing it does is to set a title, breadcrumbs, and return a view: backpack::dashboard.

In order to place something else inside that view, like widgets, simply publish that view in your project, and Backpack will pick it up, instead of the one in the package. Create a resources/views/vendor/backpack/base/dashboard.blade.php file:

@extends(backpack_view('blank'))

@php
    $widgets['before_content'][] = [
        'type'        => 'jumbotron',
        'heading'     => trans('backpack::base.welcome'),
        'content'     => trans('backpack::base.use_sidebar'),
        'button_link' => backpack_url('logout'),
        'button_text' => trans('backpack::base.logout'),
    ];
@endphp

@section('content')
  <p>Your custom HTML can live here</p>
@endsection

To use information from the database, you can:

use view composers to push variables inside this view, when it's loaded;
load all your dashboard information using AJAX calls, if you're loading charts, reports, etc, and the DB queries might take a long time;
use the full namespace for your models, like \App\Models\Product::count();

Take a look at the widgets we have - you can easily use those in your dashboard. You can also add whatever HTML you want inside the content block - check the Backstrap HTML Template for design components you can copy-paste to speed up your custom HTML.

Customizing the design of the menu / sidebar / footer

In config/backpack/base.php you'll notice there are variables where you can change exactly what CSS classes are placed on the HTML elements that represent the header, body, sidebar and footer:

    // Horizontal navbar classes. Helps make the admin panel look similar to your project's design.
    'header_class' => 'app-header bg-light border-0 navbar',
        // Try adding bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan
        // You might need to add "navbar-dark" too if the background color is a dark one.
        // Add header-fixed if you want the header menu to be sticky

    // Body element classes.
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
        // Try sidebar-hidden, sidebar-fixed, sidebar-compact, sidebar-lg-show

    // Sidebar element classes.
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
        // Remove "sidebar-transparent" for standard sidebar look 
        // Try "sidebar-light" or "sidebar-dark" for dark/light links
        // You can also add a background class like bg-dark, bg-primary, bg-secondary, bg-danger, bg-warning, bg-success, bg-info, bg-blue, bg-light-blue, bg-indigo, bg-purple, bg-pink, bg-red, bg-orange, bg-yellow, bg-green, bg-teal, bg-cyan

    // Footer element classes.
    'footer_class' => 'app-footer',

Our default design might not be pleasant for your, or you might need to make the UI integrate better into your project. We totally understand. You can use the classes above to make it look considerably different.

You'll find a few examples below - but you should use which classes you want to get the result you need.

Backstrap

Transparent top menu, transparent sidebar, transparent footer. This is the default. This is what we think is best for most users, from our 8+ years of experience building admin panels. Prioritising content over menus.

Backstrap design

    'header_class' => 'app-header bg-light border-0 navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar sidebar-pills bg-light',
    'footer_class' => 'app-footer',

Inspired by CoreUI

White top menu, dark sidebar.

CoreUI design

    'header_class' => 'app-header navbar',
    'body_class' => 'app aside-menu-fixed sidebar-lg-show',
    'sidebar_class' => 'sidebar',
    'footer_class' => 'app-footer d-none',

Inspired by Github

Black top menu, white sidebar.

CoreUI design