Template Customizer | Materio - Bootstrap Material Design Admin Template

Template Customizer ⚙️

Customize template layout options and theme look & feel.

Usage

TemplateCustomizer plugin allows you and your customers to customize template themes, layout options and look & feel in real time.
Using this plugin is recommended from our end, but its optional too if you do not wish to use it. Please read the both case carefully to understand usage & benefits it.

With Customizer

To use TemplateCustomizer plugin, you need to:

Use helpers.js and template-customizer.js scripts in the <head> section.
Use assets/js/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.

Important:

You must use(include) template-customizer.js to use TemplateCustomizer settings from config.js.
To just hide template-customizer.js and want to use it features, set displayCustomizer value to false in config.js. Read more
TemplateCustomizer plugin use localStorage to persist the user configuration. To enable/disable localStorage from config.js using enableMenuLocalStorage property. Read more

<!-- Core CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css" class="template-customizer-core-css" />
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
<link rel="stylesheet" href="../../assets/css/demo.css" />

<!-- Vendors CSS -->

<!-- Page CSS -->

<!-- Helpers -->
<script src="../../assets/vendor/js/helpers.js"></script>

<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js.  -->
<script src="../../assets/vendor/js/template-customizer.js"></script>
<!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
<script src="../../assets/js/config.js"></script>

TemplateCustomizer plugin consider the configuration priority in following order:

First it check localStorage configuration of the property.
If localStorage property value is not set or localStorage is disabled, It use TemplateCustomizer settings from config.js.
In last if property is not defined TemplateCustomizer settings, then default CSS Classes or HTML markup will be rendered.

Info: Get current config setting by using console.log(window.templateCustomizer.settings);. Do not change it directly, use methods instead.

Without Customizer

It's only recommended to use template without customizer, if you wish to configure themes, layouts and other customization by changing HTML structure and using css classes.

To remove TemplateCustomizer plugin, you need to:

Remove template-customizer.js scripts in the <head> section.
Remove template-customizer-core-css and template-customizer-theme-css classes to core and theme-* stylesheets.

Warning: TemplateCustomizer and localStorage setting from config.js will not work anymore once you remove it.

<!-- Core CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/rtl/core.css"/>
<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-default.css"/>
<link rel="stylesheet" href="../../assets/css/demo.css" />

<!-- Vendors CSS -->

<!-- Page CSS -->

<!-- Helpers -->
<script src="../../assets/vendor/js/helpers.js"></script>

<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
<!--? Config:  Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file.  -->
<script src="../../assets/js/config.js"></script>

Custom Themes

Configure TemplateCustomizer settings application-wide by modifying global variables.

For example if you have create your own custom theme named as raspberry and wants to add it to template customizer options use below example code.

Warning: Don't forget to create custom theme scss files. For ex. theme-raspberry.scss and theme-raspberry-dark.scss and include them. Read more

<link rel="stylesheet" href="../../assets/vendor/css/rtl/theme-raspberry.css" class="template-customizer-theme-css" />

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

Variable	Value
`TemplateCustomizer.THEMES`	`[ { "name": "theme-default", "title": "Default" }, { "name": "theme-semi-dark", "title": "Semi Dark" }, { "name": "theme-bordered", "title": "Bordered" } ]`

Internationalization

Easily translate the Template Customizer using internationalization.

For example if you want to add new language as French.

ThemeSettings.LANGUAGES.fr = {...}

Current template options are set according to English Language. To update with other languages, Find default options below for the reference :

Variable Value

Variable	Value
`TemplateCustomizer.LANGUAGES`	`{ en: { panel_header: 'Template Customizer', panel_sub_header: 'Customize and preview in real time', theming_header: 'Theming', style_label: 'Style (Mode)', theme_label: 'Themes', layout_header: 'Layout', layout_label: 'Menu (Navigation)', layout_header_label: 'Header Types', content_label: 'Content', layout_navbar_label: 'Navbar Type', direction_label: 'Direction' } }`

TemplateCustomizer.LANGUAGES

                  {
  en: {
    panel_header: 'Template Customizer',
    panel_sub_header: 'Customize and preview in real time',
    theming_header: 'Theming',
    style_label: 'Style (Mode)',
    theme_label: 'Themes',
    layout_header: 'Layout',
    layout_label: 'Menu (Navigation)',
    layout_header_label: 'Header Types',
    content_label: 'Content',
    layout_navbar_label: 'Navbar Type',
    direction_label: 'Direction'
  }
}