Customize Sneat super easily using just custom.php
configuration file without touching single line of code 🤘.
To configure your template, we will be using config/custom.php
file, which has all the template configurations listed with their valid values. Just change the configurations as per your requirement and you are done.
TemplateCustomizer settings: Template customization settings object to easily customize the template.
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.
/**
* 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
};
window.assetsPath = document.documentElement.getAttribute('data-assets-path');
window.baseUrl = document.documentElement.getAttribute('data-base-url') + '/';
window.templateName = document.documentElement.getAttribute('data-template');
window.rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
/**
* 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'),
baseUrl = document.documentElement.getAttribute('data-base-url') + '/',
templateName = document.documentElement.getAttribute('data-template'),
rtlSupport = true; // set true for rtl support (rtl + ltr), false for ltr only.
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. |
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 |
Use custom.php
to configure TemplateCustomizer settings.
custom.php
file found at
config -> custom.php
path.
// Custom 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/).
return [
'custom' => [
'myLayout' => 'vertical', // Options[String]: vertical(default), horizontal
'myTheme' => 'theme-default', // Options[String]: theme-default(default), theme-bordered, theme-semi-dark
'myStyle' => 'light', // Options[String]: light(default), 'dark' & 'system' mode
'myRTLSupport' => true, // options[Boolean]: true(default), false // To provide RTLSupport or not
'myRTLMode' => false, // options[Boolean]: false(default), true // To set layout to RTL layout (myRTLSupport must be true for rtl mode)
'hasCustomizer' => true, // options[Boolean]: true(default), false // Display customizer or not THIS WILL REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WON'T WORK
'displayCustomizer' => true, // options[Boolean]: true(default), false // Display customizer UI or not, THIS WON'T REMOVE INCLUDED JS FILE. SO LOCAL STORAGE WILL WORK
'contentLayout' => 'compact', // options[String]: 'compact', 'wide' (compact=container-xxl, wide=container-fluid)
'navbarType' => 'sticky', // options[String]: 'sticky', 'static', 'hidden (Only for vertical Layout)'
'footerFixed' => false, // options[Boolean]: false(default), true // Footer Fixed
'menuFixed' => true, // options[Boolean]: true(default), false // Layout(menu) Fixed (Only for vertical Layout)
'menuCollapsed' => false, // options[Boolean]: false(default), true // Show menu collapsed, (Only for vertical Layout)
'headerType' => 'fixed', // options[String]: 'static', 'fixed' (for horizontal layout only)
'showDropdownOnHover' => true, // true, false (for horizontal layout only)
'customizerControls' => [
'rtl',
'style',
'headerType',
'contentLayout',
'layoutCollapsed',
'layoutNavbarOptions',
'themes',
], // To show/hide customizer options
],
];
Template customization settings to easily customize the template.
Variable | description |
---|---|
myLayout
|
Set current layout of the template. Value: Vertical (Default), Horizontal Default: Vertical |
myTheme
|
Default theme name. Accepts string. Value: theme-default (Default), theme-semi-dark (Semi Dark), theme-bordered (Bordered)Default: theme-default |
myStyle
|
Set default light/dark style. Value: light , dark Default: light |
myRTLSupport
|
To use same Layout style for LTR & RTL, set default value true. Value: true , false Default: true |
myRTLMode
|
Set default text direction(Mode). myRTLSupport must be true to use RTL direction. Value: true , false Default: false |
hasCustomizer
|
Set default true to show customizer. If set to false , it will not include customizer js and LocalStorage won't work.Value: true , false Default: true |
displayCustomizer
|
Set default true to show customizer UI. If set to false , it will hide only customizer UI and LocalStorage will work.Value: true , false Default: true |
contentLayout
|
Set content layout compact by default. Value: compact , wide Default: compact |
menuFixed
|
Set menu(navigation) fixed by default. (Vertical layout only) Value: true , false Default: true |
menuCollapsed
|
Set menu(navigation) collapsed by default. Value: true , false Default: false |
headerType
|
Set header type fixed by default. (horizontal layout only) Value: fixed and static , hidden Default: fixed |
navbarType
|
Set Navbar type sticky by default. (Vertical layout only) Value: sticky and static , hidden Default: sticky |
footerFixed
|
Set Footer fixed by default. Value: true , false Default: false |
showDropdownOnHover
|
Show Dropdown on mouse hover for Horizontal Layout. Value: true , false Default: true |
customizerControls
|
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']. |
You can use all the custom.php
options at page level to customize for particular page(s).
App -> Http -> Controller -> {Controller File}
file.
Please find other configuration options here
You need to set configurations options to controller files, Like below :
$pageConfigs = ['myLayout' => 'blank'];
return view('content.authentications.auth-login-basic', ['pageConfigs' => $pageConfigs]);
You can use below configuration variables to show/hide sections of layout. Like navbar, footer, etc..
To set page level configurations for display elements, update below variables at page level or Layout level as well :
@php
/* Display elements */
$isNavbar = true; // To show/hide navbar
$isMenu = true; // To show/hide menu
$isFlex = false; // To show/hide Flex Layout
$isFooter = true; // To show/hide footer
@endphp
This will pass page level configurations to view.