Laravel Configurations

Customize Materialize 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.

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.

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.

// 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
    '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  (rtlSupport 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' => false, // options[Boolean]: true(default), false // Display customizer UI or not, THIS WON'T REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WILL WORK
    'menuFixed' => true, // options[Boolean]: true(default), false // Layout(menu) Fixed
    'menuCollapsed' => false, // options[Boolean]: false(default), true // Show menu collapsed, Only for vertical Layout
    'navbarFixed' => false, // options[Boolean]: false(default), true // Navbar Fixed
    'footerFixed' => false, // options[Boolean]: false(default), true // Footer Fixed
    'showDropdownOnHover' => true, // true, false (for horizontal layout only)
    'customizerControls' => [
      'rtl',
      'style',
      'layoutType',
      'showDropdownOnHover',
      'layoutNavbarFixed',
      'layoutFooterFixed',
      '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
menuFixed Set menu(navigation) fixed by default.
Value: true, false
Default: true
menuCollapsed Set menu(navigation) collapsed by default.
Value: true, false
Default: false
navbarFixed Set Navbar fixed by default.
Value: true, false
Default: false
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', 'layoutType', 'showDropdownOnHover', 'layoutNavbarFixed', 'layoutFooterFixed', '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).

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.

© 2017- Pixinvent, Hand-crafted & Made with ❤️