Ynex - Tailwind CSS Admin Dashboard Template

FAQS

Esbuild Related

How to use project without Scss & esbuild ?

If you don't want to use scss files, if you want to use only css files please follow below steps.

Step 1 :

If you don't want to use scss files,you are in no need of esbuild and other related files & folders so please remove below shown files

Html/src folder
Html/esbuild.config.js file
Html/package-lock.json file
Html/package.json file
Html/node_modules folder

You can simply use dist folder with only css, or can use by renaming it😊.

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 tailwind config file inplace of old font

Example:

fontFamily: {
	inter: ["Inter", "sans-serif"], //place your font here
},

Step 4:

And add the Your Selected font-family to body that is font-inter in custom.scss file (rootpath :- assets/scss/tailwind/_custom.scss) file inplace of old font

Example:

body {
 @apply bg-bodybg h-full text-gray-600 dark:text-white m-0 font-inter font-normal text-sm relative;
}

How to change Menu icons ?

By default menu icons are in the form of icons if you want to change icons please follow below steps

Step 1 :

To change Menu icons, open menu.html page Path:src/html/partials/menu.html and go through app-sidebar section, in that section you will find itag, there you can replace previous icon with your icon. Example as shown in below

How to Change Logo ?

Go To "src/assets/img/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.

To clear LocalStorage(cookie)

How to clear LocalStorage (cookie)?

Step1:

Open custom-switcher.js file assets/js/custom-switcher.js

To clear LocalStorage loading functions you need to remove localStorageBackup(); function in custom-switcher.js as shown below

