Customization | Materio - Bootstrap Material Design Admin Template

Config 🤩

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

Introduction

Using config.js file you can easily customize theme, styling, layouts and more...

It contains template Global variables and TemplateCustomizer settings.

Global variables: Are used as JS global variables i.e theme colors which are used in charts and other js library.
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?

Config

Use config.js to configure TemplateCustomizer settings application-wide by modifying global variables.

Use helpers.js and template-customizer.js scripts in the <head> section.
Use config.js file to Initialize the TemplateCustomizer plugin. It's important to initialize the plugin in the <head> section
Add template-customizer-core-css and template-customizer-theme-css classes to core and theme-* stylesheets.

/**
* 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'),
  templateName = document.documentElement.getAttribute('data-template'),
  rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.

/**
* TemplateCustomizer
* ! You must use(include) template-customizer.js to use TemplateCustomizer settings
* -----------------------------------------------------------------------------------------------
*/

// To use more themes, just push it to THEMES object.

/* TemplateCustomizer.THEMES.push({
  name: 'theme-raspberry',
  title: 'Raspberry'
}); */

// To add more languages, just push it to LANGUAGES object.
/*
TemplateCustomizer.LANGUAGES.fr = { ... };
*/

/**
* TemplateCustomizer settings
* -------------------------------------------------------------------------------------
* cssPath: Core CSS file path
* themesPath: Theme CSS file path
* displayCustomizer: true(Show customizer), false(Hide customizer)
* lang: To set default language, Add more langues and set default. Fallback language is 'en'
* controls: [ 'rtl', 'style', 'headerType', 'contentLayout', 'layoutCollapsed', 'layoutNavbarOptions', 'themes' ] | Show/Hide customizer controls
* defaultTheme: 0(Default), 1(Bordered), 2(Semi Dark)
* defaultStyle: 'light', 'dark', 'system' (Mode)
* defaultTextDir: 'ltr', 'rtl' (rtlSupport must be true for rtl mode)
* defaultContentLayout: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
* defaultHeaderType: 'static', 'fixed' (for horizontal layout only)
* defaultMenuCollapsed: true, false (For vertical layout only)
* defaultNavbarType: 'sticky', 'static', 'hidden' (Only for vertical layout)
* defaultFooterFixed: true, false (For vertical layout only)
* defaultShowDropdownOnHover : true, false (for horizontal layout only)
*/

if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    cssPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
    themesPath: assetsPath + 'vendor/css' + (rtlSupport ? '/rtl' : '') + '/',
    displayCustomizer: true,
    lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
    // defaultTheme: 2,
    // defaultStyle: 'system',
    // defaultTextDir: 'rtl',
    // defaultContentLayout: 'wide',
    // defaultHeaderType: 'static',
    // defaultMenuCollapsed: true,
    // defaultNavbarType: 'sticky',
    // defaultFooterFixed: false,
    // defaultShowDropdownOnHover: false,
    controls: ['rtl', 'style', 'headerType', 'contentLayout', 'layoutCollapsed', 'layoutNavbarOptions', 'themes']
  });
}

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. Value:`'../../assets/'`
`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`

TemplateCustomizer settings

Template customization settings object to easily customize the template.

Variable	description
`cssPath`	Core stylesheet path, It use `assetsPath` and `rtlSupport` to create path automatically. Required
`themesPath`	Theme stylesheets path, It also use `assetsPath` and `rtlSupport` to create path automatically. Required
`displayCustomizer`	Set `true` if you want to display template customizer. Value: `true`, `false` Default: `true`
`lang`	Set current language. The value must be in the `TemplateCustomizer.LANGUAGES`, otherwise it will throw the error. Default: `en`
`defaultTheme`	Default theme index or name. Accepts number or string. Value: `0` (Default), `1` (Semi Dark), `2` (Bordered) Default: `0`
`defaultStyle`	Set default light,dark or system style. Value: `light`, `dark`, `system` Default: `light`
`defaultTextDir`	Set default text direction(Mode). `rtlSupport` must be true to use RTL direction. Value: `ltr`, `rtl` Default: `rtl`
`defaultContentLayout`	Set default content layout to compact(container-xxl)/wide(container-fluid). Value: `compact`, `wide` Default: `compact`
`defaultHeaderType`	Set default header(navbar/title-bar) static/fixed style (for horizontal layout only). Value: `static`, `fixed` Default: `fixed`
`defaultMenuCollapsed`	Set menu(navigation) collapsed by default. Value: `true`, `false` Default: `false`
`defaultNavbarType`	Set Navbar type is sticky by default. (For vertical layout only) Value: `sticky`, `static`, `hidden` Default: `sticky`
`defaultFooterFixed`	Set Footer fixed by default. Value: `true`, `false` Default: `false`
`defaultShowDropdownOnHover`	Show Dropdown on mouse hover. (for horizontal layout only) Value: `true`, `false` Default: `true`
`controls`	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'].