FAQS
General Style

How to Change Font Style ?

Step 1:

Go To style.scss (assets/scss/style.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 style.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: $default-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 Menu icons ?

By default menu icons are feather icons if you want to change icons please follow below steps
Step 1 :

To change Menu icons, open html page and go through app-sidebar section, in that section you will find feather icons of menu in i tag, there you can replace previous icon with your icon. Example as shown in below

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.

How to change Date Format ?

Step 1 :

To change Date Format, you have to add below js (dateFormat: "yy-mm-dd") in respective folder (assets/js/form-elements.js)
How to Enable RTL Version

How to Enable RTL Version?

Please follow the below steps to enable RTL Version
Step 1 :

To enable RTL Version you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for rtl as shown in below



											/******* RTL VERSION *******/

											// $('body').addClass('rtl');
Step 2 :
Remove the comments to enable rtl as shown below 


											/******* RTL VERSION *******/

											$('body').addClass('rtl');
Theme Styles

How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme
Step 1 :

To enable Dark Theme you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for dark-mode as shown in below



/******* Theme Style ********/

// $('body').addClass('light-mode');
// $('body').addClass('dark-mode');
// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable dark-mode as shown below 


														/******* Theme Style ********/

														// $('body').addClass('light-mode');
														$('body').addClass('dark-mode');
														// $('body').addClass('transparent-mode');

How to Enable Transparent Theme?

Please follow the below steps to enable Transparent Theme
Step 1 :

To enable Transparent Theme you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for transparent-mode as shown in below 




/******* Theme Style ********/

// $('body').addClass('light-mode');
// $('body').addClass('dark-mode');
// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable transparent-mode as shown below 



/******* Theme Style ********/

// $('body').addClass('light-mode');
// $('body').addClass('dark-mode');
$('body').addClass('transparent-mode');
Layout Width Styles

How to Enable Boxed-Layout?

Please follow the below steps to enable Boxed-Layout
Step 1 :

To enable Boxed-Layout you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for layout-boxed as shown in below 



/******* Full Width Layout Start ********/

// $('body').addClass('layout-fullwidth');
// $('body').addClass('layout-boxed');
Step 2 :
Remove the comments to enable layout-boxed as shown below 


/******* Full Width Layout Start ********/

// $('body').addClass('layout-fullwidth');
$('body').addClass('layout-boxed');
Layout Positions

How to Enable Scrollable-Layout?

Please follow the below steps to enable Scrollable-Layout
Step 1 :

To enable Scrollable-Layout you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for scrollable-layout as shown in below 



/******** *Header-Position Styles Start* ********/

// $('body').addClass('fixed-layout');
// $('body').addClass('scrollable-layout');
Step 2 :
Remove the comments to enable scrollable-layout as shown below 


/******** *Header-Position Styles Start* ********/

// $('body').addClass('fixed-layout');
$('body').addClass('scrollable-layout');
Sidemenu layout Styles

How to Enable Sidemenu-Icon-with Text?

Please follow the below steps to enable Sidemenu-Icon-with Text
Step 1 :

To enable Sidemenu-Icon-with Text you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for icontext-menu as shown in below 



											// ***** Icon with Text *****//
											// $('body').addClass('icontext-menu');
											// $('body').addClass('sidenav-toggled');
											// if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
											// icontext();
											// }
Step 2 :
Remove the comments to enable icontext-menu as shown below 


										// ***** Icon with Text *****//
										$('body').addClass('icontext-menu');
										$('body').addClass('sidenav-toggled');
										if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
										icontext();
										}

How to Enable Sidemenu-Icon Overlay?

Please follow the below steps to enable Sidemenu-Icon Overlay
Step 1 :

To enable Sidemenu-Icon Overlay you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for icon-overlay as shown in below 



											// ***** Icon Overlay ***** //
											// $('body').addClass('icon-overlay');
											// $('body').addClass('sidenav-toggled');
Step 2 :
Remove the comments to enable icon-overlay as shown below 


											// ***** Icon Overlay ***** //
											$('body').addClass('icon-overlay');
											$('body').addClass('sidenav-toggled');

How to Enable Closed Sidemenu?

Please follow the below steps to enable Closed Sidemenu
Step 1 :

To enable Closed Sidemenu you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for closed-leftmenu as shown in below 



											// ***** closed-leftmenu ***** //
											// $('body').addClass('closed-leftmenu');
											// $('body').addClass('sidenav-toggled')
Step 2 :
Remove the comments to enable closed-leftmenu as shown below 


											// ***** closed-leftmenu ***** //
											$('body').addClass('closed-leftmenu');
											$('body').addClass('sidenav-toggled')

