Admin Template

Color Admin

“Ajax Version” Documentation by “Sean Ngu” v5.4.2

Updated on: 27/November/2024
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) File Structure - top

File structure overview for Ajax Version

template_ajax/
├── index.html
└── pages/
    └── /* list of page html file here */

B) Page Structure - top

Below is the code from template_ajax/index.html which include the page loader, header, sidebar, page content and theme panel. You may remove the component if you are not using it.

<!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <span class="spinner"></span>
</div>
<!-- END #loader -->

<!-- BEGIN #app -->
<div id="app" class="app app-header-fixed app-sidebar-fixed">
  <!-- BEGIN #header -->
  <div id="header" class="app-header"></div>
  <!-- BEGIN #header -->
  
  <!-- BEGIN #sidebar -->
  <div id="sidebar" class="app-sidebar" data-bs-theme="dark">
    <!-- BEGIN scrollbar -->
    <div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
      ...
    </div>
    <!-- END scrollbar -->
  </div>
  <div class="app-sidebar-bg" data-bs-theme="dark"></div>
  <div class="app-sidebar-mobile-backdrop">
    <a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
  </div>
  <!-- END #sidebar -->
  
  <!-- BEGIN #content -->
  <div id="content" class="app-content"></div>
  <!-- END #content -->
  
  <!-- BEGIN theme-panel -->
  <div class="theme-panel"></div>
  <!-- END theme-panel -->
    
  <!-- BEGIN scroll-top-btn -->
  <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top" 
    data-toggle="scroll-to-top">
    <i class="fa fa-angle-up"></i>
  </a>
  <!-- END scroll-top-btn -->
</div>
<!-- END #app -->

C) Page Head - top

Page head contains metadata, javascript and css files:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Color Admin | Default Design</title>
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
  <meta content="" name="description" />
  <meta content="" name="author" />
  
  <!-- ================== BEGIN core-css ================== -->
  <link href="../assets/css/vendor.min.css" rel="stylesheet" />
  <link href="../assets/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
  
  <!-- OR without vendor.min.css -->
  
  <!-- ================== BEGIN core-css ================== -->
  <link href="../assets/plugins/animate.css/animate.min.css" rel="stylesheet" />
  <link href="../assets/plugins/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet" />
  <link href="../assets/plugins/jquery-ui-dist/jquery-ui.min.css" rel="stylesheet" />
  <link href="../assets/plugins/pace-js/themes/black/pace-theme-flash.css" rel="stylesheet" />
  <link href="../assets/plugins/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet" />
  <link href="../assets/css/default/app.min.css" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
</head>
<body>

D) Top Menu - top

<!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <a href="index.html" class="navbar-brand"><span class="navbar-logo"></span> <b>Color</b> Admin</a>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <!-- END navbar-header -->
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item navbar-form">
      <form action="" method="POST" name="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Enter keyword" />
          <button type="submit" class="btn btn-search"><i class="fa fa-search"></i></button>
        </div>
      </form>
    </div>
    ...
    <div class="navbar-item navbar-user dropdown">
      <a href="#" class="navbar-link dropdown-toggle d-flex align-items-center" 
        data-bs-toggle="dropdown">
        <img src="../assets/img/user/user-13.jpg" alt="" /> 
        <span>
          <span class="d-none d-md-inline">Adam Schwartz</span>
          <b class="caret"></b>
        </span>
      </a>
      <div class="dropdown-menu dropdown-menu-end me-1">
        ...
      </div>
    </div>
  </div>
  <!-- END header-nav -->
</div>
<!-- END #header -->

E) Sidebar - top

<!-- BEGIN #sidebar -->
<div id="sidebar" class="app-sidebar" data-bs-theme="dark">
  <!-- BEGIN scrollbar -->
  <div class="app-sidebar-content" data-scrollbar="true" data-height="100%">
    <!-- BEGIN menu -->
    <div class="menu">
      <div class="menu-header">Navigation</div>
      <div class="menu-item has-sub">
        <a href="javascript:;" class="menu-link">
          <div class="menu-icon"><i class="fa fa-th-large"></i></div>
          <div class="menu-text">Dashboard</div>
          <div class="menu-caret"></div>
        </a>
        <div class="menu-submenu">
          <div class="menu-item">
            <a href="#pages/index.html" data-toggle="ajax" class="menu-link">
              <div class="menu-text">Dashboard v1</div>
            </a>
          </div>
          <div class="menu-item">
            <a href="#pages/index_v2.html" data-toggle="ajax" class="menu-link">
              <div class="menu-text">Dashboard v2</div>
            </a>
          </div>
        </div>
      </div>
      
      <!-- BEGIN minify-button -->
      <div class="menu-item d-flex">
        <a href="javascript:;" class="app-sidebar-minify-btn ms-auto" data-toggle="app-sidebar-minify">
          <i class="fa fa-angle-double-left"></i>
        </a>
      </div>
      <!-- END minify-button -->
    </div>
    <!-- END menu -->
  </div>
  <!-- END scrollbar -->
