Materio Bootstrap Dashboard by ThemeSelection

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
window.config = {
  colors: {...},
  colors_label: {...},
  colors_dark: {...},
  fontFamily: window.Helpers.getCssVar('font-family-base'),
  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');

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'`

Customization options#

Use custom.php to configure TemplateCustomizer settings.

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

<?php

// Custom Configuration Settings
// -------------------------------------------------------------------------------------
// IMPORTANT: Ensure that you clear your browser's local storage to properly view the configuration changes in the template.
// To clear local storage, follow this guide: (https://www.leadshook.com/help/how-to-clear-local-storage-in-google-chrome-browser/).

return [
  'custom' => [
    'myLayout' => 'vertical', // Layout type: 'vertical' (default), 'horizontal'
    // 'primaryColor' => '#FF4646', // Set the primary color
    'myTheme' => 'light', // Theme options: 'light' (default), 'dark', 'system'
    'mySkins' => 'default', // Skin options: 'default', 'bordered'
    'hasSemiDark' => false, // Semi-dark mode: true/false (false by default)
    'myRTLMode' => false, // Right-to-left (RTL) layout: true/false (false by default)
    'hasCustomizer' => true, // Enable/Disable customizer: true (default) or false
    'displayCustomizer' => true, // Display customizer UI: true (default) or false
    'contentLayout' => 'compact', // Layout size: 'compact' (container-xxl) or 'wide' (container-fluid)
    'navbarType' => 'sticky', // Navbar type: 'sticky', 'static', or 'hidden' (only for vertical layout)
    'footerFixed' => false, // Footer fixed position: true/false (false by default)
    'menuFixed' => true, // Menu fixed position: true (default) or false (only for vertical layout)
    'menuCollapsed' => false, // Menu collapsed state: true/false (false by default)
    'headerType' => 'fixed', // Header type: 'static' or 'fixed' (only for horizontal layout)
    'showDropdownOnHover' => true, // Dropdown on hover for horizontal layout: true/false
    // 'menuOffcanvas' => true, // Enable off-canvas menu: true/false (only for vertical layout)
    'customizerControls' => [
      'color', // Enable/Disable color picker in customizer
      'theme', // Enable/Disable theme selection in customizer
      'skins', // Enable/Disable skin options in customizer
      'semiDark', // Enable/Disable semi-dark mode in customizer
      'layoutCollapsed', // Enable/Disable collapsed layout in customizer
      'layoutNavbarOptions', // Enable/Disable navbar options in customizer
      'headerType', // Enable/Disable header type selection in customizer
      'contentLayout', // Enable/Disable content layout options in customizer
      'rtl' // Enable/Disable RTL layout options in customizer
    ], // List of available customizer controls
  ],
];

Template customization settings to easily customize the template.

Variable	description
`myLayout`	Set current layout of the template. Value: `Vertical` (Default), `Horizontal` Default: `Vertical`
`mySkins`	Default theme name. Accepts string. Value: `theme-default` (Default), `theme-semi-dark` (Semi Dark), `theme-bordered` (Bordered) Default: `theme-default`
`myTheme`	Set default light/dark style. Value: `light`, `dark` Default: `light`
`myRTLMode`	Set default text direction(Mode). `myRTLMode` 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.