Nowa – React Javascript Admin & Dashboard Template

1) 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 Slect 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 Your Selected font-family in _custom-styles.scss(assets/scss/custom/_custom-styles.scss)

Example:


body {
	font-family: "Roboto", sans-serif;
}

2) How to Change Primary Color ?

Step 1:

Go To _custom-styles.scss (assets/scss/custom/_custom-styles.scss )

You will find --primary-bg-color:#38cab3; , where you can simply change color code to change primary color

How to Change Primary Color

Example:

Simply you can also change color for primary-bg-hover:#5cd3b9; & --primary-bg-border:#38cab3; , where you can simply change color code to change them

3) How to Change Logo ?

For changing the logo in your template follow the below step to make the necessary changes.

step: 1

go to sidebar.jsx and change the images in the following path as mentioned below

4) How to Enable RTL & LTR version

Please follow the bellow steps to enable RTL Version

To enable RTL Version you have to open switcherdata.jsx common\switcherdata.jsx file and remove comments for rtl as shown in below


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

Please follow the bellow steps to enable LTR Version

To enable LTR Version you have to open switcherdata.jsx common\switcherdata.jsx file and remove comments for ltr as shown in below


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

5) How to Enable Dark Theme?

Please follow the bellow steps to enable Dark Theme

To enable Dark Theme you have to open switcherdata.jsxcommon\switcherdata.jsx file and remove comments for dark-theme as shown in below



    //adding classes***

    document.querySelector("body")?.classList.add("dark-theme");

    //removing classes***

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

6) How to Enable Transparent Theme?

Please follow the bellow steps to enable Transparent Theme

To enable Transparent Theme you have to open switcherdata.jsxcommon\switcherdata.jsx file and remove comments for transparent-theme as shown in below



    //adding classes***

    document.querySelector("body")?.classList.add("transparent-theme");

    //removing classes***
    document.querySelector("body")?.classList.remove("dark-theme");
    document.querySelector("body")?.classList.remove("light-theme");
    document.querySelector("body")?.classList.remove("light-menu");
    document.querySelector("body")?.classList.remove("light-header");
    document.querySelector("body")?.classList.remove("dark-menu");
    document.querySelector("body")?.classList.remove("dark-header");
    document.querySelector("body")?.classList.remove("color-menu");
    document.querySelector("body")?.classList.remove("color-header");
    document.querySelector("body")?.classList.remove("gradient-menu");
    document.querySelector("body")?.classList.remove("gradient-header");

7) How to Change Transparent body color?

Step 1:

Go To _custom-styles.scss (assets/scss/custom/_custom-styles.scss )

You will find --transparent-body :#30b5a1; , where you can simply change color code to change transparent body color

Example:Below image shows Before and After changing transparent body color

8) How to Enable Background image in Transparent theme?

open switcherdata.jsx bg-img1 file go to Transparent image1 Layout and remove comments for bg-img1 & transparent-theme to enable Transparent theme with background image style as shown in below


//adding classes***

document.querySelector("body")?.classList.add("bg-img1");

//removing classes***
document.querySelector("body")?.classList.remove("bg-img2");
document.querySelector("body")?.classList.remove("bg-img3");
document.querySelector("body")?.classList.remove("bg-img4");

Go To "assets/img/media" folder and replace your image with Previous image(bg-img1) within in image size. note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

9) How to Enable Color-header?

open switcherdata.jsx common\switcherdata.jsx file go to Header Styles. and remove comments for color-header to enable color-header style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("color-header");

//removing classes***

document.querySelector("body")?.classList.remove("dark-header");
document.querySelector("body")?.classList.remove("light-header");
document.querySelector("body")?.classList.remove("gradient-header");

10) How to Enable Dark-header?

open switcherdata.jsx common\switcherdata.jsx file go to Header Styles. and remove comments for dark-header to enable dark-header style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("dark-header");

//removing classes***

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

11) How to Enable Light-header?

open switcherdata.jsx common\switcherdata.jsx file go to Header Styles. and remove comments for light-header to enable light-header style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("light-header");

//removing classes***

document.querySelector("body")?.classList.remove("color-header");
document.querySelector("body")?.classList.remove("dark-header");
document.querySelector("body")?.classList.remove("gradient-header");

12) How to Enable Gradient-header?

