Sash React-TS Admin and Dashboard Template

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 ?

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

step: 1

go to sidebar.tsx (src/layouts/sidebar.tsx)and change the images in the following path as mentioned below
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 switcherdata.tsx (src/commondata/switcherdata.tsx) file and remove comments for rtl as shown in below 



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

        document.querySelector(".app")?.classList.add("rtl");

		            /******* RTL VERSION remove class *******/

        document.querySelector(".app")?.classList.remove("ltr");
Please follow the below steps to enable LTR Version

To enable LTR Version you have to open switcherdata.tsx (src/commondata/switcherdata.tsx) file and remove comments for ltr as shown in below 



			         /******* LTR VERSION adding class*******/

         document.querySelector(".app")?.classList.add("ltr");


                     /******* LTR VERSION remove class*******/

        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 switcherdata.tsx (src/commondata/switcherdata.tsx) file and remove comments for dark-mode as shown in below 



					//---- Dark mode adding Class ----- //

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

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

            document.querySelector("body")?.classList.remove("transparent-mode");
            document.querySelector("body")?.classList.remove("light-mode");
            document.querySelector("body")?.classList.remove("header-light");
            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 switcherdata.tsx (src/commondata/switcherdata.tsx) 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("header-light");
           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 switcherdata.tsx (src/commondata/switcherdata.tsx) 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 switcherdata.tsx (src/commondata/switcherdata.tsx) 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 switcherdata.tsx (src/commondata/switcherdata.tsx) 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 switcherdata.tsx (src/commondata/switcherdata.tsx) 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.tsx (src/layouts/layoutcomponents/header.tsx) 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.tsx (src/layouts/app.tsx) and remove or comments the Switcher tag as well as the comments the imports also as shown in below



import switcher from './../layouts/layoutcomponents/switcher';

<Switcher />

How to remove the Loader

Please follow the below steps to remove Loader

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



<img src={Imagesdata("loader").default} className="loader-img" alt="Loading...."/>