PHP Structure
Folder Structure
- Admin
-
layouts
- config.php / Contain the DB and email configuration code.
- customizer.php / Contain the right sidebar theme customization HTML code.
- footer.php
- head-css.php / / added common css files link in this file.
- head-main.php / HTML tag with attributes and common php function is stored in this common file.
- head-main-diff-layout.php / common php function for diffrent layouts is stored in this file.
- menu.php
- page-title.php / Breadcrumb is defined in this file.
- session.php / PH Session related code is in this file.
- sidebar.php / Sidebar menu-related code is in this file.
- title-meta.php / Page title and meta tags are defined in this file.
- topbar.php / Topbar-related code is in this file.
- vendor-scripts.php / Common js files are linked in this file.
File structure
Overview
<?php include 'partials/session.php'; ?>
<?php include 'partials/head-main.php'; ?>
<head>
<?php includeFileWithVariables('layouts/title-meta.php', array('title' => 'Starter')); ?>
<?php include 'layouts/head-css.php'; ?>
</head>
<body>
<!-- Begin page -->
<div id="layout-wrapper">
<?php include 'layouts/menu.php'; ?>
<?php include 'layouts/sidebar.php'; ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="main-content">
<div class="page-content">
<div class="container-fluid">
<?php includeFileWithVariables('layouts/page-title.php', array('pagetitle' => 'Steex', 'title' => 'Starter')); ?>
</div>
<!-- container-fluid -->
</div>
<!-- End Page-content -->
<?php include 'layouts/footer.php'; ?>
</div>
<!-- end main content-->
</div>
<!-- END layout-wrapper -->
<?php include 'layouts/customizer.php'; ?>
<?php include 'layouts/vendor-scripts.php'; ?>
<!-- App js -->
<script src="assets/js/app.js"></script>
</body>
</html>Layout setup
You can set the default layout in the
layouts/head-main.php file in the html tag.
<html data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg">
| data-layout="vertical" | To set default layout as Vertical |
|---|---|
| data-layout="horizontal" | To set default layout as Horizontal |
| data-layout="twocolumn" | To set default layout as Two column |
| data-layout-mode="light" | To set Light layout mode. |
| data-layout-mode="dark" | To set Dark layout mode. |
| data-sidebar-size="lg" data-layout-width="fluid" | To set layout width Fluid and left sidebar large. |
| data-sidebar-size="sm-hover" data-layout-width="boxed" | To set layout width Boxed and left sidebar on hover show menu. |
| data-layout-position="fixed" | To set layout position Fixed. |
| data-layout-position="scrollable" | To set layout position Scrollable. |
| data-topbar="light" | To set the Light color of Topbar. |
| data-topbar="dark" | To set the dark color of Topbar. |
| data-sidebar-size="lg" | To set the Large left sidebar. |
| data-sidebar-size="md" | To set the Compact left sidebar. |
| data-sidebar-size="sm" | To set the Icon view left sidebar. |
| data-sidebar-size="sm-hover" | To set the Icon hover left sidebar. |
| data-layout-style="default" | To set the Default layout. |
| data-layout-style="detached" | To set the Detached layout. |
| data-sidebar="light" | To set the Light color of left Sidebar. |
| data-sidebar="dark" | To set the Dark color of left Sidebar. |
| data-sidebar="gradient" | To set the Gradient color of left Sidebar. |
| data-sidebar="gradient-2" | To set the Gradient-2 color of left Sidebar. |
| data-sidebar="gradient-3" | To set the Gradient-3 color of left Sidebar. |
| data-sidebar="gradient-4" | To set the Gradient-4 color of left Sidebar. |
| data-sidebar-image="none" | To Disable image on left Sidebar. |
| data-sidebar-image="img-1" | To set the img-1 Image of left Sidebar. |
| data-sidebar-image="img-2" | To set the img-2 Image of left Sidebar. |
| data-sidebar-image="img-3" | To set the img-3 Image of left Sidebar. |
| data-sidebar-image="img-4" | To set the img-4 Image of left Sidebar. |
| data-preloader="enable" | To enable the preloader on the Page. |
| data-preloader="disable" | To disable the preloader on the Page. |