You can easily customize this template without changing any code. Just use the settings in the config.js file. This means you can make all your changes quickly and easily through this file. It allows you to adjust the template to fit your needs perfectly, making the customization process smooth and simple.
Config.js contains template Global variables and TemplateCustomizer settings that can helps you easily customize theme, styling, layouts and more...
/**
* 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']
});
}