Customize Sneat super easily using just config.js
configuration file without touching single line of code 🤘.
Using config.js
file you can easily customize theme, styling, layouts and more...
It contains template Global variables and TemplateCustomizer settings.
Use config.js
to configure TemplateCustomizer settings application-wide by modifying global variables.
helpers.js
and template-customizer.js
scripts in the <head>
section.config.js
file to Initialize the TemplateCustomizer plugin. It's important to initialize the plugin in the <head>
sectiontemplate-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']. |