Your IP : 3.144.16.40
<!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 mt-4 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="row clearfix">
<div class="col-sm-12 col-lg-12 col-xl-9">
<div class="row clearfix">
<div class="col-sm-12">
<div class="">
<div class="card" id="faqs">
<div class="header body">
<h5 class="mt-0">Theme Styles</h5>
</div>
<div class="card-body">
<div id="accordion">
<div id="primary">
<h5 class="faq mt-0">Primary Color For All Themes</h5>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-31">
<h4>How to Change Primary Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-31" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Primary Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Primary Color</b> you have to open <b>_bootstrap-styles.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_bootstrap-styles.scss</b> <span class="text-primary ml-3"> (assets/scss/bootstrap/_bootstrap-styles.scss )</span> </p>
<img alt="" src="assets/images/0-10.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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>
<div id="light">
<h5 class="faq">Light Theme Style</h5>
<p class="">If you want to change Light Theme color you need to follow the below process. Below are the background color, text color and border color of Light Theme. Please follow the below process. </p>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-41">
<h4>How to Change Light Background Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-41" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Light Background Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Light Background Color</b> you have to open <b>_variables.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_variables.scss</b> <span class="text-primary ml-3"> (assets/scss/_variables.scss )</span> </p>
<img alt="" src="assets/images/0-21.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-42">
<h4>How to Change Light Text Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-42" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Light Text Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Light Text Color</b> you have to open <b>_variables.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_variables.scss</b> <span class="text-primary ml-3"> (assets/scss/_variables.scss )</span> </p>
<img alt="" src="assets/images/0-22.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-43">
<h4>How to Change Light Border Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-43" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Light Border Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Light Border Color</b> you have to open <b>_variables.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_variables.scss</b> <span class="text-primary ml-3"> (assets/scss/_variables.scss )</span> </p>
<img alt="" src="assets/images/0-20.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
</div>
<div id="dark">
<h5 class="faq">Dark Theme Style</h5>
<p class="">If you want to change Dark Theme color you need to follow the below process. Below are the body color, theme color, border color and text color of Dark Theme. Please follow the below process. </p>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-37">
<h4>How to Change Dark body Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-37" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Dark body Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Dark body Color</b> you have to open <b>_bootstrap-styles.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_bootstrap-styles.scss</b> <span class="text-primary ml-3"> (assets/scss/_bootstrap-styles.scss )</span> </p>
<img alt="" src="assets/images/0-16.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-38">
<h4>How to Change Dark Theme Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-38" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Dark Theme Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Dark Theme Color</b> you have to open <b>_bootstrap-styles.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_bootstrap-styles.scss</b> <span class="text-primary ml-3"> (assets/scss/_bootstrap-styles.scss )</span> </p>
<img alt="" src="assets/images/0-17.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-39">
<h4>How to Change Dark Border Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-39" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Dark Border Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Dark Border Color</b> you have to open <b>_variables.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_variables.scss</b> <span class="text-primary ml-3"> (assets/scss/_variables.scss )</span> </p>
<img alt="" src="assets/images/0-18.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</div>
<div class="accordion">
<div class="accordion-header" data-toggle="collapse" data-target="#panel-body-40">
<h4>How to Change Dark Text Color?</h4>
</div>
<div class="accordion-body collapse border border-top-0" id="panel-body-40" data-parent="#accordion">
<h6 class="mt-0">Please follow the below steps to change <b>Dark Text Color</b></h6>
<h6 class="mt-3"><b>Step 1 :</b></h6>
<p>To change <b>Dark Text Color</b> you have to open <b>_variables.scss</b> file and replace what color you want as shown in below</p>
<p>Rootpath : <b>_variables.scss</b> <span class="text-primary ml-3"> (assets/scss/_variables.scss )</span> </p>
<img alt="" src="assets/images/0-19.JPG" class="border">
<h6 class="mt-3"><b>Step 2 :</b></h6>
<p><b>Note : </b>After Changing color 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></p>
</div>
</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="#primary">Primary Color For All Themes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#light">Light Theme Style</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dark">Dark Theme Style</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>