Your IP : 18.191.67.90


Current Path : /home/lentoinv/finationglobal.com/arch/Documentation/
Upload File :
Current File : /home/lentoinv/finationglobal.com/arch/Documentation/faqs.html

<!DOCTYPE html>
<html>

<head>
	<!-- Meta data -->
	<meta charset="UTF-8">
	<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0'>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="Zanex – Bootstrap5  Admin & Dashboard Template">
	<meta name="author" content="Spruko Technologies Private Limited">
	<meta name="keywords"
		content="admin template,admin dashboard,bootstrap 5 admin template,html template,html admin template,admin,bootstrap 5 html template,html dashboard,dashboard,crm,admin pane,admin dashboard template,html responsive template,crm admin template,dashboard template.">
	<!-- Title -->
	<!-- Title -->
	<title>Zanex – Bootstrap5 Admin & Dashboard Template</title>
	<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
	<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css">
	<link href="assets/plugins/iconfonts/icons.css" rel="stylesheet" />
	<!-- Custom Css -->
	<link href="assets/css/main.css" rel="stylesheet">
	<!---Internal  Prism css-->
	<link href="assets/plugins/prism/prism.css" rel="stylesheet">
	<link href="assets/plugins/treeview-prism/prism.css" rel="stylesheet">
	<link href="assets/plugins/treeview-prism/prism-treeview.css" rel="stylesheet">
	<link href="assets/css/themes/all-themes.css" rel="stylesheet" />
</head>

