Make Admin Template Documentation

Template Structure

The general template structure is the same throughout the template. All template files have fixed structure consisting of header, top menu, main sidebar menu, chat menu and page content.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- HEAD SECTION -->
</head>
<!-- BEGIN BODY -->

<body class="fixed-topbar fixed-sidebar theme-sdtl color-default">
    <section>
        <div class="sidebar">
            <!-- SIDEBAR -->
        </div>
        <!-- BEGIN MAIN CONTENT -->
        <div class="main-content">
            <div class="topbar">
                <!-- TOPBAR -->
            </div>
            <div class="page-content">
                <!-- PAGE CONTENT -->
                <div class="row">
                    <div class="col-lg-12">
                        Your page content
                    </div>
                </div>
            </div>
        </div>
        <!-- END MAIN CONTENT -->
    </section>
    <div class="loader-overlay">
        <!-- PRELOADER -->
    </div>
    <div class="sideview">
        <!-- SIDEBAR -->
    </div>
</body>

</html>

Sidebar Structure

Sidebar is divided if 3 main parts:sidebar top, sidebar nav and sidebar widget

<!-- BEGIN SIDEBAR -->
<div class="sidebar">
  <div class="logopanel">
      <!-- LOGO -->
  </div>
  <div class="sidebar-inner">
      <div class="sidebar-top">   
          <!-- TOP ELEMENT: SEARCH, IMAGE -->
      </div>
      <ul class="nav nav-sidebar">
        <!-- SIDEBAR MENU -->
        <li><a href="my-link.html"><i class="icon-home"></i> <span>Menu Element</span></a></li>
      </ul>
      <div class="sidebar-widgets">
        <!-- SIDEBAR WIDGET -->
      </div>
      <div class="sidebar-footer clearfix">
          <!-- QUICK ACCESS -->
      </div>
  </div>
</div>
<!-- END SIDEBAR -->

Submenu Elements

You can add easily submenu to your menu by adding a class to li element and to ul like this:

<li class="nav-parent"><a href="#"><i class="icon-puzzle"></i> <span>Your menu</span> <span class="fa arrow"></span></a>
  <ul class="children collapse">
    <li><a href="builder-email.php">Submenu 1</a></li>
    <li><a href="builder-page.php">Submenu 2</a></li>
    <li><a href="builder-admin.php">Submenu 3</a></li>
  </ul>
</li>

Topbar Structure

Sidebar is divided if 2 main parts:sidebar top, sidebar nav and sidebar widget

<!-- BEGIN TOPBAR -->
<div class="topbar">
  <div class="header-left">
    <div class="topnav">
        <a class="menutoggle"><button class="menu__handle"><span>Menu</span></button></a>
          <!-- LEFT TOPBAR: MENU OR ICONS -->
    </div>
  </div>
  <div class="header-right">
    <ul class="header-menu nav navbar-nav">
      <li class="dropdown" id="language-header">
          <!-- BEGIN LANGUAGE DROPDOWN MENU -->
      </li>
      <li class="dropdown" id="notifications-header">
          <!-- NOTIFICATION DROPDOWN MENU --> 
      </li>
      <li class="dropdown" id="messages-header">
          <!-- MESSAGES DROPDOWN MENU -->
      </li>
      
      <li class="dropdown" id="user-header">
          <!-- USER DROPDOWN MENU -->
      </li>
    </ul>
  </div>
  <!-- END HEADER RIGHT -->
</div>
<!-- END TOPBAR -->

Topbar Left Menu

You can left menu to topbar

<div class="topnav">
    <a class="menutoggle"><button class="menu__handle"><span>Menu</span></button></a>
    <ul class="nav nav-horizontal">
        <li class="active">
          <a href="app-mailbox.php">
            <span class="pull-right badge badge-primary">8</span><i class="icon-envelope"></i> <span>Menu 1</span>
          </a>
        </li>
        <li><a href="email.html"><i class="icon-bar-chart"></i><span>Menu 2</span>
        </a>
        </li>
        <li class="nav-parent">
          <a href="#" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" data-delay="30">
            <i class="fa fa-list"></i>Menu 3<i class="icons-arrows-06"></i>
          </a>
          <ul class="dropdown-menu children">
              <li><a href="#">Submenu 1</a></li>
              <li><a href="#">Submenu 2</a></li>
              <li><a href="#">Submenu 3</a></li>
          </ul>
        </li>
        <li><a href="email.html"><i class="icon-notebook"></i> <span>Menu 4</span></a></li>
    </ul>
</div>