</div>
<div class="app-sidebar-bg" data-bs-theme="dark"></div>
<div class="app-sidebar-mobile-backdrop">
  <a href="#" data-dismiss="app-sidebar-mobile" class="stretched-link"></a>
</div>
<!-- END #sidebar -->

F) Page Content - top

Page content consists of page title, breadcrumbs and page's main body. HTML code of Content container as shown below: 

<!-- BEGIN #content -->
<div id="content" class="app-content"> 
</div>
<!-- END #content -->

G) End of Page (Javascript) - top

Javascript files loaded in the end of page. This will reduce page load time. 

  <!-- ================== BEGIN core-js ================== -->
  <script src="../assets/js/vendor.min.js"></script>
  <script src="../assets/js/app.min.js"></script>
  <script>
    App.settings({
      ajaxMode: true,
      ajaxDefaultUrl: '#pages/index.html',
      ajaxType: 'GET',
      ajaxDataType: 'html'
    });
  </script>
  <!-- ================== END core-js ================== -->
  
  <!-- OR without vendor.min.js -->
  
  <!-- ================== BEGIN core-js ================== -->
  <script src="../assets/plugins/pace-js/pace.min.js"></script>
  <script src="../assets/plugins/jquery/dist/jquery.min.js"></script>
  <script src="../assets/plugins/jquery-ui-dist/jquery-ui.min.js"></script>
  <script src="../assets/plugins/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="../assets/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js"></script>
  <script src="../assets/plugins/js-cookie/dist/js.cookie.js"></script>
  <script src="../assets/js/app.min.js"></script>
  <script>
    App.settings({
      ajaxMode: true,
      ajaxDefaultUrl: '#pages/index.html',
      ajaxType: 'GET',
      ajaxDataType: 'html'
    });
  </script>
  <!-- ================== END core-js ================== -->
</body>
</html>

H) Page Options - top

Here is the general javascript option for the each case of page options.

<script>
  App.setPageOption({
    appClass: '',
    appContentClass: '',
    appContentFullHeight: false,
    appSidebarLight: false,
    appSidebarEnd: false,
    appSidebarWide: false,
    appSidebarMinified: false,
    appSidebarTwo: false,
    appSidebarTransparent: false,
    appSidebarSearch: false,
    appTopMenu: false,
    appWithoutHeader: false,
    appWithoutSidebar: false,
    appHeaderInverse: false,
    appBoxedLayout: false,
    clearOptionOnLeave: false
  });
</script>

I) Dark Mode - top

Add the data-bs-theme="dark" attribute to <html> in template_ajax/index.html order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load. 
<html lang="en" data-bs-theme="dark">

J) Switch Design - top

Apple Design

  1. Change the base css file from default to apple in template_ajax/index.html.
    <link href="../assets/css/apple/app.min.css" rel="stylesheet" />
<script src="../assets/plugins/ionicons/dist/ionicons/ionicons.js"></script>
  2. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <ion-icon name="pulse-outline" class="bg-gradient-blue"></ion-icon>
</div>

Facebook Design

  1. Change the base css file from default to facebook in template_ajax/index.html.
    <link href="../assets/css/facebook/app.min.css" rel="stylesheet" />
  2. Add the class data-bs-theme="dark" attribute to the .app-header container in template_ajax/index.html.
    <div id="header" class="app-header" data-bs-theme="dark">
  ...
</div>

Transparent Design

  1. Change the base css file from default to facebook in template_ajax/index.html.
    <link href="../assets/css/transparent/app.min.css" rel="stylesheet" />
  2. Add the .app-cover next to the <body> tag in template_ajax/index.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the base css file from default to facebook in template_ajax/index.html.
    <link href="../assets/css/google/app.min.css" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_ajax/index.html.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_ajax/index.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the base css file from default to material in template_ajax/index.html.
    <link href="../assets/css/material/app.min.css" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_ajax/index.html.
    <div id="app" class="app app-header-fixed app-sidebar-fixed app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_ajax/index.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_ajax/index.html AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" data-toggle="app-header-floating-form" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close" data-dismiss="app-header-floating-form">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_ajax/index.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->