<body class="theme-blush">
	<!-- Page Loader -->
	<div class="page-loader-wrapper">
		<div class="loader">
			<div class="preloader">
				<div class="spinner-layer pl-blush">
					<div class="circle-clipper left">
						<div class="circle"></div>
					</div>
					<div class="circle-clipper right">
						<div class="circle"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- #END# Page Loader -->

	<!-- Overlay For Sidebars -->
	<div class="overlay"></div>
	<!-- #END# Overlay For Sidebars -->

	<!-- Sidebarover lay -->
	<div class="sidebar-overlay" data-toggle="sidebar"></div>

	<!-- #Top Bar -->
	<section>
		<!-- Left Sidebar -->
		<aside id="leftsidebar" class="sidebar">
			<!-- User Info -->
			<div class="admin-image"> <img src="assets/images/logo-3.png" alt=""> </div>
			<!-- Menu -->
			<div class="menu main-sidebar">
				<ul class="list" id="documenter_nav">
					<li class="nav-item"><a class="nav-link" href="index.html"><i
								class="fe fe-airplay sidemenu-icon"></i><span
								class="sidemenu-label">Introduction</span></a></li>
								<li class="nav-item"><a class="nav-link" href="https://spruko.com/licenses.html"><i class="fe fe-pocket sidemenu-icon"></i><span class="sidemenu-label">Licence Details</span></a></li>
					<li class="nav-item"><a class="nav-link" href="folder-structure.html"><i
								class="fe fe-folder sidemenu-icon"></i><span class="sidemenu-label">Folder
								structure</span></a></li>
					<li class="nav-item"><a class="nav-link" href="layouts.html"><i
								class="fe fe-layout sidemenu-icon"></i><span class="sidemenu-label">Layouts</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="faqs.html"><i
								class="fe fe-help-circle sidemenu-icon"></i><span
								class="sidemenu-label text-primary fw-bold mr-5">Faqs </span><i
								class="fa fa-star float-right sidemenu-icon-2 text-warning"></i></a></li>
					<li class="nav-item"><a class="nav-link" href="switcher.html"><i
								class="fe fe-grid sidemenu-icon"></i><span class="sidemenu-label">Switcher</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="gulp.html"><i
								class="fe fe-settings sidemenu-icon"></i><span class="sidemenu-label">Gulp</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="html-structure.html"><i
								class="fe fe-codepen sidemenu-icon"></i><span
								class="sidemenu-label">html-structure</span></a></li>
					<li class="nav-item"><a class="nav-link" href="apps.html"><i
								class="fe fe-briefcase sidemenu-icon"></i><span class="sidemenu-label">Apps</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="elements.html"><i
								class="fe fe-aperture sidemenu-icon"></i><span
								class="sidemenu-label">Elements</span></a></li>
					<li class="nav-item"><a class="nav-link" href="form-elements.html"><i
								class="fe fe-file-text sidemenu-icon"></i><span
								class="sidemenu-label">Form-elements</span></a></li>
					<li class="nav-item"><a class="nav-link" href="form-advanced.html"><i
								class="fe fe-cpu sidemenu-icon"></i><span
								class="sidemenu-label">Form-advanced</span></a></li>
					<li class="nav-item"><a class="nav-link" href="treeview.html"><i
								class="fe fe-lock sidemenu-icon"></i><span class="sidemenu-label">Treeview</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="form-wizard.html"><i
								class="fe fe-hard-drive sidemenu-icon"></i><span
								class="sidemenu-label">Form-wizard</span></a></li>
					<li class="nav-item"><a class="nav-link" href="form-editor.html"><i
								class="fe fe-edit sidemenu-icon"></i><span class="sidemenu-label">Form-editor</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="form-validation.html"><i
								class="fe fe-file-plus sidemenu-icon"></i><span
								class="sidemenu-label">Form-validation</span></a></li>
					<li class="nav-item"><a class="nav-link" href="maps.html"><i
								class="fe fe-map-pin sidemenu-icon"></i><span class="sidemenu-label">Maps</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="charts.html"><i
								class="fe fe-pie-chart sidemenu-icon"></i><span class="sidemenu-label">Charts</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="tables.html"><i
								class="fe fe-database sidemenu-icon"></i><span class="sidemenu-label">Tables</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="icons.html"><i
								class="fe fe-anchor sidemenu-icon"></i><span class="sidemenu-label">Icons</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="others.html"><i
								class="fe fe-link sidemenu-icon"></i><span class="sidemenu-label">Others</span></a></li>
					<li class="nav-item"><a class="nav-link" href="plugins.html"><i
								class="fe fe-droplet sidemenu-icon"></i><span class="sidemenu-label">Plugins</span></a>
					</li>
					<li class="nav-item"><a class="nav-link" href="theme.html"><i
								class="fe fe-layers sidemenu-icon"></i><span class="sidemenu-label">Theme
								Style</span></a></li>
				</ul>
			</div>
			<!-- #Menu -->
		</aside>
		<!-- #END# Left Sidebar -->
	</section>

	<section class="content mt-4 home">
		<div class="container-fluid">
			<div class="row clearfix">
				<div class="col-sm-12 col-lg-12 col-xl-9">
					<div class="">
						<div class="card" id="faqs">
							<div class="header body">
								<h5 class="mt-0">FAQS</h5>
							</div>
							<div class="card-body pt-0">
								<div id="accordion">

									<div id="general">
										<h5 class="faq mt-0">General Style</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-1">
												<h4>How to Change Font Style ?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-1"
												data-parent="#accordion">
												<h5 class="mt-0">Step 1:</h5>
												<p>Go To <b>_fonts.scss</b> <span class="text-primary ml-3">
														(assets/scss/custom/fonts/_fonts.scss )</span> </p>
												<p>if you want to change another font-family Go to the site <a
														href="https://fonts.google.com/">Google Fonts</a> And Select One
													font Family and import In to style.css file </p>
	
												<h4>How to Select font Family</h4>
												<h6><b>Example:</b></h6>
												<p><img alt="" src="assets/images/0-2.jpg" class="border w-100"></p>
												<h5>Step 2:</h5>
												<p>And paste Your Selected font-family in _fonts.scss</p>
												<h6><b>Example:</b></h6>
												@import
												url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
												<p><img alt="" src="assets/images/0-3.jpg" class="border"></p>
												<h5>Step 3:</h5>
												<p>And add the Your Selected font-family in
													_bootstrap-styles.scss(assets/scss/bootstrap/_bootstrap-styles.scss)</p>
												<h6><b>Example:</b></h6>
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	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;
	}
		</code>
	</pre>
												</figure>
												<p><b>Note : </b>After Changing font you must run gulp command i.e, <code>gulp watch</code> . Refer gulp page for more gulp commands <a href="gulp.html">click here.</a> </p>
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-4">
												<h4>How to Change Logo ?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-4"
												data-parent="#accordion">
												<p class="mb-0">Go To "<b>assets/images/brand</b>" 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.
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-5">
												<h4>How to change Menu icons ?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-5"
												data-parent="#accordion">
												<h6 class="mt-0 mb-2">By default menu icons are feather icons if you want to change icons please follow below <b>steps</b>
													<h6 class="mt-3"><b>Step 1 :</b></h6>
													<p>To change <b>Menu icons</b>, open html page and go through <b>app-sidebar</b>
														section, in that section you will find feather icons of menu in <code>i</code>
														tag, there you can replace previous icon with your icon. Example as shown in below</p>
	<!-- Prism Code -->
	<figure class="highlight clip-widget mb-0">
		<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
			<code class="language-markup line-numbers mt-0 pt-0">
				<script type="html-Azea/script">
				Before: (Feather Icons)
							<li class="slide">
								<a class="side-menu__item" data-bs-toggle="slide" href="index.html">
									<i class="side-menu__icon fe fe-home"></i>
									<span class="side-menu__label">Dashboard</span>
								</a>
							</li>
	
				After: (Material Design Icons)
							<li class="slide">
								<a class="side-menu__item" data-bs-toggle="slide" href="index.html">
									<i class="side-menu__icon mdi mdi-home"></i>
									<span class="side-menu__label">Dashboard</span>
								</a>
							</li>
				</script>
			</code>
		</pre>
		</figure>
		<!-- End Prism Precode -->
			
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-date">
												<h4>How to change Date Format ?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-date"
												data-parent="#accordion">
													<h6 class="mt-3"><b>Step 1 :</b></h6>
													<p>To change <b>Date Format</b>, you have to add below js <code>(format: "dd-mm-yyyy")</code> in respective folder (assets/js/form-elements.js) </p>
	<!-- Prism Code -->
	<figure class="highlight clip-widget mb-0">
		<pre class="pt-0 mt-0 line-numbers language-markup p-0 pl-3 m-0">
			<code class="language-markup line-numbers mt-0 pt-0">
				<script type="html-Azea/script">
				Before:
					$('.fc-datepicker').datepicker({
						showOtherMonths: true,
						selectOtherMonths: true
					  });
	
				After: 
					$('.fc-datepicker').datepicker({
						showOtherMonths: true,
						selectOtherMonths: true,
						format: "dd-mm-yyyy"
					});
				</script>
			</code>
		</pre>
		</figure>
		<!-- End Prism Precode -->
			
											</div>
										</div>
									</div>

									<div id="navigation">
										<h5 class="faq">Navigation Style</h5>

										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-21">
												<h4>How to Enable Horizontal Click Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-21"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Horizontal Click
														Menu Style</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Horizontal Click Menu Style</b> you have to open
													<b>switcher-styles.js</b> <span class="text-primary ml-2 mr-2">
														(assets/js/switcher-styles.js)</span> file and remove comments for
													<code>horizontal</code> as shown in below</p>
	
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	
												// ***** Horizontal Click Menu ***** //
	
												// $('body').addClass('horizontal');
	
											</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>horizontal</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	
												// ***** Horizontal Click Menu ***** //
	
												$('body').addClass('horizontal');
	
											</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-22">
												<h4>How to Enable Horizontal Hover Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-22"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Horizontal Hover
														Menu Style</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Horizontal Hover Menu Style</b> you have to open
													<b>switcher-styles.js</b> <span class="text-primary ml-2 mr-2">
														(assets/js/switcher-styles.js)</span> file and remove comments for
													<code>horizontal-hover</code> as shown in below</p>
	
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	
												// ***** Horizontal Hover Menu ***** //
	
												// $('body').addClass('horizontal-hover');
	
											</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable
													<code>horizontal-hover</code> as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	
												// ***** Horizontal Hover Menu ***** //
												$('body').addClass('horizontal-hover');
	
											</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-222">
												<h4>How to Enable Horizontal or Horizontal Hover layout With Wrap Style
												</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-222"
												data-parent="#accordion">
												<h6 class="mt-3"><b>noWrap style:</b></h6>
												<p> open <b>switcher-styles.js</b> <code>assets/js/switcher-styles.js</code>
													file and you will find below js in
													<code>Horizontal (or) Horizontal Hover layout</code> to enable wrap
													style for Horizontal or Horizontal Hover</p>
												<p class=""><b>noWrap</b> style is given as default horizontal menu style,if you want to change it to wrap style please follow below process.</p>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
									document.querySelector('.horizontal .side-menu')?.classList.add('flex-nowrap');
									// $('#slide-left').addClass('d-none');
									// $('#slide-right').addClass('d-none');
									$('#slide-left').removeClass('d-none');
									$('#slide-right').removeClass('d-none');
	
									</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											<h6><b>Related Image:</b></h6>
											<p><img alt="" src="assets/images/hor-1.jpg" class="border w-50"></p>
											<h6 class="mt-3"><b>wrap style:</b></h6>
												<span class="mb-3">Replace <code>noWrap</code> with <code>wrap</code> as
													shown below</span> and remove comments for <code>$('#slide-left').addClass('d-none');</code> & <code>$('#slide-right').addClass('d-none');</code>
													and add comments to <code>$('#slide-left').removeClass('d-none');</code> &  <code>$('#slide-right').removeClass('d-none');</code> as shown below.
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
														document.querySelector('.horizontal .side-menu')?.classList.add('flex-wrap');
														$('#slide-left').addClass('d-none');
														$('#slide-right').addClass('d-none');
														// $('#slide-left').removeClass('d-none');
														// $('#slide-right').removeClass('d-none');
									</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											<h6><b>Related Image:</b></h6>
											<p><img alt="" src="assets/images/hor-2.jpg" class="border w-50"></p>
											</div>
										</div>
									</div>

									<div id="rtl">
										<h5 class="faq">How to Enable RTL Version</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-23">
												<h4>How to Enable RTL Version?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-23"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>RTL Version</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>RTL Version</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>rtl</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											/******* RTL VERSION *******/

											// $('body').addClass('rtl');

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>rtl</code> as shown
													below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											/******* RTL VERSION *******/

											$('body').addClass('rtl');

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="theme">
										<h5 class="faq">Theme Styles</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-9">
												<h4>How to Enable Dark Theme?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-9"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Dark Theme</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Dark Theme</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>dark-mode</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

												//---- Dark mode ----- //
												// $('body').addClass('dark-mode');
												// $('body').removeClass('light-mode');

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>dark-mode</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

												//---- Dark mode ----- //
												$('body').addClass('dark-mode');
												$('body').removeClass('light-mode');

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="header">
										<h5 class="faq">Header Styles</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-10">
												<h4>How to Enable Color-header?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-10"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Color-header</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Color-header</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>color-header</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										//$('body').addClass('color-header')

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>color-header</code>
													as shown below</span>
												<!-- Prism Code -->
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										$('body').addClass('color-header')

										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-11">
												<h4>How to Enable Dark-header?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-11"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Dark-header</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Dark-header</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>dark-header</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										//$('body').addClass('dark-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>dark-header</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										$('body').addClass('dark-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-12">
												<h4>How to Enable Light-header?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-12"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Light-header</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Light-header</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>light-header</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										//$('body').addClass('light-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>light-header</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										$('body').addClass('light-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-17">
												<h4>How to Enable Gradient-header?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-17"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable
													<b>Gradient-header</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Gradient-header</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>gradient-header</code> as shown in below
												</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										//$('body').addClass('gradient-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable
													<code>gradient-header</code> as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/******* Header Styles ********/

										$('body').addClass('gradient-header');
										</code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="menu">
										<h5 class="faq">Menu Styles</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-68">
												<h4>How to Enable Light Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-68"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Light Menu</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Light Menu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>light-menu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Left-menu Styles*/
										//$('body').addClass('light-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>light-menu</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Left-menu Styles*/

										$('body').addClass('light-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>

										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-34445">
												<h4>How to Enable Color Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-34445"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Color Menu</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Color Menu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>color-menu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Left-menu Styles*/
										//$('body').addClass('color-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>color-menu</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Left-menu Styles*/
										$('body').addClass('color-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>

										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-3447">
												<h4>How to Enable Dark Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-3447"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Dark Menu</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Dark Menu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>dark-menu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Leftmenu Styles*/
										//$('body').addClass('dark-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>dark-menu</code> as
													shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Leftmenu Styles*/
										$('body').addClass('dark-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-14">
												<h4>How to Enable Gradient Menu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-14"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Gradient
														Menu</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Gradient Menu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>gradient-menu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Leftmenu Styles*/
										//$('body').addClass('gradient-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>gradient-menu</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Leftmenu Styles*/
										$('body').addClass('gradient-menu');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

 									<div id="layout">
										<h5 class="faq">Layout Width Styles</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-15">
												<h4>How to Enable Boxed-Layout?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-15"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Boxed-Layout</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Boxed-Layout</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>layout-boxed</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Layout-width Styles*/
										// $('body').addClass('layout-boxed');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>layout-boxed</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Layout-width Styles*/
										$('body').addClass('layout-boxed');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="layout-pos">
										<h5 class="faq">Layout Positions</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-18">
												<h4>How to Enable Scrollable-Layout?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-18"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable
													<b>Scrollable-Layout</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Scrollable-Layout</b> you have to open <b>switcher-styles.js</b>
													<span class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>scrollable-layout</code> as shown in below
												</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Header-Position Styles*/
										// $('body').addClass('scrollable-layout');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable
													<code>scrollable-layout</code> as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
										/*Header-Position Styles*/
										$('body').addClass('scrollable-layout');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-30">
												<h4>How to Enable Fixed-Layout?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-30"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Fixed-Layout</b>
												</h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Fixed-Layout</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>fixed-layout</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/*Header-Position Styles*/
										// $('body').addClass('fixed-layout');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>fixed-layout</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										/*Header-Position Styles*/
										$('body').addClass('fixed-layout');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="sidemenu">
										<h5 class="faq">Sidemenu layout Styles</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-19">
												<h4>How to Enable Sidemenu-Icon-with Text?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-19"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable
													<b>Sidemenu-Icon-with Text</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Sidemenu-Icon-with Text</b> you have to open
													<b>switcher-styles.js</b> <span class="text-primary ml-2 mr-2">
														(assets/js/switcher-styles.js)</span> file and remove comments for
													<code>icontext-menu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

										// ***** Icon with Text *****//
										// $('body').addClass('icontext-menu');
										// $('body').addClass('sidenav-toggled');
										// if(document.querySelector('body').classList.contains('login-img') !== true){
										// 		icontext();
										// }
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>icontext-menu</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** Icon with Text *****//
											$('body').addClass('icontext-menu');
											$('body').addClass('sidenav-toggled');
											if(document.querySelector('body').classList.contains('login-img') !== true){
													icontext();
											}
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-25">
												<h4>How to Enable Sidemenu-Icon Overlay?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-25"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Sidemenu-Icon
														Overlay</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Sidemenu-Icon Overlay</b> you have to open <b>switcher-styles.js</b>
													<span class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>icon-overlay</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** Icon Overlay ***** //
											// $('body').addClass('icon-overlay');
											// $('body').addClass('sidenav-toggled');
											// if(document.querySelector('body').classList.contains('login-img') !== true){
											// 	hovermenu();
											// }
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>icon-overlay</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** Icon Overlay ***** //
											$('body').addClass('icon-overlay');
											$('body').addClass('sidenav-toggled');
											if(document.querySelector('body').classList.contains('login-img') !== true){
												hovermenu();
											}
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-26">
												<h4>How to Enable Closed Sidemenu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-26"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Closed
														Sidemenu</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Closed Sidemenu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>closed-leftmenu</code> as shown in below
												</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** closed-leftmenu ***** //
											// $('body').addClass('closed-leftmenu');
											// $('body').addClass('sidenav-toggled');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable
													<code>closed-leftmenu</code> as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** closed-leftmenu ***** //
											$('body').addClass('closed-leftmenu');
											$('body').addClass('sidenav-toggled');
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-27">
												<h4>How to Enable Hover Sidemenu?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-27"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Hover
														Sidemenu</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Hover Sidemenu</b> you have to open <b>switcher-styles.js</b> <span
														class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>hover-submenu</code> as shown in below</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** hover-submenu ***** //
											// $('body').addClass('hover-submenu');
											// $('body').addClass('sidenav-toggled');
											// if(document.querySelector('body').classList.contains('login-img') !== true){
											// 	hovermenu();
											// }
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>hover-submenu</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** hover-submenu ***** //
											$('body').addClass('hover-submenu');
											$('body').addClass('sidenav-toggled');
											if(document.querySelector('body').classList.contains('login-img') !== true){
												hovermenu();
											}
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-28">
												<h4>How to Enable Hover Sidemenu Style 1?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-28"
												data-parent="#accordion">
												<h6 class="mt-0">Please follow the below steps to enable <b>Hover Sidemenu
														Style 1</b></h6>
												<h6 class="mt-3"><b>Step 1 :</b></h6>
												<p>To enable <b>Hover Sidemenu Style 1</b> you have to open <b>switcher-styles.js</b>
													<span class="text-primary ml-2 mr-2"> (assets/js/switcher-styles.js)</span> file
													and remove comments for <code>hover-submenu1</code> as shown in below
												</p>

												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** hover-submenu style 1 ***** //
											// $('body').addClass('hover-submenu1');
											// $('body').addClass('sidenav-toggled');
											// if(document.querySelector('body').classList.contains('login-img') !== true){
											// 	hovermenu();
											// }
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
												<h6 class="mt-3"><b>Step 2 :</b></h6>
												<span class="mb-3">Remove the comments to enable <code>hover-submenu1</code>
													as shown below</span>
												<!-- Prism Code -->
												<figure class="highlight clip-widget mb-0">
													<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">

											// ***** hover-submenu style 1 ***** //
											$('body').addClass('hover-submenu1');
											$('body').addClass('sidenav-toggled');
											if(document.querySelector('body').classList.contains('login-img') !== true){
												hovermenu();
											}
										</script></code></pre>
												</figure>
												<!-- End Prism Precode -->
											</div>
										</div>
									</div>

									<div id="localstorage">
										<h5 class="faq">Local Storage</h5>
										<div class="accordion">
											<div class="accordion-header" data-toggle="collapse"
												data-target="#panel-body-31">
												<h4>How to clear LocalStorage (cookie)?</h4>
											</div>
											<div class="accordion-body collapse border border-top-0" id="panel-body-31"
									data-parent="#accordion">
									<div class="">
										<h6 class="mt-3"><b>Step1:</b></h6>
										<p> Open <b>themeColors.js</b> file
											<code>assets/js/themeColors.js</code></p>
										<p>To clear LocalStorage loading functions you need to remove
											<b>localStorageBackup() {}</b> and localStorageBackup() calling function in themeColors.js as shown
											below</p>
	
										<!-- Prism Code -->
										<figure class="highlight clip-widget mb-0">
	<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
	
		function localStorageBackup() {
			'use strict'
			// if there is a value stored, update color picker and background color
			// Used to retrive the data from local storage
			if (localStorage.zanexprimaryColor) {
				// document.getElementById('colorID').value = localStorage.zanexprimaryColor;
				document.querySelector('html').style.setProperty('--primary-bg-color', localStorage.zanexprimaryColor);
				document.querySelector('html').style.setProperty('--primary-bg-hover', localStorage.zanexprimaryHoverColor);
				document.querySelector('html').style.setProperty('--primary-bg-border', localStorage.zanexprimaryBorderColor);
			}
			
			if (localStorage.zanexbgColor) {
				document.body.classList.add('dark-mode');
				document.body.classList.remove('light-mode');
				$('#myonoffswitch7').prop('checked', true);
				$('#myonoffswitch10').prop('checked', true);
				$('#myonoffswitch14').prop('checked', true);
				// document.getElementById('bgID').value = localStorage.zanexbgColor;
				document.querySelector('html').style.setProperty('--dark-body', localStorage.zanexbgColor);
				document.querySelector('html').style.setProperty('--dark-theme', localStorage.zanexthemeColor);
			}
		
			if(localStorage.zanexlightMode){
				document.querySelector('body')?.classList.add('light-mode');
				document.querySelector('body')?.classList.remove('dark-mode');
				$('#myonoffswitch6').prop('checked', true);
				$('#myonoffswitch8').prop('checked', true);
				$('#myonoffswitch12').prop('checked', true);
			}
			if(localStorage.zanexdarkMode){
				document.querySelector('body')?.classList.remove('light-mode');
				document.querySelector('body')?.classList.add('dark-mode');
				$('#myonoffswitch7').prop('checked', true);
				$('#myonoffswitch10').prop('checked', true);
				$('#myonoffswitch14').prop('checked', true);
			}
			
			if(localStorage.zanexhorizontal){
				document.querySelector('body').classList.add('horizontal')
			}
			
			if(localStorage.zanexhorizontalHover){
				document.querySelector('body').classList.add('horizontal-hover')
			}
		
			if(localStorage.zanexrtl){
				document.querySelector('body').classList.add('rtl')
			}
		
			if(localStorage.zanexclosedmenu){
				document.querySelector('body').classList.add('closed-leftmenu')
				$("#myonoffswitch23").prop("checked", true);
			}
		
			if(localStorage.zanexicontextmenu){
				document.querySelector('body').classList.add('icontext-menu')
				$("#myonoffswitch22").prop("checked", true);
			}
		
			if(localStorage.zanexiconoverlay){
				document.querySelector('body').classList.add('icon-overlay')
				$("#myonoffswitch21").prop("checked", true);
			}
		
			if(localStorage.zanexhoversubmenu){
				document.querySelector('body').classList.add('hover-submenu')
				$("#myonoffswitch24").prop("checked", true);
			}
		
			if(localStorage.zanexhoversubmenu1){
				document.querySelector('body').classList.add('hover-submenu1')
				$("#myonoffswitch25").prop("checked", true);
			}
		
			if(localStorage.zanexboxedwidth){
				document.querySelector('body').classList.add('layout-boxed')
				$("#myonoffswitch17").prop("checked", true);
			}
		
			if(localStorage.zanexscrollable){
				document.querySelector('body').classList.add('scrollable-layout')
				$("#myonoffswitch19").prop("checked", true);
			}
			
		
		  // MENUS
		
		  // LIGHT MENU
		  if (localStorage.zanexLightmenu) {
			document.querySelector("body")?.classList.add("light-menu");
			$("#myonoffswitch12").prop("checked", true);
		  }
		
		  // DARK MENU
		  if (localStorage.zanexDarkmenu) {
			document.querySelector("body")?.classList.add("dark-menu");
			$("#myonoffswitch14").prop("checked", true);
		  }
		
		  // COLOR MENU
		  if (localStorage.zanexColormenu) {
			document.querySelector("body")?.classList.add("color-menu");
			$("#myonoffswitch13").prop("checked", true);
		  }
		
		  // GRADIENT MENU
		  if (localStorage.zanexGradientmenu) {
			document.querySelector("body")?.classList.add("gradient-menu");
			$("#myonoffswitch15").prop("checked", true);
		  }
		
		  // HEADERS
		
		  // LIGHT HEADER
		  if (localStorage.zanexLightheader) {
			document.querySelector("body")?.classList.add("light-header");
			$("#myonoffswitch8").prop("checked", true);
		  }
		
		  // DARK HEADER
		  if (localStorage.zanexDarkheader) {
			document.querySelector("body")?.classList.add("dark-header");
			$("#myonoffswitch10").prop("checked", true);
		  }
		
		  // COLOR HEADER
		  if (localStorage.zanexColorheader) {
			document.querySelector("body")?.classList.add("color-header");
			$("#myonoffswitch9").prop("checked", true);
		  }
		
		  // GRADIENT HEADER
		  if (localStorage.zanexGradientheader) {
			document.querySelector("body")?.classList.add("gradient-header");
			$("#myonoffswitch11").prop("checked", true);
		  }
		}
		
	
	</script></code></pre>
										</figure>
										<!-- End Prism Precode -->
										<h6 class="mt-3"><b>Step2:</b></h6>
										<p>To remove complete <b>LocalStorage</b> saving you need to remove all
											localstorage related calling functions in <b>switcher-styles.js</b>
											<code>assets/js/switcher-styles.js</code> files.
										</p>
										<p><b>LocalStorage</b> related functions like localStorage.setItem,
											localStorage.removeItem, localStorage.getItem, localStorage.clear.
											Below are the some examples to find out.
										</p>
										<!-- Prism Code -->
										<figure class="highlight clip-widget mb-0">
											<pre title="jQuery" class="javascript" data-codetype="JQueryku"><code class="language-javascript">
		localStorage.setItem('zanexdarkMode', true);
		localStorage.removeItem('zanexlightMode');
	</script></code></pre>
										</figure>
										<!-- End Prism Precode -->
									</div>
								</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="col-xl-3 col-lg-12 d-none d-xl-block custom-leftnav">
					<div class="main-content-left-components">
						<div class="card custom-card">
							<div class="card-body component-item">
								<div class="collapse  navbar-collapse justify-content-end" id="main-menu">
									<ul class="navbar-nav">
										<li class="nav-item active">
											<a class="nav-link" href="#general">General</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#navigation">Navigation</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#rtl">RTL Version</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#theme">Theme Styles</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#header">Header Styles</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#menu">Menu Styles</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#layout">Layout Width Styles</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#layout-pos">Layout Positions</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#sidemenu">Sidemenu layout Styles</a>
										</li>
										<li class="nav-item">
											<a class="nav-link" href="#localstorage">Local Storage</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<div class="color-bg">
		<div class="sidebar__toggle" data-toggle="sidebar">
			<a class="open-toggle" href="javascript:void(0);"><i class="fe fe-menu"></i></a>
		</div>
		<ul class="nav navbar-nav">
		  <li class="nav-item mr-8"><a class="btn btn-primary btn-header " href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" target="_blank"><i class="icon-help2"></i> Buy Now</a></li>
		  <li class="nav-item mr-8"><a class="btn btn-secondary btn-header " href="https://1.envato.market/MGEaN" target="_blank"><i class="icon-bag3"></i> Portfolio</a></li>
		  <li class="nav-item"><a class="btn btn-danger text-white mr-3 btn-header" href="https://spruko.com/licenses.html" target="_blank"><i class="icon-bag3"></i> Licenses</a></li>
		</ul>
	</div>

	<!-- Jquery Core Js -->
	<script src="assets/bundles/libscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
	<script src="assets/bundles/morphingsearchscripts.bundle.js"></script> <!-- morphing search Js -->
	<script src="assets/bundles/vendorscripts.bundle.js"></script> <!-- Lib Scripts Plugin Js -->
	<script src="assets/bundles/mainscripts.bundle.js"></script><!-- Custom Js -->
	<script src="assets/bundles/morphingscripts.bundle.js"></script><!-- morphing search page js -->

	<!-- Internal Prism js-->
	<script src="assets/plugins/prism/prism.js"></script>

	<!-- Treeview js-->
	<script src="assets/plugins/treeview-prism/prism.js"></script>
	<script src="assets/plugins/treeview-prism/prism-treeview.js"></script>

	<!-- Perfectscroll js-->
	<script src="assets/plugins/perfect-scrollbar/perfect-scrollbar.min.js"></script>
	<script src="assets/plugins/perfect-scrollbar/p-scroll.js"></script>

	<!-- Custom js-->
	<script src="assets/js/custom.js"></script>
	<script src="assets/js/menuspy.min.js.js"></script>

	<script>
		var elm = document.querySelector('#main-menu');
		var ms = new MenuSpy(elm);

		(function () {

			if (typeof self === 'undefined' || !self.Prism || !self.document) {
				return;
			}

			/**
			 * Class name for <pre> which is activating the plugin
			 * @type {String}
			 */
			var PLUGIN_CLASS = 'line-numbers';

			/**
			 * Resizes line numbers spans according to height of line of code
			 * @param  {Element} element <pre> element
			 */
			var _resizeElement = function (element) {
				var codeStyles = getStyles(element);
				var whiteSpace = codeStyles['white-space'];

				if (whiteSpace === 'pre-wrap' || whiteSpace === 'pre-line') {
					var codeElement = element.querySelector('code');
					var lineNumbersWrapper = element.querySelector('.line-numbers-rows');
					var lineNumberSizer = element.querySelector('.line-numbers-sizer');
					var codeLines = element.textContent.split('\n');

					if (!lineNumberSizer) {
						lineNumberSizer = document.createElement('span');
						lineNumberSizer.className = 'line-numbers-sizer';

						codeElement.appendChild(lineNumberSizer);
					}

					lineNumberSizer.style.display = 'block';

					codeLines.forEach(function (line, lineNumber) {
						lineNumberSizer.textContent = line || '\n';
						var lineSize = lineNumberSizer.getBoundingClientRect().height;
						lineNumbersWrapper.children[lineNumber].style.height = lineSize + 'px';
					});

					lineNumberSizer.textContent = '';
					lineNumberSizer.style.display = 'none';
				}
			};

			/**
			 * Returns style declarations for the element
			 * @param {Element} element
			 */
			var getStyles = function (element) {
				if (!element) {
					return null;
				}

				return window.getComputedStyle ? getComputedStyle(element) : (element.currentStyle || null);
			};

			window.addEventListener('resize', function () {
				Array.prototype.forEach.call(document.querySelectorAll('pre.' + PLUGIN_CLASS), _resizeElement);
			});

			Prism.hooks.add('complete', function (env) {
				if (!env.code) {
					return;
				}

				// works only for <code> wrapped inside <pre> (not inline)
				var pre = env.element.parentNode;
				// Original regex check for class, leaving it here
				// for its redundancy check
				var clsReg = /\s*\bline-numbers\b\s*/;
				// New regex check for opt-out class
				var clsRegB = /\s*\bno-line-numbers\b\s*/;

				if (env.element.querySelector(".line-numbers-rows")) {
					// Abort if line numbers already exists
					return;
				}

				// Added to facilitate opting out
				if (clsRegB.test(pre.className)) {
					// Respect the opt-out
					return;
				}

				if (clsReg.test(env.element.className)) {
					// Remove the class "line-numbers" from the <code>
					env.element.className = env.element.className.replace(clsReg, ' ');
				}
				if (!clsReg.test(pre.className)) {
					// Add the class "line-numbers" to the <pre>
					pre.className += ' line-numbers';
				}

				var match = env.code.match(/\n(?!$)/g);
				var linesNum = match ? match.length + 1 : 1;
				var lineNumbersWrapper;

				var lines = new Array(linesNum + 1);
				lines = lines.join('<span></span>');

				lineNumbersWrapper = document.createElement('span');
				lineNumbersWrapper.setAttribute('aria-hidden', 'true');
				lineNumbersWrapper.className = 'line-numbers-rows';
				lineNumbersWrapper.innerHTML = lines;

				if (pre.hasAttribute('data-start')) {
					pre.style.counterReset = 'linenumber ' + (parseInt(pre.getAttribute('data-start'), 10) - 1);
				}

				env.element.appendChild(lineNumbersWrapper);

				_resizeElement(pre);
			});

		}());
	</script>

</body>

</html>

?>