Docs: Customization

Bootstrap Config 🤩

Customize Sneat super easily using just config.js configuration file without touching single line of code 🤘.

Introduction

Using config.js file you can easily customize theme, styling, layouts and more...

It contains template Global variables and TemplateCustomizer settings.

Global variables: Are used as JS global variables i.e theme colors which are used in charts and other js library.
TemplateCustomizer settings: Template customization settings object to easily customize the template.

Important:

You must use(include) template-customizer.js to use TemplateCustomizer settings.
Make sure you clear the browser local storage In order to see the config changes in the template. Refer How to clear local storage?

Config

Use config.js to configure TemplateCustomizer settings application-wide by modifying global variables.

Use helpers.js and template-customizer.js scripts in the <head> section.
Use config.js file to Initialize the TemplateCustomizer plugin. It's important to initialize the plugin in the <head> section

/**
 * 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
 !Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc
*/
window.config = {
  colors: {
    primary: '// USE HEX COLOR CODE HERE',
    secondary: '// USE HEX COLOR CODE HERE',
    ...
  },
  colors_label: {
    primary: '// USE HEX COLOR CODE HERE',
    secondary: '// USE HEX COLOR CODE HERE',
    ...
  },
  enableMenuLocalStorage: true // Enable menu state with local storage support
};

window.assetsPath = document.documentElement.getAttribute('data-assets-path');
window.templateName = document.documentElement.getAttribute('data-template');

/**
 * TemplateCustomizer
 * ! You must use(include) template-customizer.js to use TemplateCustomizer settings
 * -----------------------------------------------------------------------------------------------
 */

/**
 * TemplateCustomizer settings
 * -------------------------------------------------------------------------------------
 * displayCustomizer: true(Show customizer), false(Hide customizer)
 * lang: To set default language, Add more languages and set default. Fallback language is 'en'
 * defaultPrimaryColor: '#7367F0' | Set default primary color
 * defaultSkin: 0(Default), 1(Bordered)
 * defaultTheme: 'light', 'dark', 'system'
 * defaultSemiDark: true, false (For dark menu only)
 * 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' (For vertical layout only)
 * defaultTextDir: 'ltr', 'rtl' (Direction)
 * defaultFooterFixed: true, false (For vertical layout only)
 * defaultShowDropdownOnHover : true, false (for horizontal layout only)
 * controls: [ 'color', 'theme', 'skins', 'semiDark', 'layoutCollapsed', 'layoutNavbarOptions', 'headerType', 'contentLayout', 'rtl' ] | Show/Hide customizer controls
 */

if (typeof TemplateCustomizer !== 'undefined') {
  window.templateCustomizer = new TemplateCustomizer({
    displayCustomizer: true,
    lang: localStorage.getItem('templateCustomizer-' + templateName + '--Lang') || 'en', // Set default language here
    // defaultPrimaryColor: '#D11BB4',
    // defaultSkin: 1,
    // defaultTheme: 'system',
    // defaultSemiDark: true,
    // defaultContentLayout: 'wide',
    // defaultHeaderType: 'static',
    // defaultMenuCollapsed: true,
    // defaultNavbarType: 'static',
    // defaultTextDir: 'rtl',
    // defaultFooterFixed: false,
    // defaultShowDropdownOnHover: false,
    controls: [
      'color',
      'theme',
      'skins',
      'semiDark',
      'layoutCollapsed',
      'layoutNavbarOptions',
      'headerType',
      'contentLayout',
      'rtl'
    ]
  });
}

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`	JS global variables for colors. (!Please use the hex color code (#000) here. Don't use rgba(), hsl(), etc) 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'`

TemplateCustomizer settings

Template customization settings object to easily customize the template.

Variable	description
`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`
`defaultPrimaryColor`	Set default primary color. Accepts hexcode string. Value: `#D11BB4` Default: `It will consider primary color`
`defaultSkin`	Default theme index or name. Accepts number or string. Value: `0` (Default), `1` (Bordered) Default: `0`
`defaultTheme`	Set default light,dark or auto style. Value: `light`, `dark`, `auto` Default: `light`
`defaultSemiDark`	Set `true` if you want to display Semi Dark Template. Value: `true`, `false` Default: `false`
`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`
`defaultTextDir`	Set default text direction(Mode). Value: `ltr`, `rtl` Default: `rtl`
`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: [ 'color', 'theme', 'skins', 'semiDark', 'layoutCollapsed', 'layoutNavbarOptions', 'headerType', 'contentLayout', 'rtl' ]` For ex. If you wish to display only style and theme options, just pass ['style', 'themes'].