📄Page Structure

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

<head>
    <title>@yield('title') | Light Able Laravel 10 Dashboard Template</title>
    <!-- [Meta] -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Light Able is trending dashboard template made using Laravel 10 &  Bootstrap 5 design framework. Light Able is available in Bootstrap, React, CodeIgniter, Angular,  and .net Technologies.">
    <meta name="keywords" content="Laravel 10 Bootstrap admin template, Dashboard UI Kit, Dashboard Template, Backend Panel, react dashboard, angular dashboard">
    <meta name="author" content="codedthemes">

    <!-- [Favicon] icon -->
    <link rel="icon" href="{{ URL::asset('build/images/favicon.svg') }}" type="image/x-icon">

    @yield('css')

    @include('layouts.head-css')
</head>

<body data-pc-preset="preset-1" data-pc-sidebar-theme="light" data-pc-sidebar-caption="true" data-pc-direction="ltr" data-pc-theme="light" >
    @include('layouts.loader')
    @include('layouts.sidebar')
    @include('layouts.topbar')

    <!-- [ Main Content ] start -->
    <div class="pc-container">
        <div class="pc-content">
            @if(View::hasSection('breadcrumb-item'))
                @include('layouts.breadcrumb')
            @endif
            <!-- [ Main Content ] start -->
            @yield('content')
            <!-- [ Main Content ] end -->
        </div>
    </div>
    <!-- [ Main Content ] end -->

    @include('layouts.footer')
    @include('layouts.customizer')

    @include('layouts.footerjs')

    @yield('scripts')

  </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