open switcherdata.jsx common\switcherdata.jsx file go to Header Styles. and remove comments for gradient-header to enable gradient-header style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("gradient-header");

//removing classes***

document.querySelector("body")?.classList.remove("dark-header");
document.querySelector("body")?.classList.remove("light-header");
document.querySelector("body")?.classList.remove("color-header");

````````````````````````````````````````````````````````````

13) How to Enable Light Menu?

open switcherdata.jsx common\switcherdata.jsx file go to Left-menu Styles. and remove comments for light-menu to enable light-menu style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("light-menu");

//removing classes***

document.querySelector("body")?.classList.remove("dark-menu");
document.querySelector("body")?.classList.remove("gradient-menu");
document.querySelector("body")?.classList.remove("color-menu");

14) How to Enable Color Menu?

open switcherdata.jsx common\switcherdata.jsx file go to Left-menu Styles. and remove comments for color-menu to enable color-menu style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("color-menu");

//removing classes***

document.querySelector("body")?.classList.remove("dark-menu");
document.querySelector("body")?.classList.remove("gradient-menu");
document.querySelector("body")?.classList.remove("light-menu");

15) How to Enable Dark Menu?

open switcherdata.jsx common\switcherdata.jsxfile go to Leftmenu Style. and remove comments for dark-menu to enable dark-menu style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("dark-menu");

//removing classes***

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

16) How to Enable Gradient Menu?

open switcherdata.jsx common\switcherdata.jsxfile go to Leftmenu Style. and remove comments for gradient-menu to enable gradient-menu style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("gradient-menu");

//removing classes***

document.querySelector("body")?.classList.remove("dark-menu");
document.querySelector("body")?.classList.remove("light-menu");
document.querySelector("body")?.classList.remove("color-menu");

17) How to Enable Boxed-Layout?

open switcherdata.jsx common\switcherdata.jsxfile go to Layout-width Styles. and remove comments for layout-boxed to enable layout-boxed style as shown in below

//adding classes***

document.querySelector("body")?.classList.add("layout-boxed");


//removing classes***

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

18) How to Enable Scrollable-Layout?

open switcherdata.jsx common\switcherdata.jsx file go to Header-Position Styles. and remove comments for scrollable-layout to enable scrollable-layout style as shown in below

//adding classes***

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


//removing classes***

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

19) How to Enable Horizontal layout

open switcherdata.jsx common\switcherdata.jsx file and remove comments for horizontalmenu to enable Horizontal layout style as shown in below


//adding class******

document.querySelector(".main-header")?.classList.add("hor-header");
document.querySelector(".app")?.classList.add("horizontal");
document.querySelector(".main-container")?.classList.add("container");
document.querySelector(".main-sidemenu")?.classList.add("container");
document.querySelector(".main-content")?.classList.add("horizontal-content");
document.querySelector(".app-sidebar")?.classList.add("horizontal-main");
document.querySelector(".side-app")?.classList.add("container");

//removing class******

document.querySelector(".app")?.classList.remove("sidebar-mini");
document.querySelector(".main-header")?.classList.remove("side-header");
document.querySelector(".main-content")?.classList.remove("app-content");
document
.querySelector(".main-container")
.classList.remove("container-fluid");
document.querySelector(".app")?.classList.remove("sidenav-toggled");
document.querySelector(".app")?.classList.remove("horizontal-hover");

20) How to Enable Horizontal Hover layout

open switcherdata.jsx common\switcherdata.jsx file and remove comments for horizontalmenu-hover to enable Horizontal Hover layout style as shown in below


//adding class******

document.querySelector(".app")?.classList.add("horizontal-hover");
document.querySelector(".app")?.classList.add("horizontal");
document.querySelector(".main-content")?.classList.add("horizontal-content");
document.querySelector(".main-container")?.classList.add("container");
document.querySelector(".main-header")?.classList.add("hor-header");
document.querySelector(".app-sidebar")?.classList.add("horizontal-main");
document.querySelector(".main-sidemenu")?.classList.add("container");
document.querySelector(".side-app")?.classList.add("container");

//removing class******

document.querySelector("#slide-left")?.classList.remove("d-none");
document.querySelector("#slide-right")?.classList.remove("d-none");
document.querySelector(".main-content")?.classList.remove("app-content");
document.querySelector(".main-container")?.classList.remove("container-fluid");
document.querySelector(".app")?.classList.remove("sidebar-mini");
document.querySelector(".app")?.classList.remove("sidenav-toggled");

