Your IP : 3.144.255.198
<!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="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 home">
<div class="container-fluid">
<div class="">
<div class="alert alert-primary-transparent">
<button type="button" class="btn-close" data-dismiss="alert" aria-hidden="true">×</button>
<strong>Note:-</strong>
<hr class="message-inner-separator">
<p>Please refer <a href="faqs.html" class="text-primary fs-6 fw-bold">Faq's</a>page in documentation itself for queries like customization like color ,rtl ,dark style..etc.</p>
</div>
</div>
<div class="block-header mt-3 ml-3">
<h1>How to enable switcher in any page ?</h1>
</div>
<div class="row clearfix">
<div class="col-xl-9">
<div class="row clearfix">
<div class="col-sm-12">
<div class="card main-section" id="leftmenu">
<div class="body">
<h5 class="mt-0 mb-3">Switcher</h5>
<p>Note:- The switcher.html page displayed in pages -> Theme Style in web </p>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-19">
<h4>How to Enable Styles for switcher?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-19" data-parent="#accordion">
<h6 class=""> Please Follow the below steps</h6>
<h6 class="mt-3">Step1:</h6>
<p> Go To any HTML file in Script Section you change our <b><span class="text-primary ml-2 mr-2"> ../assets/js/custom.js </span>
</b>link to <b><span class="text-primary ml-2 mr-2"> ../assets/js/custom1.js link </span> </b> link as shown in below image</p>
<img alt="img" src="assets/images/0-7.jpg" class="border img-fluid">
</div>
</div>
<p class="mt-2">To enable the switcher then you must have to place below html, css, js in your html page .</p>
<p>If you want to use <b> switcher icon</b> please go through <b> empty.html</b> page.</p>
<p class="">Below HTML is in <b>switcher.html</b> file </p>
<div class="body p-0 border">
<div class="bg-primary-transparent">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link " data-toggle="tab" href="#Leftmenu-html" role="tab" aria-selected="true" data-original-title="" title="">Switcher Html</a></li>
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#Leftmenu-css" role="tab" aria-selected="true" data-original-title="" title="">Switcher Css</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#Leftmenu-js" role="tab" aria-selected="true" data-original-title="" title="">Switcher Js</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#image" role="tab" aria-selected="true" data-original-title="" title="">Switcher-demo Images</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#code-html" role="tab" aria-selected="true" data-original-title="" title="">Switcher icon in header section </a></li>
</ul>
<div class="tab-content mt-0 p-0" id="myTabContent">
<div class="tab-pane fade show" id="Leftmenu-html" role="tabpanel">
<!-- 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">
<!-- Switcher -->
<div class="switcher-wrapper">
<div class="demo_changer">
<div class="form_holder sidebar-right1">
<div class="row">
<div class="predefined_styles">
<div class="swichermainleft text-center">
<div class="p-3 d-grid gap-2">
<a href="../../index.html" class="btn ripple btn-primary mt-0">View Demo</a>
<a href="https://themeforest.net/item/zanex-bootstrap-5-admin-dashboard-template/32984858" class="btn ripple btn-secondary">Buy Now</a>
<a href="https://themeforest.net/user/spruko/portfolio" class="btn ripple btn-red">Our Portfolio</a>
</div>
</div>
<div class="swichermainleft">
<h4>Theme Style</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Light Theme</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch7"
id="myonoffswitch6" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch6" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex">
<span class="me-auto">Dark Theme</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch7"
id="myonoffswitch7" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch7" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>Theme Color</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Primary Color</span>
<div class="">
<input class=" input-color-picker color-primary-light"
value="#6259ca" id="colorID" oninput="changePrimaryColor()" type="color"
data-id="bg-color" data-id1="bg-hover" data-id2="bg-border" name="lightPrimary">
</div>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Background Color</span>
<div class="">
<input class="input-bg-picker background-primary-light"
value="#30304d" id="bgID" oninput="changeBackgroundColor()"
type="color" data-id3="body" data-id4="theme" name="BackgroundPrimary">
</div>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>Navigation Style</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Vertical Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch15"
id="myonoffswitch1" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch1" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Horizontal Click Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch15"
id="myonoffswitch2" class="onoffswitch2-checkbox">
<label for="myonoffswitch2" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Horizontal Hover Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch15"
id="myonoffswitch111" class="onoffswitch2-checkbox">
<label for="myonoffswitch111" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>LTR and RTL VERSIONS</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">LTR Version</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch8"
id="myonoffswitch4" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch4" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">RTL Version</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch8"
id="myonoffswitch5" class="onoffswitch2-checkbox">
<label for="myonoffswitch5" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft menu-style">
<h4>Header Styles</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle lightHeader d-flex">
<span class="me-auto">Light Header</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch3"
id="myonoffswitch8" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch8" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle colorHeader d-flex mt-2">
<span class="me-auto">Color Header</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch3"
id="myonoffswitch9" class="onoffswitch2-checkbox">
<label for="myonoffswitch9" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle darkHeader d-flex mt-2">
<span class="me-auto">Dark Header</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch3"
id="myonoffswitch10" class="onoffswitch2-checkbox">
<label for="myonoffswitch10" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle darkHeader d-flex mt-2">
<span class="me-auto">Gradient Header</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch3"
id="myonoffswitch11" class="onoffswitch2-checkbox">
<label for="myonoffswitch11" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft menu-style">
<h4>Menu Styles</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle lightMenu d-flex">
<span class="me-auto">Light Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch2"
id="myonoffswitch12" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch12" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle colorMenu d-flex mt-2">
<span class="me-auto">Color Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch2"
id="myonoffswitch13" class="onoffswitch2-checkbox">
<label for="myonoffswitch13" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle darkMenu d-flex mt-2">
<span class="me-auto">Dark Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch2"
id="myonoffswitch14" class="onoffswitch2-checkbox">
<label for="myonoffswitch14" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle gradientMenu d-flex mt-2">
<span class="me-auto">Gradient Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch2"
id="myonoffswitch15" class="onoffswitch2-checkbox">
<label for="myonoffswitch15" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>Layout Width Styles</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Full Width</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch4"
id="myonoffswitch16" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch16" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Boxed</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch4"
id="myonoffswitch17" class="onoffswitch2-checkbox">
<label for="myonoffswitch17" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>Layout Positions</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Fixed</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch5"
id="myonoffswitch18" class="onoffswitch2-checkbox" checked>
<label for="myonoffswitch18" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Scrollable</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch5"
id="myonoffswitch19" class="onoffswitch2-checkbox">
<label for="myonoffswitch19" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft leftmenu-styles">
<h4>Sidemenu layout Styles</h4>
<div class="skin-body">
<div class="switch_section">
<div class="switch-toggle d-flex">
<span class="me-auto">Default Menu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch20" class="onoffswitch2-checkbox default-menu" checked>
<label for="myonoffswitch20" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Icon with Text</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch22" class="onoffswitch2-checkbox">
<label for="myonoffswitch22" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Icon Overlay</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch21" class="onoffswitch2-checkbox">
<label for="myonoffswitch21" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Closed Sidemenu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch23" class="onoffswitch2-checkbox">
<label for="myonoffswitch23" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Hover Submenu</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch24" class="onoffswitch2-checkbox">
<label for="myonoffswitch24" class="onoffswitch2-label"></label>
</p>
</div>
<div class="switch-toggle d-flex mt-2">
<span class="me-auto">Hover Submenu Style 1</span>
<p class="onoffswitch2"><input type="radio" name="onoffswitch6"
id="myonoffswitch25" class="onoffswitch2-checkbox">
<label for="myonoffswitch25" class="onoffswitch2-label"></label>
</p>
</div>
</div>
</div>
</div>
<div class="swichermainleft">
<h4>Reset All Styles</h4>
<div class="skin-body">
<div class="switch_section my-4">
<button class="btn btn-danger btn-block" onclick="localStorage.clear();
document.querySelector('html').style = '';
names() ;
resetData() ;" type="button">Reset All
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Switcher -->
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane fade show active" id="Leftmenu-css" role="tabpanel">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<script type="html-Azea/script">
<!-- INTERNAL Switcher css -->
<link href="../assets/switcher/css/switcher.css" rel="stylesheet"/>
<link href="../assets/switcher/demo.css" rel="stylesheet"/>
</script>
</code>
</pre>
</figure>
<!-- End Prism Precode -->
</div>
<div class="tab-pane fade show" id="Leftmenu-js" role="tabpanel">
<!-- Prism Code -->
<figure class="highlight clip-widget mb-0">
<pre class="language-css line-numbers language-markup m-0">
<code class="language-css language-markup">
<!-- Switcher js -->
<script src="../assets/switcher/js/switcher.js"></script>
</code>
</pre>
</figure>
</div>
<div class="tab-pane fade show" id="image" role="tabpanel" aria-expanded="true">
<div class="p-5">
<p class="fs-20"> "Below links shows how the switcher pages looks like & path of the Switcher pages in the template."</p>
<p><a href="https://prnt.sc/kqLQ4qVM1N-q">https://prnt.sc/kqLQ4qVM1N-q</a> <span class="ml-3">(Path:-pages/Theme Style)</span></p>
</div>
</div>
<div class="tab-pane fade show" id="code-html" role="tabpanel">
<p class="p-3">If you want switcher icon in html pages then replace below code in <code>app header</code> section </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">
<!-- app-Header -->
<div class="app-header header sticky">
<div class="container-fluid main-container">
<div class="d-flex align-items-center">
<a aria-label="Hide Sidebar" class="app-sidebar__toggle" data-bs-toggle="sidebar" href="javascript:void(0);"></a>
<div class="responsive-logo">
<a href="index.html" class="header-logo">
<img src="../assets/images/brand/logo-3.png" class="mobile-logo logo-1" alt="logo">
<img src="../assets/images/brand/logo.png" class="mobile-logo dark-logo-1" alt="logo">
</a>
</div>
<!-- sidebar-toggle-->
<a class="logo-horizontal " href="index.html">
<img src="../assets/images/brand/logo.png" class="header-brand-img desktop-logo" alt="logo">
<img src="../assets/images/brand/logo-3.png" class="header-brand-img light-logo1"
alt="logo">
</a>
<!-- LOGO -->
<div class="main-header-center ms-3 d-none d-lg-block">
<input class="form-control" placeholder="Search for anything..." type="search"> <button class="btn"><i class="fa fa-search" aria-hidden="true"></i></button>
</div>
<div class="d-flex order-lg-2 ms-auto header-right-icons">
<!-- SEARCH -->
<button class="navbar-toggler navresponsive-toggler d-lg-none ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-4" aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon fe fe-more-vertical text-dark"></span>
</button>
<div class="navbar navbar-collapse responsive-navbar p-0">
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<div class="d-flex order-lg-2">
<div class="dropdown d-block d-lg-none">
<a href="javascript:void(0);" class="nav-link icon" data-bs-toggle="dropdown">
<i class="fe fe-search"></i>
</a>
<div class="dropdown-menu header-search dropdown-menu-start">
<div class="input-group w-100 p-2">
<input type="text" class="form-control" placeholder="Search....">
<div class="input-group-text btn btn-primary">
<i class="fa fa-search" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
<div class="dropdown d-md-flex">
<a class="nav-link icon theme-layout nav-link-bg layout-setting">
<span class="dark-layout"><i class="fe fe-moon"></i></span>
<span class="light-layout"><i class="fe fe-sun"></i></span>
</a>
</div>
<!-- Theme-Layout -->
<div class="dropdown d-md-flex">
<a class="nav-link icon full-screen-link nav-link-bg">
<i class="fe fe-minimize fullscreen-button" id="myvideo"></i>
</a>
</div>
<!-- FULL-SCREEN -->
<div class="dropdown d-md-flex notifications">
<a class="nav-link icon" data-bs-toggle="dropdown"><i class="fe fe-bell"></i><span class=" pulse"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow ">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold">You have Notification</h6>
<div class="ms-auto">
<span class="badge bg-success rounded-pill">3</span>
</div>
</div>
</div>
<div class="notifications-menu">
<a class="dropdown-item d-flex" href="chat.html">
<div class="me-3 notifyimg bg-primary-gradient brround box-shadow-primary">
<i class="fe fe-message-square"></i>
</div>
<div class="mt-1">
<h5 class="notification-label mb-1">New review received</h5>
<span class="notification-subtext">2 hours ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<div class="me-3 notifyimg bg-secondary-gradient brround box-shadow-primary">
<i class="fe fe-mail"></i>
</div>
<div class="mt-1">
<h5 class="notification-label mb-1">New Mails Received</h5>
<span class="notification-subtext">1 week ago</span>
</div>
</a>
<a class="dropdown-item d-flex" href="cart.html">
<div class="me-3 notifyimg bg-success-gradient brround box-shadow-primary">
<i class="fe fe-shopping-cart"></i>
</div>
<div class="mt-1">
<h5 class="notification-label mb-1">New Order Received</h5>
<span class="notification-subtext">1 day ago</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="javascript:void(0);" class="dropdown-item text-center p-3 text-muted">View all Notification</a>
</div>
</div>
<!-- NOTIFICATIONS -->
<div class="dropdown d-md-flex message">
<a class="nav-link icon text-center" data-bs-toggle="dropdown">
<i class="fe fe-message-square"></i><span class=" pulse-danger"></span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading border-bottom">
<div class="d-flex">
<h6 class="mt-1 mb-0 fs-16 fw-semibold">You have Messages</h6>
<div class="ms-auto">
<span class="badge bg-danger rounded-pill">4</span>
</div>
</div>
</div>
<div class="message-menu">
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/1.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Madeleine</h5>
<small class="text-muted ms-auto text-end">
3 hours ago
</small>
</div>
<span>Hey! there I' am available....</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/12.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Anthony</h5>
<small class="text-muted ms-auto text-end">
5 hour ago
</small>
</div>
<span>New product Launching...</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/4.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Olivia</h5>
<small class="text-muted ms-auto text-end">
45 mintues ago
</small>
</div>
<span>New Schedule Realease......</span>
</div>
</a>
<a class="dropdown-item d-flex" href="chat.html">
<span class="avatar avatar-md brround me-3 align-self-center cover-image" data-bs-image-src="../assets/images/users/15.jpg"></span>
<div class="wd-90p">
<div class="d-flex">
<h5 class="mb-1">Sanderson</h5>
<small class="text-muted ms-auto text-end">
2 days ago
</small>
</div>
<span>New Schedule Realease......</span>
</div>
</a>
</div>
<div class="dropdown-divider m-0"></div>
<a href="javascript:void(0);" class="dropdown-item text-center p-3 text-muted">See all Messages</a>
</div>
</div>
<!-- MESSAGE-BOX -->
<div class="dropdown d-md-flex profile-1">
<a href="javascript:void(0);" data-bs-toggle="dropdown" class="nav-link leading-none d-flex px-1">
<span>
<img src="../assets/images/users/8.jpg" alt="profile-user" class="avatar profile-user brround cover-image">
</span>
</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
<div class="drop-heading">
<div class="text-center">
<h5 class="text-dark mb-0">Elizabeth Dyer</h5>
<small class="text-muted">Administrator</small>
</div>
</div>
<div class="dropdown-divider m-0"></div>
<a class="dropdown-item" href="profile.html">
<i class="dropdown-icon fe fe-user"></i> Profile
</a>
<a class="dropdown-item" href="email.html">
<i class="dropdown-icon fe fe-mail"></i> Inbox
<span class="badge bg-secondary float-end">3</span>
</a>
<a class="dropdown-item" href="emailservices.html">
<i class="dropdown-icon fe fe-settings"></i> Settings
</a>
<a class="dropdown-item" href="faq.html">
<i class="dropdown-icon fe fe-alert-triangle"></i> Need help?
</a>
<a class="dropdown-item" href="login.html">
<i class="dropdown-icon fe fe-alert-circle"></i> Sign out
</a>
</div>
</div>
<div class="dropdown d-md-flex header-settings">
<a href="javascript:void(0);" class="nav-link icon " data-bs-toggle="sidebar-right" data-target=".sidebar-right">
<i class="fe fe-menu"></i>
</a>
</div>
<!-- SIDE-MENU -->
</div>
</div>
</div>
<div class="demo-icon nav-link icon border-0">
<i class="fe fe-settings fa-spin"></i>
</div>
</div>
</div>
</div>
</div>
<!-- /app-Header -->
</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="#leftmenu">Switcher</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chart-color">chart-color</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-9">
<div class="row clearfix">
<div class="col-sm-12">
<div class="card main-section" id="chart-color">
<div class="body">
<h5 class="mt-0 mb-3">How to change any chart color according to your theme color?</h5>
<p>By default, the chart color will change based on the theme color.</p>
<p>You can replace the default chart with your own chart, but in order to change the colors of your chart with respect to the theme colors you have to follow the below steps.</p>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-color">
<h4>How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-color" data-parent="#accordion">
<p><b> Note:</b> This process is only for replace your own chart in index.html page</p>
<h6 class="mt-3">Step1:</h6>
<p>Go to root path: <b>assets/js/index1.js</b> in that js file you will find a function named as index <b>" function chartArea() "</b> inside of that function replace the old chart js data with your new chart js data,
in order to change your chart color according to your themecolor then add <b>" myVarVal" or "any default color "</b> (Ex:- myVarVal || "#6259ca") value to that particular color field based on your requirement.</p>
<h6 class="mt-3">Step2:</h6>
<p>Navigate to root path: <b>assets/js/</b> and open <b>themeColors.js</b> in that js file you will find a function called <b>"(function names() )"</b>
In that function you will find</p>
<code>
"if(document.querySelector('#chartArea') !== null){
chartArea();
}"
</code>
<p class="mt-3">Then change it's id name based on the id that you've used for your particular chart.</p>
<p> <b>Ex:</b> How do I modify the Id in the <b>"themeColors.js"</b> file?</p>
<ul>
<b class="me-2">Before :</b> <code> "if(document.querySelector('#chartArea') !== null){
chartArea();
}"
</code><br><br>
<b class="me-2"> After :</b><code> "if(document.querySelector('# your chart id') !== null){
chartArea();
}"
</code>
</ul>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-color1">
<h4>How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-color1" data-parent="#accordion">
<p><b>Note :</b> This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)</p>
<p>If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.</p>
<h6 class="mt-3">Step 1:</h6>
<p>If you want to add any chart to any other page then follow the below process.</p>
<p> Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique "
name (for example in my case: myFunction() ), and then place the chart js content inside of that function.</p>
<p><b>Note:</b> If there is more than one chart then you need to create different functions for different charts respectively.</p>
<b class="me-2">Ex-1:</b><code> myFunction1() {
chart js1 content
}
</code><br><br>
<b class="me-2">Ex-2:</b><code>myFunction2() {
chart js2 content
}
</code>
<h6 class="mt-4 mb-3">Step 2:</h6>
<p>Navigate to root path: <b>assets/js/themeColors.js</b> in that js file you will find a function called <b>"(function names() )"</b>
In that function you will find</p>
<code> "if(document.querySelector('#chartArea') !== null){
chartArea();
}"
</code>
<p class="mt-3"> Below this condition add a new condition with the <b>"id name and function name"</b> that you've used in your chart js
(Ex: mychart.js)</p>
<b class="me-2">Ex:</b><code> " if(document.querySelector('# your chart id') !== null){
myFunction(); =>created function for the above id
}"
</code>
<h6 class="mt-3">Step 3:</h6>
<p>If you want to change your chart <b>(Ex: mychart.js)</b> color according to your themecolor then follow the below process</p>
<p><b>Ex :</b> Go to root path: <b>assets/js/mychart.js</b> in that js file you've already created a function <b>(Ex: myFunction() )</b> inside of that function there are different color values based on the chart. so, if you want to change the color then add <b>" myVarVal " or "any default color"</b> value (Ex:- myVarVal || "#6259ca")to that particular color field based on your requirement. </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer opened -->
<div class="main-footer ht-40">
<div class="pd-t-0-f ht-100p">
<span>Copyright © <span id="year"></span> <a href="javascript:void(0)">Zanex</a>. Designed with <span class="fa fa-heart text-danger"></span> by <a href="javascript:void(0)"> Spruko </a> All rights reserved.</span>
</div>
</div>
<!-- Footer closed -->
</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>