Last Updated: 05/August/2019
By: Sean Ngu
Email: nguoksiong@live.co.uk

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email your question to my email nguoksiong@live.co.uk. Thanks so 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 #page-loader -->
    <div id="page-loader" class="fade show"><span class="spinner"></span></div>
    <!-- end #page-loader -->

    <!-- begin #page-container -->
    <div id="page-container" class="page-container fade page-sidebar-fixed page-header-fixed">
      <!-- begin #header -->
      <div id="header" class="header navbar-default"></div>
      <!-- end #header -->

      <!-- begin #sidebar -->
      <div id="sidebar" class="sidebar"></div>
      <div class="sidebar-bg"></div>
      <!-- end #sidebar -->

      <!-- begin #content -->
      <div id="content" class="content"></div>
      <!-- end #content -->

      <!-- begin theme-panel -->
      <div class="theme-panel"></div>
      <!-- end theme-panel -->

      <!-- begin scroll to top btn -->
      <a href="javascript:;" class="btn btn-icon btn-circle btn-success btn-scroll-to-top fade"
        data-click="scroll-top">
        <i class="fa fa-angle-up"></i>
      </a>
      <!-- end scroll to top btn -->
    </div>
    <!-- end page container -->

### C) Beginning of Page - top

Below code is used to detect the internet explorer for browser compatibility & styling setting usage.

    <!DOCTYPE html>
    <!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
    <!--[if !IE]><!-->
    <html lang="en">
    <!--<![endif]-->

### D) Page Head - top

Page head contains metadata, javascript and css files:

    <head>
      <meta charset="utf-8" />
      <title>Color Admin | Apple 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 BASE CSS STYLE ================== -->
      <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
      <link href="../assets/css/default/app.min.css" rel="stylesheet" />
      <!-- ================== END BASE CSS STYLE ================== -->
    </head>

### E) Top Menu - top

    <!-- begin #header -->
    <div id="header" class="header navbar-default">
      <!-- begin navbar-header -->
      <div class="navbar-header">
        ...
      </div>
      <!-- end navbar-header -->

      <!-- begin header-nav -->
      <ul class="navbar-nav navbar-right">
        <li>
          <form class="navbar-form">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Enter keyword" />
              <button type="submit" class="btn btn-search"><i class="ion-ios-search-strong"></i></button>
            </div>
          </form>
        </li>
        ...
        <li class="dropdown navbar-user">
          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
            <span class="user-image online"><img src="../assets/img/user/user-13.jpg" alt="" /></span>
            <span class="d-none d-md-inline">Adam Schwartz</span> <b class="caret"></b>
          </a>
          <div class="dropdown-menu dropdown-menu-right">
            ...
          </div>
        </li>
      </ul>
      <!-- end header navigation right -->
    </div>
    <!-- end #header -->

### F) Sidebar - top

    <!-- begin #sidebar -->
    <div id="sidebar" class="sidebar">
      <!-- begin sidebar scrollbar -->
      <div data-scrollbar="true" data-height="100%">
        <!-- begin sidebar nav -->
        <ul class="nav">
          <li class="nav-header">Navigation</li>
          <li class="has-sub">
            <a href="javascript:;">
              <b class="caret"></b>
              <i class="fa fa-th-large"></i>
              <span>Dashboard</span>
            </a>
            <ul class="sub-menu">
              <li><a href="#pages/index.html" data-toggle="ajax">Dashboard v1</a></li>
              <li><a href="#pages/index_v2.html" data-toggle="ajax">Dashboard v2</a></li>
            </ul>
          </li>
          ...
          <!-- begin sidebar minify button -->
          <li>
            <a href="javascript:;" class="sidebar-minify-btn" data-click="sidebar-minify">
              <i class="fa fa-angle-double-left"></i> <span>Collapse</span>
            </a>
          </li>
          <!-- end sidebar minify button -->
        </ul>
        <!-- end sidebar nav -->
      </div>
      <!-- end sidebar scrollbar -->
    </div>
    <div class="sidebar-bg"></div>
    <!-- end #sidebar -->

### G) 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="content">
    </div>
    <!-- end #content -->

### H) End of Page (Javascript) - top

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

      <!-- ================== BEGIN BASE JS ================== -->
      <script src="../assets/js/app.min.js"></script>
      <script src="../assets/js/theme/default.min.js"></script>
      <script>
        App.settings({
          ajaxMode: true,
          ajaxDefaultUrl: '#pages/index.html',
          ajaxType: 'GET',
          ajaxDataType: 'html'
        });
      </script>
      <!-- ================== END BASE JS ================== -->
    </body>
    </html>

### I) Page Options - top

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

#### Reset to default after page leave

    <script>
      App.setPageOption({
        clearOptionOnLeave: true
      });
    </script>

#### Sidebar Light

    <script>
      App.setPageOption({
        pageSidebarLight: true
      });
    </script>

#### Sidebar Transparent

    <script>
      App.setPageOption({
        pageSidebarTransparent: true
      });
    </script>

#### Sidebar Minified

    <script>
      App.setPageOption({
        pageSidebarMinified: true
      });
    </script>

#### Sidebar Position Right

    <script>
      App.setPageOption({
       pageSidebarRight: true
      });
    </script>

#### Sidebar Wide

    <script>
      App.setPageOption({
       pageSidebarWide: true
      });
    </script>

#### Boxed Layout

    <script>
      App.setPageOption({
       pageBoxedLayout: true
      });
    </script>

#### Full Height Page / Table Column Page NEW

    <script>
      App.setPageOption({
        pageContentFullWidth: true,
        pageContentFullHeight: true,
      });
    </script>