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-custom.scss(assets/scss/bootstrap/_bootstrap-custom.scss)

Example:


body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	background-color: $white;
	font-family: "Roboto", sans-serif !important;
	background: $background;
	color: $color;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: none;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-font-feature-settings: "liga" 0;
	font-feature-settings: "liga" 0;
	overflow-y: scroll;
	width: 100%;
	position: relative;
	}

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.

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 custom.js ({assets/js/custom.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 enable rtl 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 custom.js ({assets/js/custom.js} file and remove comments for dark-theme as shown in below



	/*Dark Theme Start*/
	// $('body').addClass('dark-theme');
	/*Dark Theme End*/
Step 2 :
Remove the comments to enable dark-theme as shown below 


	/*Dark Theme Start*/
	$('body').addClass('dark-theme');
	/*Dark Theme End*/

How to Enable Light Theme?

Please follow the bellow steps to enable Light Theme
Step 1 :

To enable Light Theme you have to open custom.js ({assets/js/custom.js} file and remove comments for light-theme as shown in below



	/*Light Theme Start*/
	//$('body').addClass('light-theme');
	/*Light Theme End*/
Step 2 :
Remove the comments to enable light-theme as shown below 


	/*Light Theme Start*/
	$('body').addClass('light-theme');
	/*Light Theme End*/
How to change any chart color according to your theme color?

By default, the chart color will change based on the theme color.

You can replace the default chart with your own chart, but in order to change the colors of your chart with respect to the theme colors you have to follow the below steps.

How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?

Note: This process is only for replace your own chart in index.html page

Step1:

Go to root path: assets/js/index.js in that js file you will find a function named as index " function index(); " inside of that function replace the old chart js data with your new chart js data, in order to change your chart color according to your themecolor then add " myVarVal" (Ex:- myVarVal to that particular color field based on your requirement.

Step2:

Navigate to root path: assets/js/ and open themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

if (document.querySelector('#chartLine') !== null) { index(); }

Then change it's id name based on the id that you've used for your particular chart.

Ex: How do I modify the Id in the "themeColors.js" file?

    Before : " if (document.querySelector('#chartLine') !== null) { index(); }"

    After : " if(document.querySelector('# your chart id') !== null){ sales(); }"

How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?

Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)

If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.

Step 1:

If you want to add any chart to any other page then follow the below process.

Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique " name (for example in my case: myFunction() ), and then place the chart js content inside of that function.

Note: If there is more than one chart then you need to create different functions for different charts respectively.

Ex-1: myFunction1() { chart js1 content }

Ex-2:myFunction2() { chart js2 content }
Step 2:

Navigate to root path: assets/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

"if (document.querySelector('#chartLine') !== null) { index(); }"

Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)

Ex: " if(document.querySelector('# your chart id') !== null){ myFunction(); =>created function for the above id }"
Step 3:

If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process

Ex : Go to root path: assets/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " value (Ex:- myVarVal )to that particular color field based on your requirement.

FAQ'S

1) How to Enable Color-header?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for color-header to enable color-header style as shown in below



/*Color Header Start*/
// $('body').addClass('color-header');
/*Color Header End*/
Remove the comments to enable color-header as shown below 

/*Color Header Start*/
$('body').addClass('color-header');
/*Color Header End*/

2) How to Enable Dark-header?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for header-dark to enable header-dark style as shown in below


												/*Dark Header Start*/
												// $('body').addClass('header-dark');
												/*Dark Header End*/
Remove the comments to enable header-dark as shown below 

												/*Dark Header Start*/
												 $('body').addClass('header-dark');
												/*Dark Header End*/

3) How to Enable Light-header?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for header-light to enable header-light style as shown in below


												/*Light Header Start*/
												// $('body').addClass('header-light');
												/*Light Header End*/
Remove the comments to enable header-light as shown below 

												/*Light Header Start*/
												$('body').addClass('header-light');
												/*Light Header End*/

4) How to Enable Light Menu?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for light-menu to enable light-menu style as shown in below


												/*Light Menu Start*/
												// $('body').addClass('light-menu');
												/*Light Menu End*/
Remove the comments to enable light-menu as shown below 

												/*Light Menu Start*/
												$('body').addClass('light-menu');
												/*Light Menu End*/

5) How to Enable Color Menu?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for color-menu to enable color-menu style as shown in below


												/*Color Menu Start*/
												// $('body').addClass('color-menu');
												/*Color Menu End*//
Remove the comments to enable color-menu as shown below 

												/*Color Menu Start*/
												$('body').addClass('color-menu');
												/*Color Menu End*/

6) How to Enable Dark Menu?

