Upgrade Guide

From v2.3 to v2.4

HTML Changes

  • Change dist/js/app.min.js to dist/js/adminlte.min.js
  • Add data-widget="tree" to the sidebar menu. Specifically, it should look like this:
    <ul class="sidebar-menu" data-widget="tree">
  • Add .treeview to all li elements that contain sub menus in the sidebar menu. Example:
    <li class="treeview">
      <a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
        <span class="pull-right-container">
           <i class="fa fa-angle-left pull-right"></i>
        </span>
      </a>
      <ul class="treeview-menu">
        <li><a href="#">Link in level 2</a></li>
        <li><a href="#">Link in level 2</a></li>
      </ul>
    </li>
  • Change data-toggle="offcanvas" to data-toggle="push-menu"
  • If you are using the Todo List plugins, change $('.list').todolist() to $('.list').todoList() or use the new data-widget="todo-list".
  • Box widget changes:
    • Use $('.box').boxWidget(options) instead of $('.box').activateBox()
    • Use $('.box').boxWidget('toggle') instead of $('.box').toggleBox()
    • Use $('.box').boxWidget('remove') instead of $('.box').removeBox()
  • BoxRefresh plugin has been recreated, please review the docs.
  • To apply Google fonts, paste this code in the <head> section of your html files.
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">

From v1.x to v2.x

New Files

Make sure you update all CSS and JS files that are related to AdminLTE. Otherwise, the layout will not function properly. Most important files are AdminLTE.css, skins CSS files, and app.js.

Layout Changes

  1. The .wrapper div must be placed immediately after the body tag rather than after the header
  2. Change the .header div to .main-header <div class="main-header">
  3. Change the .right-side class to .content-wrapper <div class="content-wrapper">
  4. Change the .left-side class to .main-sidebar <div class="main-sidebar">
  5. In the navbar, change .navbar-right to .navbar-custom-menu <div class="navbar-custom-menu">

Navbar Custom Dropdown Menus

  1. The icons in the notification menu do not need bg-* classes. They should be replaced with contextual text color class such as text-aqua or text-red.

Login, Registration and Lockscreen Pages

There are major changes to the HTML markup and style to these pages. The best way is to copy the page's code and customize it.

And you should be set to go!

Mailbox

Mailbox got an upgrade to include three different views. The views are inbox, read mail, and compose new email. To use these views, you should use the provided HTML files in the pages/mailbox folder.

Note: the old mailbox layout has been deprecated in favor of the new one and will be removed by the next release.

PREMIUM TEMPLATE
MaterialPro

MaterialPro ─ $35

Material Bootstrap 4 Admin Template

Preview Buy Now

12+ purchases