21) How to remove the switcher

Please follow the below steps to remove Switcher

Step: 1

Open the Header.jsx file located at src\layout\layoutcomponent\header.jsx In this file, you can either remove or comment out the switcher code as shown below:



{/* Switcher Open */}

<div className="d-flex">
<Link
		className="demo-icon new nav-link"
		to="#"
		onClick={() => swichermainright()}
	>
	<svg
	xmlns="http://www.w3.org/2000/svg"
	className="header-icon-svgs fa-spin"
	width="24"
	height="24"
	viewBox="0 0 24 24">
	<path d="M12 16c2.206 0 4-1.794 4-4s-1.794-4-4-4-4 1.794-4 4 1.794 4 4 4zm0-6c1.084 0 2 .916 2 2s-.916 2-2 2-2-.916-2-2 .916-2 2-2z" />
	<path d="m2.845 16.136 1 1.73c.531.917 1.809 1.261 2.73.73l.529-.306A8.1 8.1 0 0 0 9 19.402V20c0 1.103.897 2 2 2h2c1.103 0 2-.897 2-2v-.598a8.132 8.132 0 0 0 1.896-1.111l.529.306c.923.53 2.198.188 2.731-.731l.999-1.729a2.001 2.001 0 0 0-.731-2.732l-.505-.292a7.718 7.718 0 0 0 0-2.224l.505-.292a2.002 2.002 0 0 0 .731-2.732l-.999-1.729c-.531-.92-1.808-1.265-2.731-.732l-.529.306A8.1 8.1 0 0 0 15 4.598V4c0-1.103-.897-2-2-2h-2c-1.103 0-2 .897-2 2v.598a8.132 8.132 0 0 0-1.896 1.111l-.529-.306c-.924-.531-2.2-.187-2.731.732l-.999 1.729a2.001 2.001 0 0 0 .731 2.732l.505.292a7.683 7.683 0 0 0 0 2.223l-.505.292a2.003 2.003 0 0 0-.731 2.733zm3.326-2.758A5.703 5.703 0 0 1 6 12c0-.462.058-.926.17-1.378a.999.999 0 0 0-.47-1.108l-1.123-.65.998-1.729 1.145.662a.997.997 0 0 0 1.188-.142 6.071 6.071 0 0 1 2.384-1.399A1 1 0 0 0 11 5.3V4h2v1.3a1 1 0 0 0 .708.956 6.083 6.083 0 0 1 2.384 1.399.999.999 0 0 0 1.188.142l1.144-.661 1 1.729-1.124.649a1 1 0 0 0-.47 1.108c.112.452.17.916.17 1.378 0 .461-.058.925-.171 1.378a1 1 0 0 0 .471 1.108l1.123.649-.998 1.729-1.145-.661a.996.996 0 0 0-1.188.142 6.071 6.071 0 0 1-2.384 1.399A1 1 0 0 0 13 18.7l.002 1.3H11v-1.3a1 1 0 0 0-.708-.956 6.083 6.083 0 0 1-2.384-1.399.992.992 0 0 0-1.188-.141l-1.144.662-1-1.729 1.124-.651a1 1 0 0 0 .471-1.108z" />
	<svg>
	</Link>
	</&div>

{/* Switcher Close */}

Step: 2

In the same Header.jsx file, you need to remove or comment out the switcherMenu function code as shown below:



  const swichermainright = () => {
    document.querySelector(".demo_changer")?.classList.toggle("active");
    const rightSidebar:any =  document.querySelector(".demo_changer");
    rightSidebar.style.right = "0px";
  };

Step: 3

Open the app.jsx file located at src\layout\App.jsx Remove or comment out the Switcher component tag, as well as the corresponding import statement, as shown below:


import Switcher from "./layoutcomponent/switcher";

<Switcher />

Step: 4

Lastly, remove the switcher page layout file Switcherapp.jsx located at src\layout\Switcherapp.jsx and also remove the switcher page layout from the switcherheader.jsx file in the header folder (if applicable) at src\layout\layoutcomponent\switcherheader.jsx

Additionally, remove the switcher page route from the routing file (main.jsx). Remove or comment out the line as shown below:


	<Route path={`${import.meta.env.BASE_URL}`}element={<Switcherapp />} >
	<Route path={`${import.meta.env.BASE_URL}pages/switcher/switcher1`}element={<Switcher1 />} />

