FAQS
General Style
How to Change Font Style ?
Step 1:
Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )
if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file
How to Select font Family
Example:
Step 2:
And paste Your Selected font-family in _fonts.scss
Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
Step 3:
And add the Your Selected font-family in _bootstrap-styles.scss(assets/scss/bootstrap/_bootstrap-styles.scss)
Example:
body {
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: $color;
text-align: left;
background-color: $background;
}
Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.
How to Change Logo ?
Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.
Navigation Style
How to Enable Horizontal Click Menu?
Please follow the bellow steps to enable Horizontal Click Menu Style
Step 1 :
To enable Horizontal Click Menu Style you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for horizontalmenu as shown in below
/* Horizontal Menu Start */
// $('body').addClass('horizontalmenu');
// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
// checkHoriMenu();
// }
/*Horizontal Menu End */
Step 2 :
Remove the comments to enablehorizontalmenu as shown below
/* Horizontal Menu Start */
$('body').addClass('horizontalmenu');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
checkHoriMenu();
}
/*Horizontal Menu End */
How to Enable Horizontal Hover Menu?
Please follow the bellow steps to enable Horizontal Hover Menu Style
Step 1 :
To enable Horizontal Hover Menu Style you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for horizontalmenu-hover as shown in below
/* Horizontal Hover Menu Start */
// $('body').addClass('horizontalmenu-hover');
// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
// checkHoriMenu();
// }
/* Horizontal Hover Menu End */
Step 2 :
Remove the comments to enablehorizontalmenu-hover as shown below
/* Horizontal Hover Menu Start */
$('body').addClass('horizontalmenu-hover');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
checkHoriMenu();
}
/* Horizontal Hover Menu End */
How to Enable RTL Version
How to Enable RTL Version?
Please follow the bellow steps to enable RTL Version
Step 1 :
To enable RTL Version you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for rtl as shown in below
/* RTL version Start */
// $('body').addClass('rtl');
/* RTL version End */
Step 2 :
Remove the comments to enablertl as shown below
/* RTL version Start */
$('body').addClass('rtl');
/* RTL version End */
Theme Styles
How to Enable Dark Theme?
Please follow the bellow steps to enable Dark Theme
Step 1 :
To enable Dark Theme you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for dark-theme as shown in below
/* Dark Theme Start */
// $('body').addClass('dark-theme');
// $('body').removeClass('light-theme');
/* Dark Theme End */
Step 2 :
Remove the comments to enabledark-theme as shown below
/* Dark Theme Start */
$('body').addClass('dark-theme');
$('body').removeClass('light-theme');
/* Dark Theme End */
Header Styles
How to Enable Color-header?
Please follow the bellow steps to enable Color-header
Step 1 :
To enable Color-header you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for color-header as shown in below
/* Color Header Start */
// $('body').addClass('color-header');
/* Color Header End */
Step 2 :
Remove the comments to enablecolor-header as shown below
/* Color Header Start */
$('body').addClass('color-header');
/* Color Header End */
How to Enable Dark-header?
Please follow the bellow steps to enable Dark-header
Step 1 :
To enable Dark-header you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for header-dark as shown in below
/* Dark Header Start */
// $('body').addClass('header-dark');
/* Dark Header End */
Step 2 :
Remove the comments to enableheader-dark as shown below
/* Dark Header Start */
$('body').addClass('header-dark');
/* Dark Header End */
How to Enable Light-header?
Please follow the bellow steps to enable Light-header
Step 1 :
To enable Light-header you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for header-light as shown in below
/* Light Header Start */
// $('body').addClass('header-light');
/* Light Header End */
Step 2 :
Remove the comments to enableheader-light as shown below
/* Light Header Start */
$('body').addClass('header-light');
/* Light Header End */
Menu Styles
How to Enable Light Menu?
Please follow the bellow steps to enable Light Menu
Step 1 :
To enable Light Menu you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for light-menu as shown in below
/* Light Menu Start */
// $('body').addClass('light-menu');
/* Light Menu End */
Step 2 :
Remove the comments to enablelight-menu as shown below
/* Light Menu Start */
$('body').addClass('light-menu');
/* Light Menu End */
How to Enable Color Menu?
Please follow the bellow steps to enable Color Menu
Step 1 :
To enable Color Menu you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for color-menu as shown in below
/* Color Menu Start */
// $('body').addClass('color-menu');
/* Color Menu End */
Step 2 :
Remove the comments to enablecolor-menu as shown below
/* Color Menu Start */
$('body').addClass('color-menu');
/* Color Menu End */
How to Enable Dark Menu?
Please follow the bellow steps to enable Dark Menu
Step 1 :
To enable Dark Menu you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for dark-menu as shown in below
/* Dark Menu Start */
// $('body').addClass('dark-menu');
/* Dark Menu End */
Step 2 :
Remove the comments to enabledark-menu as shown below
/* Dark Menu Start */
$('body').addClass('dark-menu');
/* Dark Menu End */
Layout Width Styles
How to Enable Full-Width-Layout?
Please follow the bellow steps to enable Full-Width-Layout
Step 1 :
To enable Full-Width-Layout you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for layout-fullwidth as shown in below
/* Full Width Layout Start */
// $('body').addClass('layout-fullwidth');
/* Full Width Layout End */
Step 2 :
Remove the comments to enablelayout-fullwidth as shown below
/* Full Width Layout Start */
$('body').addClass('layout-fullwidth');
/* Full Width Layout End */
How to Enable Boxed-Layout?
Please follow the bellow steps to enable Boxed-Layout
Step 1 :
To enable Boxed-Layout you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for layout-boxed as shown in below
/* Boxed Layout Start */
// $('body').addClass('layout-boxed');
/* Boxed Layout End */
Step 2 :
Remove the comments to enablelayout-boxed as shown below
/* Boxed Layout Start */
$('body').addClass('layout-boxed');
/* Boxed Layout End */
Layout Positions
How to Enable Scrollable-Layout?
Please follow the bellow steps to enable Scrollable-Layout
Step 1 :
To enable Scrollable-Layout you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for scrollable-layout as shown in below
/* Header-Scrollable Start */
// $('body').addClass('scrollable-layout');
/* Header-Scrollable End */
Step 2 :
Remove the comments to enablescrollable-layout as shown below
/* Header-Scrollable Start */
$('body').addClass('scrollable-layout');
/* Header-Scrollable End */
How to Enable Fixed-Layout?
Please follow the bellow steps to enable Fixed-Layout
Step 1 :
To enable Fixed-Layout you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for fixed-layout as shown in below
/* Header-Fixed Start */
// $('body').addClass('fixed-layout');
/* Header-Fixed End */
Step 2 :
Remove the comments to enablefixed-layout as shown below
/* Header-Fixed Start */
$('body').addClass('fixed-layout');
/* Header-Fixed End */
Sidemenu layout Styles
How to Enable Sidemenu-Icon-with Text?
Please follow the bellow steps to enable Sidemenu-Icon-with Text
Step 1 :
To enable Sidemenu-Icon-with Text you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for icontext-menu as shown in below
/* Icon Text Sidemenu Start */
// $('body').addClass('icontext-menu');
// $('body').addClass('main-sidebar-hide');
// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
// icontext();
// }
/* Icon Text Sidemenu End */
Step 2 :
Remove the comments to enableicontext-menu as shown below
/* Icon Text Sidemenu Start */
$('body').addClass('icontext-menu');
$('body').addClass('main-sidebar-hide');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
icontext();
}
/* Icon Text Sidemenu End */
How to Enable Sidemenu-Icon Overlay?
Please follow the bellow steps to enable Sidemenu-Icon Overlay
Step 1 :
To enable Sidemenu-Icon Overlay you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for icon-overlay as shown in below
/* Icon Overlay Sidemenu Start */
// $('body').addClass('icon-overlay');
// $('body').addClass('main-sidebar-hide');
/* Icon Overlay Sidemenu End */
Step 2 :
Remove the comments to enableicon-overlay as shown below
/* Icon Overlay Sidemenu Start */
$('body').addClass('icon-overlay');
$('body').addClass('main-sidebar-hide');
/* Icon Overlay Sidemenu End */
How to Enable Closed Sidemenu?
Please follow the bellow steps to enable Closed Sidemenu
Step 1 :
To enable Closed Sidemenu you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for closed-leftmenu as shown in below
/* Closed Sidemenu Start */
// $('body').addClass('closed-leftmenu');
// $('body').addClass('main-sidebar-hide');
/* Closed Sidemenu End */
Step 2 :
Remove the comments to enableclosed-leftmenu as shown below
/* Closed Sidemenu Start */
$('body').addClass('closed-leftmenu');
$('body').addClass('main-sidebar-hide');
/* Closed Sidemenu End */
How to Enable Hover Sidemenu?
Please follow the bellow steps to enable Hover Sidemenu
Step 1 :
To enable Hover Sidemenu you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for hover-submenu as shown in below
/* Hover Submenu Start */
// $('body').addClass('hover-submenu');
// $('body').addClass('main-sidebar-hide');
// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
// hovermenu();
// }
/* Hover Submenu End */
Step 2 :
Remove the comments to enablehover-submenu as shown below
/* Hover Submenu Start */
$('body').addClass('hover-submenu');
$('body').addClass('main-sidebar-hide');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
hovermenu();
}
/* Hover Submenu End */
How to Enable Hover Sidemenu Style 1?
Please follow the bellow steps to enable Hover Sidemenu Style 1
Step 1 :
To enable Hover Sidemenu Style 1 you have to open switcher-style.js (assets/js/switcher-style.js) file and remove comments for hover-submenu1 as shown in below
/* Hover Submenu Style 1 Start */
// $('body').addClass('hover-submenu1');
// $('body').addClass('main-sidebar-hide');
// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
// hovermenu();
// }
/* Hover Submenu Style 1 End */
Step 2 :
Remove the comments to enablehover-submenu1 as shown below
/* Hover Submenu Style 1 Start */
$('body').addClass('hover-submenu1');
$('body').addClass('main-sidebar-hide');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
hovermenu();
}
/* Hover Submenu Style 1 End */
Local Storage
How to clear LocalStorage (cookie)?
Step1:
Open themeColors.js file
assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() {} and localStorageBackup() calling function in themeColors.js as shown below
function localStorageBackup() {
'use strict'
// if there is a value stored, update color picker and background color
// Used to retrive the data from local storage
if (localStorage.dashplexprimaryColor) {
// document.getElementById('colorID').value = localStorage.dashplexprimaryColor;
document.querySelector('html').style.setProperty('--primary-bg-color', localStorage.dashplexprimaryColor);
document.querySelector('html').style.setProperty('--primary-bg-hover', localStorage.dashplexprimaryHoverColor);
document.querySelector('html').style.setProperty('--primary-bg-border', localStorage.dashplexprimaryBorderColor);
}
if (localStorage.dashplexbgColor) {
document.body.classList.add('dark-theme');
document.body.classList.remove('light-theme');
$('#myonoffswitch2').prop('checked', true);
$('#myonoffswitch5').prop('checked', true);
$('#myonoffswitch8').prop('checked', true);
// document.getElementById('bgID').value = localStorage.dashplexthemeColor;
document.querySelector('html').style.setProperty('--dark-body', localStorage.dashplexbgColor);
document.querySelector('html').style.setProperty('--dark-theme', localStorage.dashplexthemeColor);
}
if(localStorage.dashplexlighttheme){
document.querySelector('body')?.classList.add('light-theme');
document.querySelector('body')?.classList.remove('dark-theme');
$('#myonoffswitch1').prop('checked', true);
$('#myonoffswitch3').prop('checked', true);
$('#myonoffswitch6').prop('checked', true);
}
if(localStorage.dashplexdarktheme){
document.querySelector('body')?.classList.add('dark-theme');
document.querySelector('body')?.classList.remove('light-theme');
}
if(localStorage.dashplexleftmenu){
document.querySelector('body').classList.add('leftmenu')
}
if(localStorage.dashplexhorizontalmenu){
document.querySelector('body').classList.add('horizontalmenu')
}
if(localStorage.dashplexhorizontalmenuHover){
document.querySelector('body').classList.add('horizontalmenu-hover')
}
if(localStorage.dashplexrtl){
document.querySelector('body').classList.add('rtl')
}
if(localStorage.dashplexclosedmenu){
document.querySelector('body').classList.add('closed-menu')
}
if(localStorage.dashplexicontextmenu){
document.querySelector('body').classList.add('icontext-menu');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
icontext();
}
}
if(localStorage.dashplexsideiconmenu){
document.querySelector('body').classList.add('icon-overlay')
document.querySelector('body').classList.add('main-sidebar-hide')
}
if(localStorage.dashplexhoversubmenu){
document.querySelector('body').classList.add('hover-submenu')
document.querySelector('body').classList.add('main-sidebar-hide')
}
if(localStorage.dashplexhoversubmenu1){
document.querySelector('body').classList.add('hover-submenu1')
document.querySelector('body').classList.add('main-sidebar-hide')
}
if(localStorage.dashplexlightmenu){
document.querySelector('body').classList.add('light-menu')
document.querySelector('body').classList.remove('dark-menu')
}
if(localStorage.dashplexcolormenu){
document.querySelector('body').classList.add('color-menu')
document.querySelector('body').classList.remove('dark-menu')
}
if(localStorage.dashplexdarkmenu){
document.querySelector('body').classList.add('dark-menu')
}
if(localStorage.dashplexlightheader){
document.querySelector('body').classList.add('header-light')
}
if(localStorage.dashplexcolorheader){
document.querySelector('body').classList.add('color-header')
}
if(localStorage.dashplexdarkheader){
document.querySelector('body').classList.add('header-dark')
}
}
Step2:
To remove complete LocalStorage saving you need to remove all
localstorage related calling functions in switcher-styles.js
assets/js/switcher-styles.js files.
LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.
localStorage.setItem("dashplexdarktheme", true);
localStorage.removeItem("dashplexlighttheme");