FAQ'S

Note:-

Please refer Faq's page in documentation itself for queries like customization like color ,rtl ,dark style..etc.

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 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 & LTR Version

How to Enable RTL & LTR Version?

Please follow the below steps to enable RTL Version

To enable RTL Version you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for rtl as shown in below 



											/******* RTL VERSION adding class *******/

   document.querySelector(".app")?.classList.add("rtl");
// document.querySelector("html[lang=en]")?.setAttribute("dir", "rtl");
// document.querySelector(".app")?.classList.remove("ltr");
Please follow the below steps to enable LTR Version

To enable LTR Version you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for rtl as shown in below 



											/******* LTR VERSION *******/

   document.querySelector(".app")?.classList.add("ltr");
// document.querySelector("html[lang=en]")?.setAttribute("dir", "ltr");
// document.querySelector(".app")?.classList.remove("rtl");
Theme Styles

How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

To enable Dark Theme you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for dark-mode as shown in below 



										//---- Dark mode adding Class ----- //
									
document.querySelector(".app")?.classList.add("dark-mode");

										//---- Dark mode remove Class ----- //

document.querySelector(".app")?.classList.remove("transparent-mode");
document.querySelector(".app")?.classList.remove("light-mode");
document.querySelector("body")?.classList.remove("light-header");
document.querySelector("body")?.classList.remove("color-header");
document.querySelector("body")?.classList.remove("gradient-header");
document.querySelector("body")?.classList.remove("light-menu");
document.querySelector("body")?.classList.remove("color-menu");
document.querySelector("body")?.classList.remove("gradient-menu");

How to Enable Transparent Theme?

Please follow the below steps to enable Transparent Theme

To enable Transparent Theme you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for transparent-mode as shown in below 



										//---- Transparent mode adding class ----//

document.querySelector(".app")?.classList.add("transparent-mode");

										//---- Transparent mode remove class ----//

document.querySelector(".app")?.classList.remove("light-mode");
document.querySelector(".app")?.classList.remove("dark-mode");
document.querySelector(".app")?.classList.remove("bg-img1");
document.querySelector(".app")?.classList.remove("bg-img2");
document.querySelector(".app")?.classList.remove("bg-img3");
document.querySelector(".app")?.classList.remove("bg-img4");
									
document.querySelector(".app")?.classList.remove("light-menu");
document.querySelector(".app")?.classList.remove("color-menu");
document.querySelector(".app")?.classList.remove("dark-menu");
document.querySelector(".app")?.classList.remove("gradient-menu");
									
document.querySelector(".app")?.classList.remove("color-header");
document.querySelector(".app")?.classList.remove("gradient-header");
document.querySelector(".app")?.classList.remove("light-header");
document.querySelector(".app")?.classList.remove("dark-header");
Layout Width Styles

How to Enable Boxed-Layout?

Please follow the below steps to enable Boxed-Layout

To enable Boxed-Layout you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for layout-boxed as shown in below 


										/*Boxed-Layout Styles adding class*/
									
document.querySelector(".app")?.classList.add("layout-boxed");

										/*Boxed-Layout Styles remove class*/

document.querySelector(".app")?.classList.remove("layout-fullwidth");

How to Enable Full-width-Layout?

Please follow the below steps to enable Full-width-Layout

To enable Full-width-Layout you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for layout-full-width as shown in below 


										/*Boxed-Layout Styles add class*/

document.querySelector(".app")?.classList.add("layout-fullwidth");

										/*Boxed-Layout Styles remove class*/

document.querySelector(".app")?.classList.remove("layout-boxed");
Layout Positions

How to Enable Scrollable-Layout?

Please follow the below steps to enable Scrollable-Layout

To enable Scrollable-Layout you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for scrollable-layout as shown in below 



										/*Header-Position Styles adding class*/

document.querySelector(".app")?.classList.add("scrollable-layout");

										/*Header-Position Styles remove class*/

document.querySelector(".app")?.classList.remove("fixed-layout");

How to Enable Fixed-Layout?

Please follow the below steps to enable Fixed-Layout

To enable Fixed-Layout you have to open Switcher.jsx (src/Layouts/Switcher/Switcher.jsx) file and remove comments for Fixed-layout as shown in below 



										/*Header-Position Styles adding class*/

document.querySelector(".app")?.classList.add("fixed-layout");

										/*Header-Position Styles remove class*/

document.querySelector(".app")?.classList.remove("scrollable-layout");
Others

How to remove the switcher

Please follow the below steps to remove Switcher

Step: 1

To remove Switcher you have to open Header.jsx (src/Layouts/Header/Header.jsx) file and there itself you can remove or comments for switcher code as shown in below 



										{/* Switcher Open */}

<className="demo-icon nav-link icon" onClick={() => SidSwitcherIcon()}>
<i className="fe fe-settings fa-spin  text_primary"></i>
</code>

										{/* Switcher Close */}

Step: 2

After remove Switcher codein the same page you have to remove or comments for switcherMenu function code as shown in below



												// SwitcherMenu

const SideSwitcherIcon: any = () => {
														
//leftsidemenu
 document.querySelector(".demo_changer")?.classList.toggle("active");
 let Rightside: any = document.querySelector(".demo_changer")
Rightside.style.right = "0px";
														
}

Step: 3

At last you have to open app.jsx (src/components/app.jsx) and remove or comments the Switcher tag as well as the comments the imports also as shown in below



import Switcher from './../Layouts/Switcher/Switcher';

<Switcher />

How to remove the Loader

Please follow the below steps to remove Loader

To remove Loader you have to open index.jsx (src/index.jsx) file and remove or comments for Loader code as shown in below



"const App = lazy(() =>"

<React.Suspense fallback={<Loader/>}>
</React.Suspense>

if you want to change a custom loader image please follow the below steps below

Step: 1

for changing a custom image you have to open Loader.jsx (src/Layouts/Loader/Loader.jsx) file and remove the existing image path and you can put the new image as shown in below



<img src={require("../../assets/images/loader.svg").default} className="loader-img" alt="Loading...."/>