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:

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

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

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:

  1. Remove template-customizer.js scripts in the <head> section.
  2. Remove template-customizer-core-css and template-customizer-theme-css classes to core and theme-* stylesheets.
<!-- 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.

<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
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'
  }
}
© 2017- ThemeSelection, Hand-crafted & Made with ❤️