FAQ'S
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 i.e (root:-assets/scss/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 _custom.scss(assets/scss/custom/_custom.scss)

Example:



													body {
														margin: 0;
														font-family: 'Roboto', sans-serif;
														font-size: 14px;
														font-weight: 400;
														line-height: 1.5;
														color: $color;
														text-align: left;
														background: #f2f6f9;
													}

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.

RTL Version & LTR Version

How to Enable RTL version?

To enable the LTR version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


document.querySelector("body").classList.add("ltr");

How to Enable LTR version?

To enable the RTL version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


document.querySelector("body").classList.add("rtl");
Light Theme & Dark Theme

How to Enable Darktheme?

To enable the Darktheme version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


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

document.querySelector("body").classList.remove("light-mode"); //while dark mode is getting active light mode should need to be removed.

How to Enable Light theme?

To enable the Lighttheme version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



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

document.querySelector("body").classList.remove("dark-mode"); //while light mode is getting active dark mode should need to be removed.
Header Styles

How to Enable Color-header?

To enable the colorheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("color-header");   // active class

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

How to Enable Dark-header?

To enable the Darkheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


document.querySelector("body").classList.add("dark-header");   // active class

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

How to Enable Light-header?

To enable the Lightheader version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


document.querySelector("body").classList.add("light-header");   // active class

document.querySelector("body").classList.remove("gradient-header");  // remove classes
document.querySelector("body").classList.remove("color-header");  // remove classes
document.querySelector("body").classList.remove("dark-header");   // remove classes
Menu Styles

How to Enable Light Menu?

To enable the Lightmenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("light-menu");   // active class

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

How to Enable Color Menu?

To enable the colormenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("color-menu");   // active class

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

How to Enable Dark Menu?

To enable the darkmenu version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("dark-menu");   // active class

document.querySelector("body").classList.remove("light-menu");   // remove classes
document.querySelector("body").classList.remove("color-menu");   // remove classes
document.querySelector("body").classList.remove("gradient-menu");   // remove classes
Switcher Styles

How to Enable Boxed-Layout?

To enable the Boxed-Layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("layout-boxed");  // active class

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

How to Enable Scrollable-Layout?

To enable the Scrollable-Layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("scrollable-layout");  // active class

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

How to Enable Body Style?

To enable the Body Style version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



document.querySelector("body").classList.add("body-style1")   // active class

document.querySelector("body").classList.remove("body-default")  // remove classes
Horizontal Click & Horizontal Hover styles

How to Enable Horizontal layout

To enable the Horizontal layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.


Active classes ;

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

How to Enable Horizontal Hover layout

To enable the Horizontal Hover layout version in your template follow the path path:(src/shared/datas/Switcherdata/Switcherdata.jsx)file . and enable the following code for (.body) class.



Active classes ;

document.querySelector("body").classList.add("horizontal");

document.querySelector("body").classList.add("horizontal-hover");
document.querySelector(".main-content").classList.add("horizontal-content");
document.querySelector(".app-header").classList.add("hor-header");
document.querySelector(".app-sidebar").classList.add("horizontal-main");
Theme Styles
Primary Color

How to Change Primary Color?

Please follow the bellow steps to change Primary Color
Step 1 :

To change Primary Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Light Theme Style

How to Change Light Background Color?

Please follow the bellow steps to change Light Background Color
Step 1 :

To change Light Background Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Text Color?

Please follow the bellow steps to change Light Text Color
Step 1 :

To change Light Text Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Border Color?

Please follow the below steps to change Light Border Color
Step 1 :

To change Light Border Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (assets/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Dark Theme Style

How to Change Dark body Color?

Please follow the bellow steps to change Dark body Color
Step 1 :

To change Dark body Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark Theme Color?

Please follow the bellow steps to change Dark Theme Color
Step 1 :

To change Dark Theme Color you have to open _custom.scss file and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark default Color ,border color ,and shadow color?

Please follow the below steps to change Dark default Color ,border color ,and shadow color
Step 1 :

To change Dark default Color ,border color ,and shadow color you have to open _custom.scss file in scss folder and replace what color you want as shown in below

Rootpath : _custom.scss (assets/scss/custom/_custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

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/shared/Components/Header/Header.jsx) file and there itself you can remove or comments for switcher code as shown in below 



{/* Switcher Open */}

<Link to="#" className="demo-icon new nav-link p-0 m-2" onClick={() => swichermainright()} >
<svg className="header-icon fa-spin"  x="1008"  y="1248"  viewBox="0 0 24 24" height="24" width="24" preserveAspectRatio="xMidYMid meet" focusable="false">
  <path opacity=".3"
	d="M19.28,8.6 L18.58,7.39 L17.31,7.9 L16.25,8.33 L15.34,7.63 C14.95,7.33 14.54,7.09 14.11,6.92 L13.05,6.49 L12.89,5.36 L12.7,4 L11.3,4 L11.11,5.35 L10.95,
	6.48 L9.89,6.92 C9.48,7.09 9.07,7.33 8.64,7.65 L7.74,8.33 L6.69,7.91 L5.42,7.39 L4.72,8.6 L5.8,9.44 L6.69,10.14 L6.55,11.27 C6.52,11.57 6.5,11.8 6.5,12 C6.5,12.2 6.52,
	12.43 6.55,12.73 L6.69,13.86 L5.8,14.56 L4.72,15.4 L5.42,16.61 L6.69,16.1 L7.75,15.67 L8.66,16.37 C9.05,16.67 9.46,16.91 9.89,17.08 L10.95,17.51 L11.11,18.64 L11.3,
	20 L12.69,20 L12.88,18.65 L13.04,17.52 L14.1,17.09 C14.51,16.92 14.92,16.68 15.35,16.36 L16.25,15.68 L17.29,16.1 L18.56,16.61 L19.26,15.4 L18.18,
	14.56 L17.29,13.86 L17.43,12.73 C17.47,12.42 17.48,12.21 17.48,12 C17.48,11.79 17.46,11.57 17.43,11.27 L17.29,10.14 L18.18,9.44 L19.28,8.6 Z M12,16 C9.79,16 8,14.21 8,12 C8,
	9.79 9.79,8 12,8 C14.21,8 16,9.79 16,12 C16,14.21 14.21,16 12,16 Z">
</path>
  <path d="M19.43,12.98 C19.47,12.66 19.5,12.34 19.5,12 C19.5,11.66 19.47,11.34 19.43,11.02 L21.54,9.37 C21.73,9.22 21.78,8.95 21.66,8.73 L19.66,5.27 C19.57,5.11 19.4,
  5.02 19.22,5.02 C19.16,5.02 19.1,5.03 19.05,5.05 L16.56,6.05 C16.04,5.65 15.48,5.32 14.87,5.07 L14.49,2.42 C14.46,2.18 14.25,2 14,2 L10,2 C9.75,2 9.54,2.18 9.51,2.42 L9.13,5.07 C8.52,
  5.32 7.96,5.66 7.44,6.05 L4.95,5.05 C4.89,5.03 4.83,5.02 4.77,5.02 C4.6,5.02 4.43,5.11 4.34,5.27 L2.34,8.73 C2.21,8.95 2.27,9.22 2.46,9.37 L4.57,11.02 C4.53,11.34 4.5,11.67 4.5,
  12 C4.5,12.33 4.53,12.66 4.57,12.98 L2.46,14.63 C2.27,14.78 2.22,15.05 2.34,15.27 L4.34,18.73 C4.43,18.89 4.6,18.98 4.78,18.98 C4.84,18.98 4.9,18.97 4.95,18.95 L7.44,17.95 C7.96,
  18.35 8.52,18.68 9.13,18.93 L9.51,21.58 C9.54,21.82 9.75,22 10,22 L14,22 C14.25,22 14.46,21.82 14.49,21.58 L14.87,18.93 C15.48,18.68 16.04,18.34 16.56,17.95 L19.05,18.95 C19.11,18.97 19.17,
  18.98 19.23,18.98 C19.4,18.98 19.57,18.89 19.66,18.73 L21.66,15.27 C21.78,15.05 21.73,14.78 21.54,14.63 L19.43,12.98 Z M17.45,11.27 C17.49,11.58 17.5,11.79 17.5,12 C17.5,12.21 17.48,
  12.43 17.45,12.73 L17.31,13.86 L18.2,14.56 L19.28,15.4 L18.58,16.61 L17.31,16.1 L16.27,15.68 L15.37,16.36 C14.94,16.68 14.53,16.92 14.12,17.09 L13.06,17.52 L12.9,18.65 L12.7,20 L11.3,
  20 L11.11,18.65 L10.95,17.52 L9.89,17.09 C9.46,16.91 9.06,16.68 8.66,16.38 L7.75,15.68 L6.69,16.11 L5.42,16.62 L4.72,15.41 L5.8,14.57 L6.69,13.87 L6.55,12.74 C6.52,12.43 6.5,12.2 6.5,
  12 C6.5,11.8 6.52,11.57 6.55,11.27 L6.69,10.14 L5.8,9.44 L4.72,8.6 L5.42,7.39 L6.69,7.9 L7.73,8.32 L8.63,7.64 C9.06,7.32 9.47,7.08 9.88,6.91 L10.94,6.48 L11.1,5.35 L11.3,4 L12.69,4 L12.88,
  5.35 L13.04,6.48 L14.1,6.91 C14.53,7.09 14.93,7.32 15.33,7.62 L16.24,8.32 L17.3,7.89 L18.57,7.38 L19.27,8.59 L18.2,9.44 L17.31,10.14 L17.45,11.27 Z M12,8 C9.79,8 8,9.79 8,12 C8,14.21 9.79,
  16 12,16 C14.21,16 16,14.21 16,12 C16,9.79 14.21,8 12,8 Z M12,14 C10.9,14 10,13.1 10,12 C10,10.9 10.9,10 12,10 C13.1,10 14,10.9 14,12 C14,13.1 13.1,14 12,14 Z"></path>
</svg>
</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


//swichermainright

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

Step: 3

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



import { Switcher } from '../Components/Switcher/Switcher';

<Switcher />

How to remove the Loader

Please follow the below steps to remove Loader

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


													
import loader from "../../../assets/images/svgs/loader.svg"

<img src={loader}/>

Why we are using the vite.config.js file and .env file ?

Vite allows you to have more control over your project's configuration by extending the default configuration with vite.config.js or vite.config.ts. These are located in the project's base root directory.

the file vite.config.js is the stands for configuration management tools. and we mostly use for to configure the root routing path

for example in Dashtic admin template we have given the base path Dashtic/preview/

Note: While you are create your own project need to change the base path accordingly.

Important License Terms
  • You cannot charge your end product end users with a Regular License.
  • If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
  • You must buy one license for one domain only.(i.e Either Regular or Extended)
  • You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link