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: $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.js (assets/js/custom.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.js (assets/js/custom.js) file and remove comments for dark-mode as shown in below


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

										
Step 2 :
Remove the comments to enable dark-mode as shown below


										//---- Dark mode ----- //
										$('body').addClass('dark-mode');
										$('body').removeClass('light-mode');
										$('body').removeClass('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.js (assets/js/custom.js) file and remove comments for transparent-mode as shown in below



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

										
Step 2 :
Remove the comments to enable transparent-mode as shown below


										//---- Transparent mode ----//
										$('body').addClass('transparent-mode');
										$('body').removeClass('light-mode');
										$('body').removeClass('dark-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.js (assets/js/custom.js) file and remove comments for layout-boxed as shown in below


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

										/*Layout-width Styles*/
										$('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.js (assets/js/custom.js) file and remove comments for scrollable-layout as shown in below


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

										/*Header-Position Styles*/
										$('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.js (assets/js/custom.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.js (assets/js/custom.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.js (assets/js/custom.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.js (assets/js/custom.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.js (assets/js/custom.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();
											}
										
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)?