📄Page Structure

<!DOCTYPE html>
<html lang="en">
  <!-- [Head] start -->

  <head>
    <?= $this->element('head-page-meta', array('title' => 'Home')); ?>
    <!-- map-vector css -->
    <link rel="stylesheet" href="css/plugins/jsvectormap.min.css">
    <?= $this->element('head-css') ?> 
  </head>
  <!-- [Head] end -->
  <!-- [Body] Start -->

  <?= $this->element('body') ?>
    <?= $this->element('layout-vertical') ?>

    <!-- [ Main Content ] start -->
    <div class="pc-container">
      <div class="pc-content">
      <?= $this->element('breadcrumb', array('breadcrumbitem' => 'Dashboard', 
          'breadcrumbitemactive' =>'Home')); ?>

        <!-- [ Main Content ] start -->

      </div>
    </div>
    <?= $this->element('footer-block') ?>
     <?= $this->element('customizer') ?>
    <?= $this->element('footer-js') ?>
  </body>
  <!-- [Body] end -->
</html>

Layout settings

You can change the default layout in the routers/routes.js file in the body tag

```javascript
// =======================================================
// -----------   Light Able Theme Configuration  -----------
// =======================================================
const caption_show = 'true'; // [ false , true ]
const dark_navbar = 'false'; // [ false , true ]
const preset_theme = 'preset-1'; // [ preset-1 to preset-10 ]
const dark_layout = 'false'; // [ false , true , default ]
const rtl_layout = 'false'; // [ false , true ]
const box_container = 'false'; // [ false , true ]
const version = 'v1.1.0';

if (rtl_layout == "true") {
  var rtltemp = "rtl"
} else {
  var rtltemp = "ltr"
}

if (dark_layout == 'true') {
  var darklayouttemp = "dark"
} else {
  var darklayouttemp = "light"
}
if (dark_navbar == 'true') {
  var darknavbartemp = "dark"
} else {
  var darknavbartemp = "light"
}

const layout = {
  pc_caption_show: caption_show,
  pc_preset_theme: preset_theme,
  pc_dark_navbar: dark_navbar,
  pc_dark_layout: dark_layout,
  pc_rtl_layout: rtl_layout,
  pc_box_container: box_container,
  pc_theme_version: version,
  bodySetup: 'data-pc-preset="' + preset_theme + '" data-pc-sidebar-theme="' + darknavbartemp + '" data-pc-sidebar-caption="' + caption_show + '" data-pc-direction="' + rtltemp + '" data-pc-theme="' + darklayouttemp + '"',
};
```

Attribute

Description

data-pc-preset= "preset-1"

To set the your primary theme color you can change ['preset-1' to 'preset-10'] for different color.

data-pc-sidebar-theme = "light"

To set the Light color left Sidebar.

data-pc-sidebar-theme = "dark"

To set the Light color dark Sidebar.

data-pc-sidebar-caption = "true"

To set the caption on.

data-pc-sidebar-caption = "false"

To set the caption off.

data-pc-direction = "ltr"

To set the layout direction left to right.

data-pc-direction = "rtl"

To set the layout direction right to left.

data-pc-theme = "light"

To set the layout theme light.

data-pc-theme = "dark"

To set the layout theme dark.

PreviousFolder Structure NextLayout Customizer

Last updated 1 year ago