Template Layout

Structure

All template files have structure consisting of header, top menu, user profile, sidebar menu, right sidebar, content and footer as shown below:

Reborn Layout

Below code is used for the default layout.

<div class="sidebar-overlay" data-toggle="sidebar"></div>

<!-- SIDEBAR -->
<aside class="sidebar sidebar-fixed">

    <div class="scrollbar">            

        <!-- SIDEBAR MENU -->
        <ul class="sidebar-menu">

            <li class="treeview profile">
                <div class="user-thumb">
                    <img src="../../../assets/images/demo/img8.jpg" alt="admin">
                </div>
                <a class="text-center" href="#" data-toggle="treeview">                       
                    John Doe
                    <cite>Developer</cite>
                    <i class="treeview-indicator ico-arrow-down"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="user_profile.php"><i class="ico-user-profile-2"></i>My Profile</a></li>
                    <li><a class="treeview-item" href="apps_emails.php"><i class="ico-email"></i>Inbox</a></li>
                    <li><a class="treeview-item" href="user_settings.php"><i class="ico-gear"></i>Settings</a></li>
                    <li><a class="treeview-item" href="user_login.php"><i class="ico-logout"></i>Logout</a></li>
                </ul>
            </li>


            <li><a class="sidebar-item" href="index.php"><i class="ico-display"></i> <span class="item-label">Dashboard</span></a></li>
            <li><a class="sidebar-item" href="widgets.php"><i class="ico-plugin"></i> <span class="item-label">Widgets</span></a></li>

            <li class="menu-title">Apps</li>
            <li><a class="sidebar-item" href="apps_emails.php"><i class="ico-email"></i> <span class="item-label">Emails</span></a></li>
            <li><a class="sidebar-item" href="apps_calendar.php"><i class="ico-calendar"></i> <span class="item-label">Calendar</span></a></li>
            <li><a class="sidebar-item" href="apps_masonry.php"><i class="ico-image"></i> <span class="item-label">Gallery (Masonry)</span></a></li>

            <li class="menu-title">Content</li>

            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-toy"></i>
                    <span class="item-label">UI Elements</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="ui_accordions.php">Accordions</a></li>
                    <li><a class="treeview-item" href="ui_alerts.php">Alerts</a></li>
                    <li><a class="treeview-item" href="ui_badges.php">Badges</a></li>
                    <li><a class="treeview-item" href="ui_buttons.php">Buttons</a></li>
                    <li><a class="treeview-item" href="ui_dropdowns.php">Dropdowns</a></li>
                    <li><a class="treeview-item" href="ui_lists.php">List Groups</a></li>
                    <li><a class="treeview-item" href="ui_media.php">Media Objects</a></li>
                    <li><a class="treeview-item" href="ui_modal.php">Modals</a></li>
                    <li><a class="treeview-item" href="ui_pagination.php">Pagination</a></li>
                    <li><a class="treeview-item" href="ui_pills.php">Pills</a></li>
                    <li><a class="treeview-item" href="ui_progress.php">Progress Bars</a></li>
                    <li><a class="treeview-item" href="ui_tabs.php">Tabs</a></li>
                    <li><a class="treeview-item" href="ui_sliders.php">Sliders</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-option"></i>
                    <span class="item-label">Content</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="content_cards.php">Cards</a></li>
                    <li><a class="treeview-item" href="content_cards_styling.php">Cards Styling</a></li>
                    <li><a class="treeview-item" href="content_cards_advanced.php">Advanced Cards</a></li>
                    <li><a class="treeview-item" href="content_typography.php">Typography</a></li>
                    <li><a class="treeview-item" href="content_styling.php">Text Styling</a></li>
                </ul>
            </li>                
            <li><a class="sidebar-item" href="icons.php"><i class="ico-heart"></i> <span class="item-label">Icons</span></a></li>
            <li><a class="sidebar-item" href="animations.php"><i class="spinner ico-spinner-3"></i> <span class="item-label">Animations</span></a></li>                
            <li><a class="sidebar-item" href="helper_classes.php"><i class="ico-magic-wand-2"></i> <span class="item-label">Helper Classes</span></a></li>


            <li class="menu-title">Forms</li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-checked-2"></i>
                    <span class="item-label">Form Components</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="forms_basic.php">Basic Elements</a></li>
                    <li><a class="treeview-item" href="forms_groups.php">Input Groups</a></li>
                    <li><a class="treeview-item" href="forms_controls.php">Extended Controls</a></li>
                    <li><a class="treeview-item" href="forms_checkboxes.php">Checkboxes & Radios</a></li>
                    <li><a class="treeview-item" href="forms_select2.php">Select2</a></li>
                    <li><a class="treeview-item" href="forms_switchery.php">Switchery</a></li>
                    <li><a class="treeview-item" href="forms_noui.php">NoUI Slider</a></li>
                    <li><a class="treeview-item" href="forms_validations.php">Form Validations</a></li>
                </ul>
            </li>
            <li><a class="sidebar-item" href="editor_tinymce.php"><i class="ico-editor"></i> <span class="item-label">TinyMCE Editor</span></a></li>                
            <li><a class="sidebar-item" href="forms_pickers.php"><i class="ico-dropper"></i> <span class="item-label">Pickers</span></a></li>
            <li><a class="sidebar-item" href="forms_uploader.php"><i class="ico-upload"></i> <span class="item-label">File Uploader</span></a></li>

            <li class="menu-title">Charts & Graphs</li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-chart-5"></i>
                    <span class="item-label">High Charts</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="charts_high_line.php">Line Charts</a></li>
                    <li><a class="treeview-item" href="charts_high_area.php">Area Charts</a></li>
                    <li><a class="treeview-item" href="charts_high_bar.php">Column & Bar Charts</a></li>
                    <li><a class="treeview-item" href="charts_high_pie.php">Pie Charts</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-chart-2"></i>
                    <span class="item-label">Google Charts</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="charts_google_line.php">Line & Area Charts</a></li>
                    <li><a class="treeview-item" href="charts_google_bar.php">Bar Charts</a></li>
                    <li><a class="treeview-item" href="charts_google_pie.php">Pie Charts</a></li>
                    <li><a class="treeview-item" href="charts_google_bubble.php">Bubble Charts</a></li>
                    <li><a class="treeview-item" href="charts_google_scatter.php">Scatter Charts</a></li>
                </ul>
            </li>
            <li><a class="sidebar-item" href="charts_morris.php"><i class="ico-chart-1"></i> <span class="item-label">Morris Charts</span></a></li>
            <li><a class="sidebar-item" href="charts_sparkline.php"><i class="ico-chart-7"></i> <span class="item-label">Sparkline Charts</span></a></li>
            <li><a class="sidebar-item" href="charts_peity.php"><i class="ico-pie-2"></i> <span class="item-label">Peity Charts</span></a></li>

            <li class="menu-title">Maps</li>
            <li><a class="sidebar-item" href="maps_google.php"><i class="ico-map-4"></i> <span class="item-label">Google Maps</span></a></li>
            <li><a class="sidebar-item" href="maps_vector.php"><i class="ico-globe-1"></i> <span class="item-label">Vector Maps</span></a></li>             

            <li class="menu-title">Tables</li>
            <li><a class="sidebar-item" href="tables_basic.php"><i class="ico-accounts"></i> <span class="item-label">Basic Tables</span></a></li>
            <li><a class="sidebar-item" href="tables_responsive.php"><i class="ico-spreadsheet"></i> <span class="item-label">Responsive Tables</span></a></li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-grid"></i>
                    <span class="item-label">Datatables</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="tables_datatables.php">Basic Datatables</a></li>
                    <li><a class="treeview-item" href="tables_datatables_advanced.php">Advanced Datatables</a></li>
                </ul>
            </li>


            <li class="menu-title">Pages</li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-warning"></i>
                    <span class="item-label">Notifications</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="notifications_sweet_alert.php">Sweet Alerts</a></li>
                    <li><a class="treeview-item" href="notifications_pnotify.php">PNotify</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-user-auth"></i>
                    <span class="item-label">Login & Registration</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="user_login.php">User Login</a></li>
                    <li><a class="treeview-item" href="user_register.php">User Sign Up</a></li>
                    <li><a class="treeview-item" href="user_unlock.php">Unlock User</a></li>
                    <li><a class="treeview-item" href="user_password.php">Reset Password</a></li>
                </ul>
            </li>
            <li class="treeview">
                <a class="sidebar-item" href="#" data-toggle="treeview">
                    <i class="ico-user-profile-2"></i>
                    <span class="item-label">User Pages</span>
                    <i class="treeview-indicator ico-arrow-right"></i>
                </a>
                <ul class="treeview-menu">
                    <li><a class="treeview-item" href="user_list.php">Users List</a></li>
                    <li><a class="treeview-item" href="user_profile.php">Social Profile</a></li>
                    <li><a class="treeview-item" href="user_settings.php">User Settings</a></li>
                </ul>
            </li>

            <li><a class="sidebar-item" href="page_launching.php"><i class="ico-rocket"></i> <span class="item-label">Launching Page</span></a></li>
            <li><a class="sidebar-item" href="page_maintenance.php"><i class="ico-cone"></i> <span class="item-label">Maintenance Page</span></a></li>
            <li><a class="sidebar-item" href="page_offline.php"><i class="ico-warning"></i> <span class="item-label">Offline Page</span></a></li>
            <li><a class="sidebar-item" href="page_error.php"><i class="ico-404"></i> <span class="item-label">Error Page</span></a></li>
            <li><a class="sidebar-item" href="page_search.php"><i class="ico-search"></i> <span class="item-label">Content Search</span></a></li>
            <li><a class="sidebar-item" href="page_knowledgebase.php"><i class="ico-help"></i> <span class="item-label">Knowledgebase</span></a></li>
            <li><a class="sidebar-item" href="page_starter.php"><i class="ico-file"></i> <span class="item-label">Starter Page</span></a></li>

        </ul>

    </div>
    <!-- /SIDEBAR MENU -->
</aside>
<!-- /SIDEBAR -->