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.

Config

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

  1. Use helpers.js and template-customizer.js scripts in the <head> section.
  2. Use config.js file to Initialize the TemplateCustomizer plugin. It's important to initialize the plugin in the <head> section
  3. 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'].
© 2017- ThemeSelection, Hand-crafted & Made with ❤️