open custom.js path:(HTML/Spruha/assets/js/custom.js)file and remove comments for dark-menu to enable dark-menu style as shown in below


												/*Dark Menu Start*/
												// $('body').addClass('dark-menu');
												/*Dark Menu End*/
Remove the comments to enable dark-menu as shown below 

												/*Dark Menu Start*/
												$('body').addClass('dark-menu');
												/*Dark Menu End*/

7) How to Enable Boxed-Layout?

open custom.js path:(HTML/Spruha/assets/js/custom.js)file and remove comments for layout-boxed to enable layout-boxed style as shown in below


												/*Boxed Layout Start*/
												// $('body').addClass('layout-boxed');
												/*Boxed Layout End*/
Remove the comments to enable layout-boxed as shown below 

												/*Boxed Layout Start*/
												$('body').addClass('layout-boxed');
												/*Boxed Layout End*/

8) How to Enable Scrollable-Layout?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


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

												/*Header-Position Styles Start*/
												$('body').addClass('scrollable-layout');
												/*Header-Position Styles End*/

9) How to Enable Sidemenu-Icon-with Text?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for icontext-menu to enable icontext-menu style as shown in below


												/*Icon Text Sidemenu Start*/
												// $('body').addClass('icontext-menu');
												// icontext();
												// $('body').addClass('main-sidebar-hide');
												/*Icon Text Sidemenu End*/
Remove the comments to enable icontext-menu as shown below 

												/*Icon Text Sidemenu Start*/
												$('body').addClass('icontext-menu');
												icontext();
												$('body').addClass('main-sidebar-hide');
												/*Icon Text Sidemenu End*/

10) How to Enable Closed-Menu?

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for closed-leftmenu to enable closed menu style as shown in below


												/*Closed Sidemenu Start*/
												// $('body').addClass('closed-leftmenu');
												// $('body').addClass('main-sidebar-hide');
												/*Closed Sidemenu End*/
Remove the comments to enable closed-leftmenu as shown below 

												/*Closed Sidemenu Start*/
												$('body').addClass('closed-leftmenu');
												$('body').addClass('main-sidebar-hide');
												/*Closed Sidemenu End*/

11) How to Enable Icon Overlay

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for icon-overlay to enable Icon Overlay style as shown in below


												/*Icon Overlay Sidemenu Start*/
												// $('body').addClass('icon-overlay');
												// hovermenu();
												// $('body').addClass('main-sidebar-hide');
												/*Icon Overlay Sidemenu End*/
Remove the comments to enable icon-overlay as shown below 

												/*Icon Overlay Sidemenu Start*/
												$('body').addClass('icon-overlay');
												hovermenu();
												$('body').addClass('main-sidebar-hide');
												/*Icon Overlay Sidemenu End*/

12) How to Enable Hover Submenu

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for hover-submenu to enable Hover submenu style as shown in below


												/*Hover Submenu Start*/
												// $('body').addClass('hover-submenu');
												// hovermenu();
												// $('body').addClass('main-sidebar-hide');
												/*Hover Submenu End*/
Remove the comments to enable hover-submenu as shown below 

												/*Hover Submenu Start*/
												$('body').addClass('hover-submenu');
												hovermenu();
												$('body').addClass('main-sidebar-hide');
												/*Hover Submenu End*/

13) How to Enable Hover Submenu style1

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for hover-submenu1 to enable Hover submenu style1 style as shown in below


												/*Hover Submenu Style 1 Start*/
												// $('body').addClass('hover-submenu1');
												// hovermenu();
												// $('body').addClass('main-sidebar-hide');
												/*Hover Submenu Style 1 End*/
Remove the comments to enable hover-submenu1 as shown below 

												/*Hover Submenu Style 1 Start*/
												$('body').addClass('hover-submenu1');
												hovermenu();
												$('body').addClass('main-sidebar-hide');
												/*Hover Submenu Style 1 End*/

14) How to Enable Horizontal layout

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for horizontalmenu to enable Horizontal layout style as shown in below


												/* Horizontal Menu Start */
												// $('body').addClass('horizontalmenu');
												/*Horizontal Menu End */
Remove the comments to enable horizontalmenu as shown below 

												/* Horizontal Menu Start */
												$('body').addClass('horizontalmenu');
												/*Horizontal Menu End */

15) How to Enable Horizontal Hover layout

open custom.js path:(HTML/Spruha/assets/js/custom.js) file and remove comments for horizontalmenu-hover to enable Horizontal Hover layout style as shown in below


												* Horizontal Hover Menu Start */
												// $('body').addClass('horizontalmenu-hover');
												/* Horizontal Hover Menu End */
Remove the comments to enable horizontalmenu-hover as shown below 

												* Horizontal Hover Menu Start */
												 $('body').addClass('horizontalmenu-hover');
												/* Horizontal Hover Menu End */