Your IP : 18.191.67.90
<!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>