Admin Structure
Admin Structure
This section will give you a brief description of our admin structure code.
1. Header Section : This is the default navbar section. It contains :
a. Sidebar toggle button.
b. Language Dropdown
c. Message Dropdown
d. Notification Dropdown
e. Search Bar
f. Apps Dropdown
g. User Profile with Dropdown
h. Control Sidebar toggle button.
Note:- These categories are defined by us and you can modify as per your needs :)
<!-- BEGIN NAVBAR -->
<header class="header navbar fixed-top navbar-expand-sm" role="banner">
<ul class="navbar-nav flex-row">
...........
</ul>
<ul class="navbar-nav flex-row mr-lg-auto ml-lg-0 ml-auto">
...........
</ul>
<ul class="navbar-nav flex-row ml-lg-auto">
...........
</ul>
</header>
<!-- END NAVBAR -->
2. Tab and Mobile Header : This header will appear when you are at 991px or below it. This code is placed just above the Header Section mentioned above.
a. Sidebar toggle button.
b. Brand Logo
c. Search Bar
Note:- These categories are defined by us and you can modify as per your needs :)
<!-- Tab Mobile View Header -->
<header class="tabMobileView header navbar fixed-top d-lg-none" role="banner">
<div class="nav-toggle">
...........
<div>
<ul class="nav navbar-nav">
...........
</ul>
</header>
<!-- Tab Mobile View Header -->
3. Main Container Section : The main container section includes overlay, sidebar and main content section.
a. Overlay Code
b. Sidebar Section
c. Main Content Section
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
...........
</div>
<!-- END MAIN CONTAINER -->
4. The Overlay : The overlay code as described above is placed inside the main container section : Points to be remember
a. Overlay :- The div with .overlay class is active when sidebar is open.
b. CS-Overlay :- The div with .cs-overlay class is active when control sidebar is open.
<div class="overlay"></div>
<div class="cs-overlay"></div>
5. Sidebar : This is the sidebar code.
<!-- BEGIN SIDEBAR -->
<div class="sidebar-wrapper sidebar-theme">
<div id="dismiss" class="d-lg-none"><i class="flaticon-cancel-12"></i></div>
<nav id="sidebar">
...........
</nav>
</div>
<!-- END SIDEBAR -->
6. Main Content : This is the main Content code section.
a. You can see a div with .page-header class inside where you can write your own heading.
b. After this div you can see two div's with the same class .row .layout-spacing. This is the root structure where you can create widgets, charts, tables etc.
Note:- From the above b. point, we had mentioned two div's with the same class .row .layout-spacing. It is for the demo purpose only. You can create one, two or more div's as per your needs.
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="container">
<div class="page-header">
<div class="page-title">
<h3>Dashboard</h3>
</div>
</div>
<div class="row layout-spacing ">
...........
</div>
<div class="row layout-spacing ">
...........
</div>
...........
</div>
</div>
<!-- END CONTENT PART -->
7. Footer : This is the Footer code. It is placed outside the Main Container Section.
There are two section with the class .footer-section-1 and .footer-section-2.
a. Footer Section 1 :- Usually this section does not contain anything inside it, but it can be customized according to your needs. This means that you can add your own CSS style.
b. Footer Section 2 :- This section contains all the footer details that you can modify as per your needs.
<!-- BEGIN FOOTER -->
<footer class="footer-section theme-footer">
<div class="footer-section-1 sidebar-theme">
</div>
<div class="footer-section-2 container-fluid">
...........
</div>
</footer>
<!-- END FOOTER -->
8. Control Sidebar : This is the Control Sidebar code.
<!-- BEGIN CONTROL SIDEBAR -->
<aside class="control-sidebar control-sidebar-light-color cs-content">
<div class="">
<div class="row">
...........
</div>
<div class="tab-navigation-section text-center mb-5 mt-3">
...........
</div>
<div class="tab-content">
...........
</div>
</div>
</aside>
<!-- END CONTROL SIDEBAR -->
The Combined Code
Now, after a brief description of our admin template. Below is the combined code of the snippets we have discuss above.
<!-- Tab Mobile View Header -->
<header class="tabMobileView header navbar fixed-top d-lg-none" role="banner">
<div class="nav-toggle">
...........
<div>
<ul class="nav navbar-nav">
...........
</ul>
</header>
<!-- Tab Mobile View Header -->
<!-- BEGIN NAVBAR -->
<header class="header navbar fixed-top navbar-expand-sm" role="banner">
<ul class="navbar-nav flex-row">
...........
</ul>
<ul class="navbar-nav flex-row mr-lg-auto ml-lg-0 ml-auto">
...........
</ul>
<ul class="navbar-nav flex-row ml-lg-auto">
...........
</ul>
</header>
<!-- END NAVBAR -->
<!-- BEGIN MAIN CONTAINER -->
<div class="main-container" id="container">
<div class="overlay"></div>
<div class="cs-overlay"></div>
<!-- BEGIN SIDEBAR -->
<div class="sidebar-wrapper sidebar-theme">
<div id="dismiss" class="d-lg-none"><i class="flaticon-cancel-12"></i></div>
<nav id="sidebar">
...........
</nav>
</div>
<!-- END SIDEBAR -->
<!-- BEGIN CONTENT PART -->
<div id="content" class="main-content">
<div class="container">
<div class="page-header">
<div class="page-title">
<h3>Dashboard</h3>
</div>
</div>
<div class="row layout-spacing ">
...........
</div>
<div class="row layout-spacing ">
...........
</div>
...........
</div>
</div>
<!-- END CONTENT PART -->
</div>
<!-- END MAIN CONTAINER -->
<!-- BEGIN FOOTER -->
<footer class="footer-section theme-footer">
<div class="footer-section-1 sidebar-theme">
</div>
<div class="footer-section-2 container-fluid">
...........
</div>
</footer>
<!-- END FOOTER -->
<!-- BEGIN CONTROL SIDEBAR -->
<aside class="control-sidebar control-sidebar-light-color cs-content">
<div class="">
<div class="row">
...........
</div>
<div class="tab-navigation-section text-center mb-5 mt-3">
...........
</div>
<div class="tab-content">
...........
</div>
</div>
</aside>
<!-- END CONTROL SIDEBAR -->