22) How to remove the Loader

Please follow the below steps to remove Loader

To remove Loader you have to open main.jsx (src\main.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\layout\layoutcomponent\loaders.jsx) file and remove the existing image path and you can put the new image as shown in below


import loader from '../../assets/img/loader.svg';
<img src={loader} className="loader-img" alt="Loader"/>

23) How to change Horizontal Menu as Default

Please follow the below to steps change Horizontal as default

Step: 1

Open your App.jsx (path:src\layout\App.jsx)file and add the following code mentioned below. This will sets the layout style to horizontal for the entire document.


		document.querySelector("body")?.classList.add("ltr", "main-body", "app", "horizontal"); //change the sidebar-mini class to horizontal

		<div className="main-content horizontal-content">  // replace the class to horizontal-content
		<div className="side-app container">  // add the class  container

Step: 2

Open your Sidebar.jsx(path:src\layout\layoutcomponent\sidebar.jsx) file and add the following code mentioned below.


	<aside className="app-sidebar horizontal-main"> //add the class horizontal-main

Step: 3

Open your Header.jsx(path:src\layout\layoutcomponent\header.jsx) file and add the following code mentioned below.


<div className="main-container container"> //replace the class to container

Step: 4

Open your Switcher.jsx(path:src\layout\layoutcomponent\switcher.jsx) file and add the following code mentioned below.


<input type="radio" name="onoffswitch15" id="myonoffswitch35"onClick={Switcherdata.horizontal}
className="onoffswitch2-checkbox" defaultChecked/> // give a property default Checked to this input,

Note:  make sure to remove defaultChecked from the vertical input.

Step: 5

Open your Switcherdata.jsx(path:\src\common\switcherdata.jsx) file and add the following code mentioned below.


 let vertail:any = document.querySelector("#myonoffswitch35") as HTMLInputElement
vertail.checked = true;  //Vertail //change the id #myonoffswitch34 to #myonoffswitch35

24) How to change Rtl Version as Default

Please follow the below to steps change Rtl version as default

Step: 1

Open your App.jsx (path:src\layout\App.jsx)file and add the following code mentioned below. This will sets the layout style to rtl for the entire document.


		 document.querySelector("body")?.classList.add("rtl", "main-body", "app", "horizontal"); //change the ltr class to rtl

Step: 2

Open your index.htmlfile and add the following property to the HTML tag: dir="rtl". This attribute sets the text direction to right-to-left for the entire document


	<html lang="en" dir="rtl">

Step: 3

Open your Switcher.jsx(path:src\layout\layoutcomponent\switcher.jsx) file and add the following code mentioned below.


<input type="radio" name="onoffswitch25" id="myonoffswitch55"onClick={() => Switcherdata.LtrtoRtl()}
className="onoffswitch2-checkbox" defaultChecked/> // give a property default Checked to this input,

Note:  make sure to remove defaultChecked from the ltr input.

FAQ'S

1) How to Change Font Style ?

Step 1:

How to Select font Family

Step 2:

Step 3:

2) How to Change Primary Color ?

Step 1:

How to Change Primary Color

3) How to Change Logo ?

4) How to Enable RTL & LTR version

Please follow the bellow steps to enable RTL Version

Please follow the bellow steps to enable LTR Version

5) How to Enable Dark Theme?

Please follow the bellow steps to enable Dark Theme

6) How to Enable Transparent Theme?

Please follow the bellow steps to enable Transparent Theme

7) How to Change Transparent body color?

Step 1:

8) How to Enable Background image in Transparent theme?

9) How to Enable Color-header?

10) How to Enable Dark-header?

11) How to Enable Light-header?

12) How to Enable Gradient-header?

13) How to Enable Light Menu?

14) How to Enable Color Menu?

15) How to Enable Dark Menu?

16) How to Enable Gradient Menu?

17) How to Enable Boxed-Layout?

18) How to Enable Scrollable-Layout?

19) How to Enable Horizontal layout

20) How to Enable Horizontal Hover layout

21) How to remove the switcher

Please follow the below steps to remove Switcher

22) How to remove the Loader

Please follow the below steps to remove Loader

23) How to change Horizontal Menu as Default

Please follow the below to steps change Horizontal as default

24) How to change Rtl Version as Default

Please follow the below to steps change Rtl version as default