layoutMaster
to select vertical or horizontal layout. This option can be updated from custom.php
file. Find customization-options here
We have included styles and scripts files in Common Master Layout. You can find these files at the same path inside resources/views/layouts
folder.
<!DOCTYPE html>
@php
$menuFixed = ($configData['layout'] === 'vertical') ? ($menuFixed ?? '') : (($configData['layout'] === 'front') ? '' : $configData['headerType']);
$navbarType = ($configData['layout'] === 'vertical') ? $configData['navbarType']: (($configData['layout'] === 'front') ? 'layout-navbar-fixed': '');
$isFront = ($isFront ?? '') == true ? 'Front' : '';
$contentLayout = (isset($container) ? (($container === 'container-xxl') ? "layout-compact" : "layout-wide") : "");
@endphp
<html lang="❴❴ session()->get('locale') ?? app()->getLocale() ❵❵" class="light-style {{($contentLayout ?? '')}}" dir="ltr" data-theme="theme-default" data-framework="laravel">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<title>@yield('title')</title>
<meta name="description" content="" />
<meta name="keywords" content="">
<!-- laravel CRUD token -->
<meta name="csrf-token" content="❴❴ csrf_token() ❵❵">
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="❴❴ asset('assets/img/favicon/favicon.ico') ❵❵" />
<!-- Include Styles -->
<!-- $isFront is used to append the front layout styles only on the front layout otherwise the variable will be blank -->
@include('layouts/sections/styles' . $isFront)
<!-- Include Scripts for customizer, helper, analytics, config -->
<!-- $isFront is used to append the front layout scriptsIncludes only on the front layout otherwise the variable will be blank -->
@include('layouts/sections/scriptsIncludes' . $isFront)
</head>
<body>
<!-- Layout Content -->
@yield('layoutContent')
<!--/ Layout Content -->
<!-- Include Scripts -->
<!-- $isFront is used to append the front layout scripts only on the front layout otherwise the variable will be blank -->
@include('layouts/sections/scripts' . $isFront)
</body>
</html>
Included styles file contains all the core css, theme css, demo css and more..
You can find this file at layouts/sections/styles.blade.php
$configData
provides data from custom.php
to compile style according to layout settings.
<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
@vite(['resources/assets/vendor/fonts/boxicons.scss',
'resources/assets/vendor/fonts/fontawesome.scss',
'resources/assets/vendor/fonts/flag-icons.scss'])
<!-- Core CSS -->
@vite(['resources/assets/vendor/scss'.$configData['rtlSupport'].'/core' .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.scss',
'resources/assets/vendor/scss'.$configData['rtlSupport'].'/' .$configData['theme'] .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.scss',
'resources/assets/css/demo.css'])
@vite(['resources/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.scss',
'resources/assets/vendor/libs/typeahead-js/typeahead.scss'])
<!-- Vendor Styles -->
@yield('vendor-style')
<!-- Page Styles -->
@yield('page-style')
<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/boxicons.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/fontawesome.css')) ❵❵" />
<!-- Core CSS -->
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/core' .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-core-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/' .$configData['theme'] .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-theme-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/css/demo.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/libs/typeahead-js/typeahead.css')) ❵❵" />
<!-- Vendor Styles -->
@yield('vendor-style')
<!-- Page Styles -->
@yield('page-style')
This file includes helpers, customization, config js along with templateCustomizer initialization script :
You can find this file at layouts/sections/scriptsIncludes.blade.php
$configData
provides data from custom.php
to compile style according to layout settings.
@php
use Illuminate\Support\Facades\Vite;
$menuCollapsed = ($configData['menuCollapsed'] === 'layout-menu-collapsed') ? json_encode(true) : false;
@endphp
<!-- laravel style -->
@vite(['resources/assets/vendor/js/helpers.js'])
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
@vite(['resources/assets/vendor/js/template-customizer.js'])
@endif
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
@vite(['resources/assets/js/config.js'])
@if ($configData['hasCustomizer'])
<script type="module">
window.templateCustomizer = new TemplateCustomizer({
cssPath: '',
themesPath: '',
defaultStyle: "{{$configData['styleOpt']}}",
defaultShowDropdownOnHover: "{{$configData['showDropdownOnHover']}}", // true/false (for horizontal layout only)
displayCustomizer: "{{$configData['displayCustomizer']}}",
lang: '{{ app()->getLocale() }}',
pathResolver: function(path) {
var resolvedPaths = {
// Core stylesheets
@foreach (['core'] as $name)
'{{ $name }}.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/'.$name.'.scss') }}',
'{{ $name }}-dark.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/'.$name.'-dark.scss') }}',
@endforeach
// Themes
@foreach (['default', 'bordered', 'semi-dark'] as $name)
'theme-{{ $name }}.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/theme-'.$name.'.scss') }}',
'theme-{{ $name }}-dark.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/theme-'.$name.'-dark.scss') }}',
@endforeach
}
return resolvedPaths[path] || path;
},
'controls': <?php echo json_encode($configData['customizerControls']); ?>,
});
</script>
@endif
@php
$menuCollapsed = ($configData['menuCollapsed'] === 'layout-menu-collapsed') ? json_encode(true) : false;
@endphp
<!-- laravel style -->
<script src="❴❴ asset('assets/vendor/js/helpers.js') ❵❵"></script>
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<script src="❴❴ asset('assets/vendor/js/template-customizer.js') ❵❵"></script>
@endif
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="❴❴ asset('assets/js/config.js') ❵❵"></script>
@if ($configData['hasCustomizer'])
<script>
window.templateCustomizer = new TemplateCustomizer({
cssPath: '',
themesPath: '',
defaultStyle: "❴❴$configData['styleOpt']❵❵",
defaultShowDropdownOnHover: "❴❴$configData['showDropdownOnHover']❵❵", // true/false (for horizontal layout only)
lang: '❴❴ app()->getLocale() ❵❵',
pathResolver: function(path) {
var resolvedPaths = {
// Core stylesheets
@foreach (['core'] as $name)
'❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}.css")) ❵❵',
'❴❴ $name ❵❵-dark.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}-dark.css")) ❵❵',
@endforeach
// Themes
@foreach (['default', 'bordered', 'semi-dark'] as $name)
'theme-❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css")) ❵❵',
'theme-❴❴ $name ❵❵-dark.css':
'❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css")) ❵❵',
@endforeach
}
return resolvedPaths[path] || path;
},
'controls': <?php echo json_encode($configData['customizerControls']); ?>,
});
</script>
@endif
This file includes main js along with template related vendor scripts :
You can find this file at layouts/sections/scripts.blade.php
<!-- BEGIN: Vendor JS-->
@vite([
'resources/assets/vendor/libs/jquery/jquery.js',
'resources/assets/vendor/libs/popper/popper.js',
'resources/assets/vendor/js/bootstrap.js',
'resources/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js',
'resources/assets/vendor/libs/hammer/hammer.js',
'resources/assets/vendor/libs/typeahead-js/typeahead.js',
'resources/assets/vendor/libs/feather-icons/feather.js',
'resources/assets/vendor/js/menu.js'])
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
@vite(['resources/assets/js/main.js'])
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
@stack('pricing-script')
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->
<script type="module">
feather.replace();
</script>
<!-- BEGIN: Vendor JS-->
<script src="❴❴ asset(mix('assets/vendor/libs/jquery/jquery.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/popper/popper.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/js/bootstrap.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/hammer/hammer.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/typeahead-js/typeahead.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/feather-icons/feather.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/js/menu.js')) ❵❵"></script>
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="❴❴ asset(mix('assets/js/main.js')) ❵❵"></script>
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
@stack('pricing-script')
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->
<script>
feather.replace();
</script>
This layout used for front pages
We have added Common Master Layout, Navbar-front and Navbar-front in Layout Front. You can find these files at the path inside resources/views/layouts
folder.
@php
$configData = Helper::appClasses();
$isFront = true;
@endphp
@section('layoutContent')
@extends('layouts/commonMaster' )
@include('layouts/sections/navbar/navbar-front')
<!-- Sections:Start -->
@yield('content')
<!-- / Sections:End -->
@include('layouts/sections/footer/footer-front')
@endsection
Included styles file contains all the core css, theme css, demo css and more..
You can find this file at layouts/sections/stylesFront.blade.php
<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
@vite(['resources/assets/vendor/fonts/boxicons.scss'])
<!-- Core CSS -->
@vite(['resources/assets/vendor/scss/core' .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.scss',
'resources/assets/vendor/scss/' .$configData['theme'] .($configData['style'] !== 'light' ? '-' . $configData['style'] : '') .'.scss',
'resources/assets/css/demo.css',
'resources/assets/vendor/scss/pages/front-page.scss'])
<!-- Vendor Styles -->
@yield('vendor-style')
<!-- Page Styles -->
@yield('page-style')
<!-- BEGIN: Theme CSS-->
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/fonts/boxicons.css')) ❵❵" />
<!-- Core CSS -->
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/core.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-core-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css' .$configData['rtlSupport'] .'/' .$configData['theme'].'.css')) ❵❵" class="❴❴ $configData['hasCustomizer'] ? 'template-customizer-theme-css' : '' ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/css/demo.css')) ❵❵" />
<link rel="stylesheet" href="❴❴ asset(mix('assets/vendor/css/pages/front-page.css')) ❵❵" />
<!-- Vendor Styles -->
@yield('vendor-style')
<!-- Page Styles -->
@yield('page-style')
This file includes helpers, customization, config js along with templateCustomizer initialization script :
You can find this file at layouts/sections/scriptsIncludesFront.blade.php
@php
use Illuminate\Support\Facades\Vite;
@endphp
<!-- laravel style -->
@vite(['resources/assets/vendor/js/helpers.js'])
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
@vite(['resources/assets/vendor/js/template-customizer.js'])
@endif
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
@vite(['resources/assets/js/front-config.js'])
@if ($configData['hasCustomizer'])
<script type="module">
window.templateCustomizer = new TemplateCustomizer({
cssPath: '',
themesPath: '',
defaultStyle: "{{$configData['styleOpt']}}",
displayCustomizer: "{{$configData['displayCustomizer']}}",
pathResolver: function(path) {
var resolvedPaths = {
// Core stylesheets
@foreach (['core'] as $name)
'{{ $name }}.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/'.$name.'.scss') }}',
'{{ $name }}-dark.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/'.$name.'-dark.scss') }}',
@endforeach
// Themes
@foreach (['default', 'bordered', 'semi-dark'] as $name)
'theme-{{ $name }}.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/theme-'.$name.'.scss') }}',
'theme-{{ $name }}-dark.scss': '{{ Vite::asset('resources/assets/vendor/scss'.$configData["rtlSupport"].'/theme-'.$name.'-dark.scss') }}',
@endforeach
}
return resolvedPaths[path] || path;
},
'controls': <?php echo json_encode(['rtl', 'style']); ?>,
});
</script>
@endif
<!-- laravel style -->
<script src="❴❴ asset('assets/vendor/js/helpers.js') ❵❵"></script>
<!-- beautify ignore:start -->
@if ($configData['hasCustomizer'])
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
<script src="❴❴ asset('assets/vendor/js/template-customizer.js') ❵❵"></script>
@endif
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
<script src="❴❴ asset('assets/js/front-config.js') ❵❵"></script>
@if ($configData['hasCustomizer'])
<script>
window.templateCustomizer = new TemplateCustomizer({
cssPath: '',
themesPath: '',
defaultStyle: "❴❴$configData['styleOpt']❵❵",
displayCustomizer: "❴❴$configData['displayCustomizer']❵❵",
lang: '❴❴ app()->getLocale() ❵❵',
pathResolver: function(path) {
var resolvedPaths = {
// Core stylesheets
@foreach (['core'] as $name)
'❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}.css")) ❵❵',
'❴❴ $name ❵❵-dark.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/{$name}-dark.css")) ❵❵',
@endforeach
// Themes
@foreach (['default', 'bordered', 'semi-dark'] as $name)
'theme-❴❴ $name ❵❵.css': '❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}.css")) ❵❵',
'theme-❴❴ $name ❵❵-dark.css':
'❴❴ asset(mix("assets/vendor/css{$configData['rtlSupport']}/theme-{$name}-dark.css")) ❵❵',
@endforeach
}
return resolvedPaths[path] || path;
},
'controls': <?php echo json_encode(['rtl', 'style']); ?>,
});
</script>
@endif
This file includes main js along with template related vendor scripts :
You can find this file at layouts/sections/scriptsFront.blade.php
<!-- BEGIN: Vendor JS-->
@vite([
'resources/assets/vendor/js/dropdown-hover.js',
'resources/assets/vendor/js/mega-dropdown.js',
'resources/assets/vendor/libs/popper/popper.js',
'resources/assets/vendor/js/bootstrap.js'])
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
@vite(['resources/assets/js/front-main.js'])
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
@stack('pricing-script')
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->
<!-- BEGIN: Vendor JS-->
<script src="❴❴asset('assets/vendor/js/dropdown-hover.js')❵❵"></script>
<script src="❴❴asset('assets/vendor/js/mega-dropdown.js')❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/libs/popper/popper.js')) ❵❵"></script>
<script src="❴❴ asset(mix('assets/vendor/js/bootstrap.js')) ❵❵"></script>
@yield('vendor-script')
<!-- END: Page Vendor JS-->
<!-- BEGIN: Theme JS-->
<script src="❴❴ asset(mix('assets/js/front-main.js')) ❵❵"></script>
<!-- END: Theme JS-->
<!-- Pricing Modal JS-->
@stack('pricing-script')
<!-- END: Pricing Modal JS-->
<!-- BEGIN: Page JS-->
@yield('page-script')
<!-- END: Page JS-->
To set default layout to dark layout, just need to update custom.php
file's myStyle
option :
return [
'custom' => [
...
'myStyle' => 'dark',
...
],
];
Materio provides two configuration options for RTL.
To use template with RTL support, you need to update custom.php
file's myRTLSupport
option.
If you want to use LTR & RTL options both, you must set it to true
else RTL Layout won't work.
If you want to use only LTR not RTL, you can set it to false
return [
'custom' => [
...
'myRTLSupport' => true,
...
],
];
To use template default RTL Layout, you need to update custom.php
file's myRTLMode
option.
If you want to set default layout to RTL, you can set this option to true
return [
'custom' => [
...
'myRTLMode' => true,
...
],
];
You can configure the initial layout by setting control classes to the <html>
element.
Find all the layout classes with it's description below :
Class | Description |
---|---|
layout-menu-collapsed |
Set layout collapsed for vertical menu |
layout-menu-fixed |
Set layout menu fixed |
layout-navbar-fixed |
Set layout navbar position to fixed |
layout-footer-fixed |
Set layout footer position to fixed |