Laravel Configurations

Customize Materio super easily using just custom.php configuration file without touching single line of code 🤘.

Introduction

To configure your template, we will be using config/custom.php file, which has all the template configurations listed with their valid values. Just change the configurations as per your requirement and you are done.

TemplateCustomizer settings: Template customization settings object to easily customize the template.

Important:

You must use(include) template-customizer.js to use TemplateCustomizer settings.
Make sure you clear the browser local storage In order to see the config changes in the template. Refer How to clear local storage?

To remove customizer, please find FAQ for How to remove template Customizer?

Custom Configurations

Global Variable

As explained in introduction, config.js contain JS global variables (For ex. colors which are used in charts and other js library) to have consistent look and feel.

/**
* Config
* -------------------------------------------------------------------------------------
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
*/

'use strict';

// JS global variables
let config = {
  colors: {...},
  colors_label: {...},
  colors_dark: {...},
  enableMenuLocalStorage: true // Enable menu state with local storage support
};

window.assetsPath = document.documentElement.getAttribute('data-assets-path');
window.baseUrl = document.documentElement.getAttribute('data-base-url') + '/';
window.templateName = document.documentElement.getAttribute('data-template');
window.rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.

/**
* Config
* -------------------------------------------------------------------------------------
* ! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
* ! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).
*/

'use strict';

// JS global variables
let config = {
  colors: {...},
  colors_label: {...},
  colors_dark: {...},
  enableMenuLocalStorage: true // Enable menu state with local storage support
};

let assetsPath = document.documentElement.getAttribute('data-assets-path'),
  baseUrl = document.documentElement.getAttribute('data-base-url') + '/',
  templateName = document.documentElement.getAttribute('data-template'),
  rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.

Global variables are explained in below table

Variable	description
`colors`, `colors_label`, `colors_dark`	JS global variables for colors. Value: for ex. `'#1e9ff2'`
`enableMenuLocalStorage`	Set true to enable storage to persist configuration changes. Value: `true`, `false`
`assetsPath`	`assets/` directory relative path. It use `data-assets-path` data attribute to get value of it.
`templateName`	Used in localStorage key to make it unique. It use `data-template` data attribute to get value of it. Value: for ex. `'vertical-menu-template'`, `'horizontal-menu-template'`
`rtlSupport`	Set `true` if RTL support is required, it will load all styles from `rtl/` directory. Value: `true`, `false`

Customization options

Use custom.php to configure TemplateCustomizer settings.

Global configurations can be configured via custom.php file found at config -> custom.php path.

// Custom Config
  // -------------------------------------------------------------------------------------
  //! IMPORTANT: Make sure you clear the browser local storage In order to see the config changes in the template.
  //! To clear local storage: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).

  return [
    'custom' => [
      'myLayout' => 'vertical', // Options[String]: vertical(default), horizontal
      'myTheme' => 'theme-default', // Options[String]: theme-default(default), theme-bordered, theme-semi-dark
      'myStyle' => 'light', // Options[String]: light(default), 'dark' & 'system' mode
      'myRTLSupport' => true, // options[Boolean]: true(default), false // To provide RTLSupport or not
      'myRTLMode' => false, // options[Boolean]: false(default), true // To set layout to RTL layout  (myRTLSupport must be true for rtl mode)
      'hasCustomizer' => true, // options[Boolean]: true(default), false // Display customizer or not THIS WILL REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WON'T WORK
      'displayCustomizer' => true, // options[Boolean]: true(default), false // Display customizer UI or not, THIS WON'T REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WILL WORK
      'contentLayout' => 'compact', // options[String]: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
      'navbarType' => 'sticky', // options[String]: 'sticky', 'static', 'hidden (Only for vertical Layout)'
      'footerFixed' => false, // options[Boolean]: false(default), true // Footer Fixed
      'menuFixed' => true, // options[Boolean]: true(default), false // Layout(menu) Fixed (Only for vertical Layout)
      'menuCollapsed' => false, // options[Boolean]: false(default), true // Show menu collapsed, (Only for vertical Layout)
      'headerType' => 'fixed', // options[String]: 'static', 'fixed' (for horizontal layout only)
      'showDropdownOnHover' => true, // true, false (for horizontal layout only)
      'customizerControls' => [
        'rtl',
        'style',
        'headerType',
        'contentLayout',
        'layoutCollapsed',
        'layoutNavbarOptions',
        'themes',
      ], // To show/hide customizer options
    ],
  ];

Template customization settings to easily customize the template.

Variable	description
`myLayout`	Set current layout of the template. Value: `Vertical` (Default), `Horizontal` Default: `Vertical`
`myTheme`	Default theme name. Accepts string. Value: `theme-default` (Default), `theme-semi-dark` (Semi Dark), `theme-bordered` (Bordered) Default: `theme-default`
`myStyle`	Set default light/dark style. Value: `light`, `dark` Default: `light`
`myRTLSupport`	To use same Layout style for LTR & RTL, set default value true. Value: `true`, `false` Default: `true`
`myRTLMode`	Set default text direction(Mode). `myRTLSupport` must be true to use RTL direction. Value: `true`, `false` Default: `false`
`hasCustomizer`	Set default `true` to show customizer. If set to `false`, it will not include customizer js and LocalStorage won't work. Value: `true`, `false` Default: `true`
`displayCustomizer`	Set default `true` to show customizer UI. If set to `false`, it will hide only customizer UI and LocalStorage will work. Value: `true`, `false` Default: `true`
`contentLayout`	Set content layout compact by default. Value: `compact`, `wide` Default: `compact`
`menuFixed`	Set menu(navigation) fixed by default. (Vertical layout only) Value: `true`, `false` Default: `true`
`menuCollapsed`	Set menu(navigation) collapsed by default. Value: `true`, `false` Default: `false`
`headerType`	Set header type fixed by default. (horizontal layout only) Value: `fixed` and `static`, `hidden` Default: `fixed`
`navbarType`	Set Navbar type sticky by default. (Vertical layout only) Value: `sticky` and `static`, `hidden` Default: `sticky`
`footerFixed`	Set Footer fixed by default. Value: `true`, `false` Default: `false`
`showDropdownOnHover`	Show Dropdown on mouse hover for Horizontal Layout. Value: `true`, `false` Default: `true`
`customizerControls`	Manage TemplateSettings controls visibility using this option. Just pass an array of the required controls. Default: `controls: ['rtl', 'style', 'headerType', 'contentLayout', 'layoutCollapsed', 'layoutNavbarOptions', 'themes']` For ex. If you wish to display only style and theme options, just pass ['style', 'themes'].

Page Level Configurations

You can use all the custom.php options at page level to customize for particular page(s).

To override these global configurations on a page, you can add page configurations via App -> Http -> Controller -> {Controller File} file.

Please find other configuration options here

You need to set configurations options to controller files, Like below :

$pageConfigs = ['myLayout' => 'blank'];
return view('content.authentications.auth-login-basic', ['pageConfigs' => $pageConfigs]);

Page/layout Variables

You can use below configuration variables to show/hide sections of layout. Like navbar, footer, etc..

To set page level configurations for display elements, update below variables at page level or Layout level as well :

@php
  /* Display elements */
  $isNavbar = true;  // To show/hide navbar
  $isMenu = true;    // To show/hide menu
  $isFlex = false;   // To show/hide Flex Layout
  $isFooter = true;  // To show/hide footer
@endphp

This will pass page level configurations to view.