function localStorageBackup() {

															function localStorageBackup2(){
																if (localStorage.bodyBgRGB || localStorage.bodylightRGB){
																	document.querySelector('#switcher-dark-theme').checked = true;
																	document.querySelector('#switcher-menu-dark').checked = true;
																	document.querySelector('#switcher-header-dark').checked = true;
																}
															
																if (localStorage.bodyBgRGB && localStorage.bodylightRGB) {
																	if(localStorage.bodyBgRGB == "20, 30, 96"){
																		document.querySelector("#switcher-background").checked = true
																	}
																	if(localStorage.bodyBgRGB == "8, 78, 115"){
																		document.querySelector("#switcher-background1").checked = true
																	}
																	if(localStorage.bodyBgRGB == "90, 37, 135"){
																		document.querySelector("#switcher-background2").checked = true
																	}
																	if(localStorage.bodyBgRGB == "24, 101, 51"){
																		document.querySelector("#switcher-background3").checked = true
																	}
																	if(localStorage.bodyBgRGB == "120, 66, 20"){
																		document.querySelector("#switcher-background4").checked = true
																	}
																}

																if (localStorage.primaryRGB) {
																	if(localStorage.primaryRGB == "58, 88, 146"){
																		document.querySelector("#switcher-primary").checked = true
																	}
																	if(localStorage.primaryRGB == "92, 144, 163"){
																		document.querySelector("#switcher-primary1").checked = true
																	}
																	if(localStorage.primaryRGB == "172, 172, 80"){
																		document.querySelector("#switcher-primary2").checked = true
																	}
																	if(localStorage.primaryRGB == "165, 94, 131"){
																		document.querySelector("#switcher-primary3").checked = true
																	}
																	if(localStorage.primaryRGB == "87, 68, 117"){
																		document.querySelector("#switcher-primary4").checked = true
																	}
																}

																if(localStorage.loaderEnable == "true"){
																	document.querySelector("#switcher-loader-enable").checked = true
																}
															}sidebar

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions in custom-switcher.js assets/js/custom-switcher.jsfile.

LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.


localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();

Step3:

To remove complete LocalStorage saving you also need to remove main.js link present in mainhead.html Path:html/partials/mainhead.html as shown below



<script src="../assets/js/main.js"></script>

Disabling Switcher

How To Disable Switcher In All Pages ?

Step1:

Open header.html file html/partials/header.html

To remove switcher icons remove below code shown in header.html file

<div class="header-element md:px-[0.48rem]">
<button aria-label="button" type="button" class="hs-dropdown-toggle switcher-icon inline-flex flex-shrink-0 justify-center items-center gap-2  rounded-full font-medium  align-middle transition-all text-xs dark:text-[#8c9097] dark:text-white/50 dark:hover:text-white dark:focus:ring-white/10 dark:focus:ring-offset-white/10" data-hs-overlay="#hs-overlay-switcher">
	<i class="bx bx-cog header-link-icon animate-spin-slow"></i>
</button>
</div>

Step2:

After removing code in header.html page remove switcher.html partial link in src folder as shown below in every html page

<!-- include switcher.html"-->

Step3:

After removing switcher partial in every page also remove custom_switcherjs.html partial in src folder in every html page

<!-- include custom_switcherjs.html"-->

Step4:

Remove main.js link present in mainhead.html Path:html/partials/mainhead.html as show below

<script src="../assets/js/main.js"></script>

Step5:

Finally remove below shown code in custom.js file Path:assets/js/custom.js


if(document.querySelector("#hs-overlay-switcher")){

	/*Start Switcher Scroll */
	var myElement1 = document.getElementById("switcher-body");
	new SimpleBar(myElement1, { autoHide: true });
	/*End Switcher Scroll */

	//switcher color pickers
	const pickrContainerPrimary = document.querySelector(
	".pickr-container-primary"
	);
	const themeContainerPrimary = document.querySelector(
	".theme-container-primary"
	);
	const pickrContainerBackground = document.querySelector(
	".pickr-container-background"
	);
	const themeContainerBackground = document.querySelector(
	".theme-container-background"
	);

	/* for theme primary */
	const nanoThemes = [
	[
		"nano",
		{
		defaultRepresentation: "RGB",
		components: {
			preview: true,
			opacity: false,
			hue: true,

			interaction: {
			hex: false,
			rgba: true,
			hsva: false,
			input: true,
			clear: false,
			save: false,
			},
		},
		},
	],
	];
	const nanoButtons = [];
	let nanoPickr = null;
	for (const [theme, config] of nanoThemes) {
	const button = document.createElement("button");
	button.innerHTML = theme;
	nanoButtons.push(button);

	button.addEventListener("click", () => {
		const el = document.createElement("p");
		pickrContainerPrimary.appendChild(el);

		/* Delete previous instance */
		if (nanoPickr) {
		nanoPickr.destroyAndRemove();
		}

		/* Apply active class */  if (document.querySelector("#hs-overlay-switcher")) {
			/*Start Switcher Scroll */
			// var myElement1 = document.getElementById("switcher-body");
			// new SimpleBar(myElement1, { autoHide: true });
			/*End Switcher Scroll */
		
			//switcher color pickers
			const pickrContainerPrimary = document.querySelector(
			  ".pickr-container-primary"
			);
			const themeContainerPrimary = document.querySelector(
			  ".theme-container-primary"
			);
			const pickrContainerBackground = document.querySelector(
			  ".pickr-container-background"
			);
			const themeContainerBackground = document.querySelector(
			  ".theme-container-background"
			);
		
			/* for theme primary */
			const nanoThemes = [
			  [
				"nano",
				{
				  defaultRepresentation: "RGB",
				  components: {
					preview: true,
					opacity: false,
					hue: true,
		
					interaction: {
					  hex: false,
					  rgba: true,
					  hsva: false,
					  input: true,
					  clear: false,
					  save: false,
					},
				  },
				},
			  ],
			];
			const nanoButtons = [];
			let nanoPickr = null;
			for (const [theme, config] of nanoThemes) {
			  const button = document.createElement("button");
			  button.innerHTML = theme;
			  nanoButtons.push(button);
		
			  button.addEventListener("click", () => {
				const el = document.createElement("p");
				pickrContainerPrimary.appendChild(el);
		
				/* Delete previous instance */
				if (nanoPickr) {
				  nanoPickr.destroyAndRemove();
				}
		
				/* Apply active class */
				for (const btn of nanoButtons) {
				  btn.classList[btn === button ? "add" : "remove"]("active");
				}
		
				/* Create fresh instance */
				nanoPickr = new Pickr(
				  Object.assign(
					{
					  el,
					  theme,
					  default: "#845adf",
					},
					config
				  )
				);
		
				/* Set events */
				nanoPickr.on("changestop", (source, instance) => {
				  let color = instance.getColor().toRGBA();
				  let html = document.querySelector("html");
				  html.style.setProperty(
					"--primary",
					`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
					  color[2]
					)}`
				  );
				  html.style.setProperty(
					"--color-primary-rgb",
					`${Math.floor(color[0])} ,${Math.floor(color[1])}, ${Math.floor(
					  color[2]
					)}`
				  );
				  /* theme color picker */
				  localStorage.setItem(
					"primaryRGB",
					`${Math.floor(color[0])}, ${Math.floor(color[1])}, ${Math.floor(
					  color[2]
					)}`
				  );
				  localStorage.setItem(
					"primaryRGB1",
					`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
					  color[2]
					)}`
				  );
				  updateColors();
				});
			  });
		
			  themeContainerPrimary.appendChild(button);
			}
			nanoButtons[0].click();
			/* for theme primary */
		
			/* for theme background */
			const nanoThemes1 = [
			  [
				"nano",
				{
				  defaultRepresentation: "RGB",
				  components: {
					preview: true,
					opacity: false,
					hue: true,
		
					interaction: {
					  hex: false,
					  rgba: true,
					  hsva: false,
					  input: true,
					  clear: false,
					  save: false,
					},
				  },
				},
			  ],
			];
			const nanoButtons1 = [];
			let nanoPickr1 = null;
			for (const [theme, config] of nanoThemes) {
			  const button = document.createElement("button");
			  button.innerHTML = theme;
			  nanoButtons1.push(button);
		
			  button.addEventListener("click", () => {
				const el = document.createElement("p");
				pickrContainerBackground.appendChild(el);
		
				/* Delete previous instance */
				if (nanoPickr1) {
				  nanoPickr1.destroyAndRemove();
				}
		
				/* Apply active class */
				for (const btn of nanoButtons) {
				  btn.classList[btn === button ? "add" : "remove"]("active");
				}
		
				/* Create fresh instance */
				nanoPickr1 = new Pickr(
				  Object.assign(
					{
					  el,
					  theme,
					  default: "#845adf",
					},
					config
				  )
				);
		
				/* Set events */
				nanoPickr1.on("changestop", (source, instance) => {
				  let color = instance.getColor().toRGBA();
				  let html = document.querySelector("html");
				  html.style.setProperty(
					"--body-bg",
					`${Math.floor(color[0] + 14)}
					 ${Math.floor(color[1] + 14)}
					  ${Math.floor(color[2] + 14)}`
				  );
				  html.style.setProperty(
					"--dark-bg",
					`
					${Math.floor(color[0])}
					${Math.floor(color[1])}
					${Math.floor(color[2])}
					`
				  );
				  html.style.setProperty(
					"--light",
					`
					${Math.floor(color[0] + 5)}
					${Math.floor(color[1] + 5)}
					${Math.floor(color[2] + 5)}
					`
				  );
				  localStorage.removeItem("bgtheme");
				  updateColors();
				  html.classList.add("dark");
				  html.classList.remove("light");
				  html.setAttribute("data-menu-styles", "dark");
				  html.setAttribute("data-header-styles", "dark");
				  document.querySelector("#switcher-dark-theme").checked = true;
				  localStorage.setItem(
					"bodyBgRGB",
					`${Math.floor(color[0] + 14)}
					 ${Math.floor(color[1] + 14)}
					  ${Math.floor(color[2] + 14)}`
				  );
				  localStorage.setItem(
					"--light",
					`${Math.floor(color[0] + 5)}
					 ${Math.floor(color[1] + 5)}
					  ${Math.floor(color[2] + 5)}`
				  );
				  localStorage.setItem(
					"darkBgRGB",
					`${Math.floor(color[0])} ${Math.floor(color[1])} ${Math.floor(
					  color[2]
					)}`
				  );
				});
			  });
			  themeContainerBackground.appendChild(button);
			}
			nanoButtons1[0].click();
			/* for theme background */
		  }

Note : After completing above steps please run npm run ynex command to update dist folder.

How To Remove Switcher In Landing Page ?

Step1:

Remove below shown code inapp-sidebar of landing.html file Path:src/html/landing.html

<a aria-label="anchor" href="javascript:void(0);" class="ti-btn m-0 p-2 px-3 ti-btn-light !font-medium" data-hs-overlay="#hs-overlay-switcher"><i class="ri-settings-3-line animate-spin-slow"></i></a>

Step2:

Remove below shown code in app-header section of landing.html file Path:src/html/landing.html

<a aria-label="anchor" href="javascript:void(0);" class="ti-btn m-0 p-2 px-3 ti-btn-success" data-hs-overlay="#hs-overlay-switcher"><i class="ri-settings-3-line animate-spin-slow"></i></a>