Frequent Ask Question's
General Style

How to Change Font Style ?

Step 1:

Go To style.scss (src/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in style.scss

Example:

Step 3:

And add the Your Selected font-family in _variables.scss(src/assets/scss/_variables.scss)

Example:

--default-font-family:    							'Roboto', sans-serif;
		
	

How to change Menu icons ?

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

To change SideMenu.tsx, open sidebar.html page Path:src\common\SideMenu.tsx and go through Arrey objects section, in that section you will find icon class icon: 'ti-home', inside the items array there you can replace your icon class. Example as shown in below

	
		
			
		

How to Change Logo ?

Go To "src/assets/images/brand-logos" 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.

Disabling Switcher

How To Disable Switcher In All Pages ?

Step1:

Open Header.tsx component src\layouts\Header\Header.tsx

To remove switcher icons remove below code shown in Header.tsx component as well as remove the Switchericon function in header


<div className="header-element">
<Link to="#" className="header-link switcher-icon" data-bs-toggle="offcanvas" data-bs-target="#switcher-canvas"
		onClick={() => Switchericon()}>
		<i className="fe fe-settings header-link-icon"></i>
	</Link>
</div>

//switchericon function

const Switchericon = () => {
	document.querySelector(".offcanvas-end")?.classList.toggle("show");
	const Rightside: any = document.querySelector(".offcanvas-end");
	Rightside.style.insetInlineEnd = "0px";
	if (document.querySelector(".switcher-backdrop")?.classList.contains('d-none')) {
		document.querySelector(".switcher-backdrop")?.classList.add("d-block");
		document.querySelector(".switcher-backdrop")?.classList.remove("d-none");
	}
	// document.querySelector(".offcanvas-end").style.insetInlineEnd = "0px";
};


Step2:

After removing code in Header.tsx component remove Switcher.tsx shown below from the layout structure


<Fragment>
   <Provider store={store}>
     <div className="horizontalMenucontainer">
   <Switcher />   remove the switcher from here..
       <div className="page">
   <Header />
   <Sidebar />
             <div className="main-content app-content" onClick={Bodyclickk}>
               <div className="container-fluid">
                     <Outlet />
               </div>
            </div>
   <Footer />
            </div>
   <Backtotop />
        </div>
  </Provider>
</Fragment>