How to Enable Hover Sidemenu?

Please follow the below steps to enable Hover Sidemenu
Step 1 :

To enable Hover Sidemenu you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for hover-submenu as shown in below 



											// ***** hover-submenu ***** //
											// $('body').addClass('hover-submenu');
											// $('body').addClass('sidenav-toggled')
											// if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
											// hovermenu();
											// }
Step 2 :
Remove the comments to enable hover-submenu as shown below 


											// ***** hover-submenu ***** //
											$('body').addClass('hover-submenu');
											$('body').addClass('sidenav-toggled')
											if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
											hovermenu();
											}

How to Enable Hover Sidemenu Style 1?

Please follow the below steps to enable Hover Sidemenu Style 1
Step 1 :

To enable Hover Sidemenu Style 1 you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for hover-submenu1 as shown in below 



											// ***** hover-submenu style 1 ***** //
											// $('body').addClass('hover-submenu1');
											// $('body').addClass('sidenav-toggled')
											// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
											// hovermenu();
											// }
Step 2 :
Remove the comments to enable hover-submenu1 as shown below 


											// ***** hover-submenu style 1 ***** //
											$('body').addClass('hover-submenu1');
											$('body').addClass('sidenav-toggled')
											if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
											hovermenu();
											}

How to Enable Double Menu Style?

Please follow the below steps to enable Double Menu Style
Step 1 :

To enable Double Menu Style you have to open custom-switcher.js (assets/js/custom-switcher.js) file and remove comments for double-menu as shown in below 



// ***** double-menu style  ***** //
// $('body').addClass('double-menu ');
// if(document.querySelector('.double-menu ').firstElementChild.classList.contains('login-img') !== true){
// doubleLayoutFn();
// }
Step 2 :
Remove the comments to enable hover-submenu1 as shown below 

// ***** double-menu style  ***** //
$('body').addClass('double-menu ');
if(document.querySelector('.double-menu ').firstElementChild.classList.contains('login-img') !== true){
doubleLayoutFn();
}
Landing page switcher styles

How to Enable Dark mode for landing page?

Please follow the below steps to enable Dark mode
Step 1 :

To enable Dark mode you have to open landing.js (assets/js/landing.js) file and remove comments for Dark Mode as shown in below 


										// DARK MODE
										// $('body').addClass('dark-mode');
Step 2 :
Remove the comments to enable dark-mode as shown below 


										// DARK MODE
										$('body').addClass('dark-mode');

How to Enable RTL for landing page?

Please follow the below steps to enable RTL
Step 1 :

To enable RTL you have to open landing.js (assets/js/landing.js) file and remove comments for RTL as shown in below 


										// RTL
										// $('body').addClass('rtl');
Step 2 :
Remove the comments to enable RTL as shown below 


										// RTL
										$('body').addClass('rtl');
To clear LocalStorage(cookie)

How to clear LocalStorage (cookie)?

Step1:

Open themeColors.js file assets/js/themeColors.js

To clear LocalStorage loading functions you need to remove localStorageBackup() 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.sashprimaryColor) {
		if (document.getElementById('colorID')) {
			document.getElementById('colorID').value = localStorage.sashprimaryColor;
		}
		document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashprimaryColor);
		document.querySelector('body')?.classList.add('light-mode');
		document.querySelector('body')?.classList.remove('dark-mode');
		document.querySelector('body')?.classList.remove('transparent-mode');

		$('#myonoffswitch3').prop('checked', true);
		$('#myonoffswitch6').prop('checked', true);
		$('#myonoffswitch1').prop('checked', true);
	}

	if (localStorage.sashdarkPrimary) {
		if (document.getElementById('darkPrimaryColorID')) {
			document.getElementById('darkPrimaryColorID').value = localStorage.sashdarkPrimary;
		}
		document.querySelector('html').style.setProperty('--primary-rgb', localStorage.sashdarkPrimary);
		document.querySelector('body')?.classList.add('dark-mode');
		document.querySelector('body')?.classList.remove('light-mode');
		document.querySelector('body')?.classList.remove('transparent-mode');

		$('#myonoffswitch2').prop('checked', true);

	}
	-------------------------
	-------------------------
}
Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js assets/js/themeColors.js , custom-switcher.js assets/js/custom-switcher.jsfiles.

LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out. 


				localStorage.setItem('sashlightMode', true);
				localStorage.removeItem('sashlightMode');
				localStorage.getItem("sashprimaryColor");
				localStorageBackup();
Important License Terms
  • You cannot charge from your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link