Sneat Dashboard FREE by ThemeSelection

Template Customizer ⚙️

Customize template layout options and theme look & feel.

Usage

TemplateCustomizer plugin allows you and your customers to customize template Primary Color, Themes, Skins, other 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 of 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

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.

<!-- Core CSS -->
<link rel="stylesheet" href="../../assets/vendor/css/core.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

To remove template customizer from whole layout with all the includes, please make sure all the below steps followed properly:

Remove included template-customizer.js script from the <head> section of all the HTML pages.

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/core.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>

Remove template-customizer.js file from assets/vendor/js/ folder.
Remove _template-customizer folder from js/ folder.
Remove template customizer code from config.js file.
Reload your HTML page and All set!!

Custom Skins

Configure TemplateCustomizer settings application-wide by modifying global variables.

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

Warning: Don't forget to create custom Variables in scss files. For ex. Add css variables for data-skin="raspberry" and Don't forget to include variables for dark/light . Read more

// Skins
TemplateCustomizer.SKINS[
  ...
  {
    name: 'raspberry',
    title: 'Raspberry',
    image: 'skin-raspberry.svg'
  }
];

Variable Value

Variable	Value
`TemplateCustomizer.SKINS`	`[ { name: 'default', title: 'Default', image: 'skin-default.svg' }, { name: 'bordered', title: 'Bordered', image: 'skin-border.svg' }, { name: 'raspberry', title: 'Raspberry', image: 'skin-raspberry.svg' } ]`

TemplateCustomizer.SKINS

                  [
  {
    name: 'default',
    title: 'Default',
    image: 'skin-default.svg'
  },
  {
    name: 'bordered',
    title: 'Bordered',
    image: 'skin-border.svg'
  },
  {
    name: 'raspberry',
    title: 'Raspberry',
    image: 'skin-raspberry.svg'
  }
]

Internationalization

Easily translate the Template Customizer using internationalization.

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

TemplateCustomizer.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', color_label: 'Primary Color', theme_label: 'Theme', skin_label: 'Skins', semiDark_label: 'Semi Dark', 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',
    color_label: 'Primary Color',
    theme_label: 'Theme',
    skin_label: 'Skins',
    semiDark_label: 'Semi Dark',
    layout_header: 'Layout',
    layout_label: 'Menu (Navigation)',
    layout_header_label: 'Header Types',
    content_label: 'Content',
    layout_navbar_label: 'Navbar Type',
    direction_label: 'Direction'
  },
}