Admin Template

Color Admin

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

Last Updated: 28/March/2024
By: Sean Ngu

If you have any questions that are beyond the scope of this help file, please feel free to inbox me your question or send me an email via support email. Thanks so much!

* Support email can be found via downloaded version of Color Admin

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" />
<link href="../assets/plugins/ionicons/css/ionicons.min.css" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</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 -->