Dashplex - Cake PHP Bootstrap 5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Menu style..etc.

Dashboard
Welcome to Dashplex – Cake PHP Bootstrap 5 Admin & Dashboard Template
  • Created Date: 15/09/2022
  • Author: Spruko
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries please contact live chat or email : support@spruko.com

If You Love Our Template Design Please don't forgot to rate it. Thank you so much!

Introduction
Welcome to Dashplex – Cake PHP Bootstrap 5 Admin & Dashboard Template

Dashplex - Cake PHP Admin Template, With these template formats, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Template Description

Dashplex is a Bootstrap Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Dashplex Cake PHP admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 100+ PHP Pages & 50+ Plugins & more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed for using HTML5,CSS3,Jquery. After Purchased this template you will get All PHP files,CSS, Scss and JS Files.

It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with a awesome unique design also we ensure you can easily design admin template.

It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Dashplex , you will be able to get free download of all future updates.

Template Features
Vertical-menu Horizontal Click menu Horizontal Hover menu
RTL Ready 100+ PHP Pages Bootstrap 5 Responsive Framework
Well Commented Code 24 * 7 Professional Company Support 50+ Plugins
Sales Dashbaord Crypto Currency Dashboard Ecommerce Dashboard
Gallery 5 types of Charts Select2
About us Blog File Manager
Settings Page Blog Details Calendar
Mail Inbox 12 Types of Icons File upload
Message Chat Form Elements Month & Date & Year Range Pickers
Form Advanced Elements Data Tables Lockscreen Page
Error Page Under Construction Page User Profile
Invoice Page Advanced Pricing Tables Easy to Customize
More Widgets Neat, clean and simple design W3C Validated
Dependencies
  • "php": ">=7.4"
  • "CakePHP = 4.3"
  • "Cakephp/cakephp": "4.4.*"
  • "Cakephp/plugin-installer": "^1.3"
  • "Cakephp/bake": "^2.6"
Installation Process of composer

In order to run CakePHP we need to install composer by the followingsteps
Steps to Download & Installation of Composer

Step1: Please visite the official web site of the composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 7.3 V, here we used 8.0.9 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

How to download CakePHP starter kit

Here we are using "Composer" to download "CakePHP" fremework

Note : This installation is shown based on XAMPP server..

Step1: Open command prompt, find the path of your XAMPP that is installed in your system.

Step2: Set your path as (Example: C:\xampp\htdocs>) in command prompt.

Step3. Now type the following command line to download the CakePHP fremework or starter kit in your "htdocs" folder composer create-project --prefer-dist cakephp/app:~4.0 my_app_name and press Enter.

Step4: Now your downloading is started please wait for sometime to download all the necessary dependencies and packages.

Step5: If you have any doubt, please go through the official documentation by clicking the link "https://book.cakephp.org/4/en/installation.html" .

After installation run following command to get CakePHP development server
"bin/cake server"
How to create Controllers

Step1: Open your CakePHP project folder set your path as (Example: C:\xampp\htdocs\my_app_name) in command the prompt.

Step2: Now type the following command line : cd bin    Example: C:\xampp\htdocs\my_app_name\bin>.

Step3: Next, type the following command line : cake and press enter, to install cake.

Step4: After that, type the following command line : cake bake controller controllername and press enter to create controller in : my_app_name/src/Controller/controllername.php .

The Basic Structure Of CakePHP Project
        

								├── .github
								├── bin
								├── config
								├── logs
								├── plugins
								├── resources
								├── src
								├── templates
								├── tests
								├── tmp
								├── vendor
								├── webroot
								├── .editorconfig
								├── .gitattributes
								├── .gitignore
								├── .htaccess
								├── composer.json
								├── composer.lock
								├── gulpfile.js
								├── index.php
								├── package-lock.json
								├── package.json
								├── phpcs.xml
								├── phpstan.neon
								├── phpunit.xml.dist
								└── README.md
											
								
						
  • First, unzip the project folder that you received from us.
  • Go to your project's root path, for example, path: myproject\templates. In this folder you will see 11+ folders with 100+ PHP files.
  • Navigate to your project's root path, for example, path:\myproject\templates\ and open element folder there you will find app-header.php,
    app-sidebar.php, footer.php, switcher.php, and model.php files.
  • Here default.php file is the base file for all the php pages except elements pages, forms pages and apps pages, etc.
  • Here error.php file is the base file for all custom pages ex: error400.php and error500.php.
  • Here error1.php file is the base file for the remaining custom pages ex: forgot.php, lockscreen.php, etc.
  • Here error2.php file is the base file for the ex: danger_message.php, success_message.php and warning_message.php.
  • And master1.php file is the base file for SwitcherPage.php page.
SCSS & CSS

Here we provided the packages.json and gulpfile.js files in your project you just need to run npm install in your terminal at your project root path.

After compilation of download, you can compile your SCSS & CSS files by following the below procedure.

GULP COMMANDS
Command Description
gulp Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp watch In this template gulp watch command is for what ever changes made in scss folder, will watch and run an appropriate task. All the CSS files under webroot/assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
gulp plugins In this template gulp plugins command is for what ever changes are made in plugins folder in the scss folder, will be watched and the changes automatically updated in plugins.css file in css folder.
How to Run CakePHP Project in localhost

If you have installed XAMPP on your machine then please follow the below steps

Step:1 Quick view of Installations

1. Download and Install the Composer from official site https://getcomposer.org/

2. Install CakePHP by using Composer as mentioned in the installation process above.

Step:2 Run project

1. After downloading your CakePHP project, open Xampp and click on the start button on the Apache server and MySQL server.

2. Extract the zip folder of the CakePHP project that you received.

3. If your project is placed on a local server, for example, C:\xampp\htdocs\myprojectfolder, then type localhost followed by your project folder name in the browser to access the project.

4. If your project is placed in any other drive or location in your system, set that perticular project root path in the command prompt. Example: C:\Users\Admin\Desktop\myprojectfolder and type the command as shown below.

5. Example: C:\Users\Admin\Desktop\myprojectfolder bin/cake server

6. In my case, the CakePHP Development Server is started at http://localhost:8765 port, but it might be different port in your case.

7. Copy the url and past it in your favorite browser and hit enter to access your project

Installation Instructions For both CPANEL’S and FTP

Installation Instructions

Upload the Project that you have purchased, based on your uploading process on server

FTP Uploading Process
    Access FTP:
  1. Login to your FTP server using your login credentials provided by your hosting provider.
  2. Upload Project Files:
  3. Now extract the project folder that you have received, in any of your directories
  4. Now navigate to that directory using FTP panel and upload the project in Path: public_html/ directory in your FTP server .
  5. Once the uploading completes you can access your domain Example: www.example.com
cPanel Uploading Process
    Access cPanel:
  1. Login to your cPanel server using your login credentials provided by your hosting provider.
  2. Upload Project Files:
  3. Once you successfully accessed your cPanel dashboard, navigate and click on File Manager
  4. Now open public_html and click on Upload
  5. Here you can select your zipped project folder or you can simply drag and drop your zipped project folder, once the uploading is completed go back to the public_html folder
  6. In the public_html folder, you will find your zipped project folder now you need to extract that project folder
  7. Once the extraction is completed you can access your domain Example: www.example.com
versions
  • PHP : "^8.1.4",
  • Composer : "^2.2.9",
  • CakePHP/framework : "^4.3",
Folder Structure
        
									├── .github
									|   ├── workflows
									|   ├── dependabot.yml
									|   ├── ISSUE_TEMPLATE.md
									|   └── PULL_REQUEST_TEMPLATE.md
									├── bin
									|   ├── bash_completion.sh
									|   ├── cake
									|   ├── cake.bat
									|   └── cake.php
									├── config
									|   ├── schema
									|   ├── .env.example
									|   ├── app_local.example.php
									|   ├── app_local.php
									|   ├── app.php
									|   ├── bootstrap_cli.php
									|   ├── bootstrap.php
									|   ├── paths.php
									|   ├── requirements.php
									|   └── routes.php
									├── logs
									├── plugins
									├── resources
									├── src
									|   ├── Console
									|   |   └── Installer.php
									|   ├── Controller
									|   |   ├── Component
									|   |   └── 12 Controllers.php files
									|   ├── Model
									|   |   ├── Behavior
									|   |   ├── Entity
									|   |   └── Table
									|   ├── View
									|   └── Application.php
									├── templates
									|   ├── cell
									|   ├── element
									|   |   ├── flash
									|   |   ├── app-header.php
									|   |   ├── app-header1.php
									|   |   ├── app-sidebar.php
									|   |   ├── footer.php
									|   |   ├── model.php
									|   |   ├── scripts.php
									|   |   ├── sidebar-right.php
									|   |   ├── styles.php
									|   |   └── switcher.php
									|   ├── Error
									|   |   ├── danger_message.php
									|   |   ├── error400.php
									|   |   ├── error500.php
									|   |   ├── forgot.php
									|   |   ├── lockscreen.php
									|   |   ├── reset.php
									|   |   ├── signin.php
									|   |   ├── signup.php
									|   |   ├── success_message.php
									|   |   ├── underconstruction.php
									|   |   └── warning_message.php
									|   ├── layout
									|   |   ├── email
									|   |   ├── ajax.php
									|   |   ├── default.php
									|   |   ├── error.php
									|   |   ├── error1.php
									|   |   ├── error2.php
									|   |   └── master1.php
									|   ├── AdvancedUI
									|   |   └── 13 .php files
									|   ├── Apps
									|   |   └── 13 .php files
									|   ├── Charts
									|   |   └── 5 .php files
									|   ├── Ecommerce
									|   |   └── 12 .php files
									|   ├── Elements
									|   |   └── 22 .php files
									|   ├── email
									|   |   ├── html
									|   |   └── text
									|   ├── Forms
									|   |   └── 7 .php files
									|   ├── Icons
									|   |   └── 12 .php files
									|   ├── Pages
									|   |   └── 12 .php files
									|   ├── Tables
									|   |   └── 2 .php files
									|   └── Utilities
									|       └── 10 .php files
									├── tests
									├── tep
									├── vendor
									├── webroot
									|   ├── css
									|   ├── font
									|   ├── img
									|   ├── js
									|   ├── plugins
									|   ├── scss
									|   ├── switcher
									|   ├── web-fonts
									|   ├── .htaccess
									|   ├── favicon.ico
									|   └── index.php
									├── .editorconfig
									├── .gitattributes
									├── .gitignore
									├── .htaccess
									├── composer.json
									├── composer.lock
									├── gulpfile.js
									├── index.php
									├── package-lock.json
									├── package.json
									├── phpcs.xml
									├── phpstan.neon
									├── phpunit.xml.dist
									└── README.md
								
							
Switcher?

If you want to add switcher to your template follow the below process.

How to change any chart color according to your theme color?

By default, the chart color will change based on the theme color.

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.

How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?

Note: This process is only for replace your own chart in index.php page

Step1:

Go to root path: webroot/js/index.js in that js file you will find a function named as index " function index() " 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 " myVarVal" or "any default color " (Ex:- myVarVal || "#f73f3f") value to that particular color field based on your requirement.

Step2:

Navigate to root path: webroot/js/ and open themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

if(document.querySelector('#salessummary') !== null){ index(); }

Then change it's id name based on the id that you've used for your particular chart.

Ex: How do I modify the Id in the "themeColors.js" file?

    Before : " if(document.querySelector('#salessummary') !== null){ index(); }}"

    After : " if(document.querySelector('# your chart id') !== null){ index(); }"

How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?

Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)

If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.

Step 1:

If you want to add any chart to any other page then follow the below process.

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.

Note: If there is more than one chart then you need to create different functions for different charts respectively.

Ex-1: myFunction1() { chart js1 content }

Ex-2:myFunction2() { chart js2 content }
Step 2:

Navigate to root path: webroot/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

"if(document.querySelector('#salessummary') !== null){ index(); }"

Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)

Ex: " if(document.querySelector('# your chart id') !== null){ myFunction(); =>created function for the above id }"
Step 3:

If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process

Ex : Go to root path: webroot/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " or "any default color" value (Ex:- myVarVal || "#f73f3f")to that particular color field based on your requirement.

FAQS
General Style

How to Change Font Style ?

Step 1:

Go To _fonts.scss (webroot/scss/custom/fonts/_fonts.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _bootstrap-styles.scss(webroot/scss/bootstrap/_bootstrap-styles.scss)

Example:

		body {
			margin: 0;
			font-family: "Roboto", sans-serif;
			font-size: 14px;
			font-weight: 400;
			line-height: 1.5;
			color: $color;
			text-align: left;
			background-color: $background;
		}
			
		

Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to Change Logo ?

Go To "webroot/images/brand" 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.

Navigation Style

How to Enable Horizontal Click Menu?

Please follow the bellow steps to enable Horizontal Click Menu Style
Step 1 :

To enable Horizontal Click Menu Style you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for horizontalmenu as shown in below



		/* Horizontal Menu Start */
			// $('body').addClass('horizontalmenu');
			// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
			// 	checkHoriMenu();
			// }
		/*Horizontal Menu End */

	
Step 2 :
Remove the comments to enable horizontalmenu as shown below


	/* Horizontal Menu Start */
		$('body').addClass('horizontalmenu');
		if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
			checkHoriMenu();
		}
	/*Horizontal Menu End */

												

How to Enable Horizontal Hover Menu?

Please follow the bellow steps to enable Horizontal Hover Menu Style
Step 1 :

To enable Horizontal Hover Menu Style you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for horizontalmenu-hover as shown in below



	/* Horizontal Hover Menu Start */
		// $('body').addClass('horizontalmenu-hover');
		// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
		// 	checkHoriMenu();
		// }
	/* Horizontal Hover Menu End */

												
Step 2 :
Remove the comments to enable horizontalmenu-hover as shown below


	/* Horizontal Hover Menu Start */
		$('body').addClass('horizontalmenu-hover');
		if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
			checkHoriMenu();
		}
	/* Horizontal Hover Menu End */

												
How to Enable RTL Version

How to Enable RTL Version?

Please follow the bellow steps to enable RTL Version
Step 1 :

To enable RTL Version you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for rtl as shown in below



	/* RTL version Start */
		// $('body').addClass('rtl');
	/* RTL version End */

											
Step 2 :
Remove the comments to enable rtl as shown below


	/* RTL version Start */
		$('body').addClass('rtl');
	/* RTL version End */

											
Theme Styles

How to Enable Dark Theme?

Please follow the bellow steps to enable Dark Theme
Step 1 :

To enable Dark Theme you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for dark-theme as shown in below



	/* Dark Theme Start */
		// $('body').addClass('dark-theme');
		// $('body').removeClass('light-theme');
	/* Dark Theme End */

											
Step 2 :
Remove the comments to enable dark-theme as shown below


	/* Dark Theme Start */
		$('body').addClass('dark-theme');
		$('body').removeClass('light-theme');
	/* Dark Theme End */

											
Header Styles

How to Enable Color-header?

Please follow the bellow steps to enable Color-header
Step 1 :

To enable Color-header you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for color-header as shown in below



	/* Color Header Start */
		// $('body').addClass('color-header');
	/* Color Header End */

											
Step 2 :
Remove the comments to enable color-header as shown below


	/* Color Header Start */
		$('body').addClass('color-header');
	/* Color Header End */

											

How to Enable Dark-header?

Please follow the bellow steps to enable Dark-header
Step 1 :

To enable Dark-header you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for header-dark as shown in below



	/* Dark Header Start */
		// $('body').addClass('header-dark');
	/* Dark Header End */

											
Step 2 :
Remove the comments to enable header-dark as shown below


	/* Dark Header Start */
		$('body').addClass('header-dark');
	/* Dark Header End */

											

How to Enable Light-header?

Please follow the bellow steps to enable Light-header
Step 1 :

To enable Light-header you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for header-light as shown in below



	/* Light Header Start */
		// $('body').addClass('header-light');
	/* Light Header End */

											
Step 2 :
Remove the comments to enable header-light as shown below


	/* Light Header Start */
		$('body').addClass('header-light');
	/* Light Header End */
											
Menu Styles

How to Enable Light Menu?

Please follow the bellow steps to enable Light Menu
Step 1 :

To enable Light Menu you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for light-menu as shown in below


	/* Light Menu Start */
		// $('body').addClass('light-menu');
		// $('body').removeClass('dark-menu');
	/* Light Menu End */
											
Step 2 :
Remove the comments to enable light-menu as shown below

	/* Light Menu Start */
		$('body').addClass('light-menu');
		$('body').removeClass('dark-menu');
	/* Light Menu End */
											

How to Enable Color Menu?

Please follow the bellow steps to enable Color Menu
Step 1 :

To enable Color Menu you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for color-menu as shown in below


	/* Color Menu Start */
		// $('body').addClass('color-menu');
		// $('body').removeClass('dark-menu');
	/* Color Menu End */
											
Step 2 :
Remove the comments to enable color-menu as shown below

	/* Color Menu Start */
		$('body').addClass('color-menu');
		$('body').removeClass('dark-menu');
	/* Color Menu End */
											

How to Enable Dark Menu?

Please follow the bellow steps to enable Dark Menu
Step 1 :

To enable Dark Menu you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for dark-menu as shown in below


	/* Dark Menu Start */
		// $('body').addClass('dark-menu');
	/* Dark Menu End */
											
Step 2 :
Remove the comments to enable dark-menu as shown below

	/* Dark Menu Start */
		$('body').addClass('dark-menu');
	/* Dark Menu End */
											
Layout Width Styles

How to Enable Full-Width-Layout?

Please follow the bellow steps to enable Full-Width-Layout
Step 1 :

To enable Full-Width-Layout you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for layout-fullwidth as shown in below


	/* Full Width Layout Start */
		// $('body').addClass('layout-fullwidth');
	/* Full Width Layout End */
											
Step 2 :
Remove the comments to enable layout-fullwidth as shown below

	/* Full Width Layout Start */
		$('body').addClass('layout-fullwidth');
	/* Full Width Layout End */
											

How to Enable Boxed-Layout?

Please follow the bellow steps to enable Boxed-Layout
Step 1 :

To enable Boxed-Layout you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for layout-boxed as shown in below


	/* Boxed Layout Start */
		// $('body').addClass('layout-boxed');
	/* Boxed Layout End */
											
Step 2 :
Remove the comments to enable layout-boxed as shown below

	/* Boxed Layout Start */
		$('body').addClass('layout-boxed');
	/* Boxed Layout End */
											
Layout Positions

How to Enable Scrollable-Layout?

Please follow the bellow steps to enable Scrollable-Layout
Step 1 :

To enable Scrollable-Layout you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for scrollable-layout as shown in below


	/* Header-Scrollable Start */
		// $('body').addClass('scrollable-layout');
	/* Header-Scrollable End */
											
Step 2 :
Remove the comments to enable scrollable-layout as shown below

	/* Header-Scrollable Start */
		$('body').addClass('scrollable-layout');
	/* Header-Scrollable End */
											

How to Enable Fixed-Layout?

Please follow the bellow steps to enable Fixed-Layout
Step 1 :

To enable Fixed-Layout you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for fixed-layout as shown in below


	/* Header-Fixed Start */
		// $('body').addClass('fixed-layout');
	/* Header-Fixed End */
											
Step 2 :
Remove the comments to enable fixed-layout as shown below

	/* Header-Fixed Start */
		$('body').addClass('fixed-layout');
	/* Header-Fixed End */
											
Sidemenu layout Styles

How to Enable Sidemenu-Icon-with Text?

Please follow the bellow steps to enable Sidemenu-Icon-with Text
Step 1 :

To enable Sidemenu-Icon-with Text you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for icontext-menu as shown in below


	/* Icon Text Sidemenu Start */
		// $('body').addClass('icontext-menu');
		// $('body').addClass('main-sidebar-hide');
		// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
		// 		icontext();
		// }
	/* Icon Text Sidemenu End */
											
Step 2 :
Remove the comments to enable icontext-menu as shown below

	/* Icon Text Sidemenu Start */
		$('body').addClass('icontext-menu');
		$('body').addClass('main-sidebar-hide');
		if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
				icontext();
		}
	/* Icon Text Sidemenu End */
											

How to Enable Sidemenu-Icon Overlay?

Please follow the bellow steps to enable Sidemenu-Icon Overlay
Step 1 :

To enable Sidemenu-Icon Overlay you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for icon-overlay as shown in below


	/* Icon Overlay Sidemenu Start */
		// $('body').addClass('icon-overlay');
		// $('body').addClass('main-sidebar-hide');
	/* Icon Overlay Sidemenu End */
											
Step 2 :
Remove the comments to enable icon-overlay as shown below

	/* Icon Overlay Sidemenu Start */
		$('body').addClass('icon-overlay');
		$('body').addClass('main-sidebar-hide');
	/* Icon Overlay Sidemenu End */
											

How to Enable Closed Sidemenu?

Please follow the bellow steps to enable Closed Sidemenu
Step 1 :

To enable Closed Sidemenu you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for closed-leftmenu as shown in below


	/* Closed Sidemenu Start */
		// $('body').addClass('closed-menu');
		// $('body').addClass('main-sidebar-hide');
	/* Closed Sidemenu End */
											
Step 2 :
Remove the comments to enable closed-leftmenu as shown below

	/* Closed Sidemenu Start */
		$('body').addClass('closed-menu');
		$('body').addClass('main-sidebar-hide');
	/* Closed Sidemenu End */
											

How to Enable Hover Sidemenu?

Please follow the bellow steps to enable Hover Sidemenu
Step 1 :

To enable Hover Sidemenu you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for hover-submenu as shown in below


	/* Hover Submenu Start */
		// $('body').addClass('hover-submenu');
		// $('body').addClass('main-sidebar-hide');
		// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
		// 	hovermenu();
		// }
	/* Hover Submenu End */
											
Step 2 :
Remove the comments to enable hover-submenu as shown below

	/* Hover Submenu Start */
		$('body').addClass('hover-submenu');
		$('body').addClass('main-sidebar-hide');
		if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
			hovermenu();
		}
	/* Hover Submenu End */
											

How to Enable Hover Sidemenu Style 1?

Please follow the bellow steps to enable Hover Sidemenu Style 1
Step 1 :

To enable Hover Sidemenu Style 1 you have to open switcher-styles.js (webroot/js/switcher-styles.js) file and remove comments for hover-submenu1 as shown in below


	/* Hover Submenu Style 1 Start */
		// $('body').addClass('hover-submenu1');
		// $('body').addClass('main-sidebar-hide');
		// if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
		// 	hovermenu();
		// }
	/* Hover Submenu Style 1 End */
											
Step 2 :
Remove the comments to enable hover-submenu1 as shown below

	/* Hover Submenu Style 1 Start */
		$('body').addClass('hover-submenu1');
		$('body').addClass('main-sidebar-hide');
		if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
			hovermenu();
		}
	/* Hover Submenu Style 1 End */
											
Primary Color

How to Change Primary Color?

Please follow the bellow steps to change Primary Color
Step 1 :

To change Primary Color you have to open _bootstrap-custom.scss file and replace what color you want as shown in below

Rootpath : _bootstrap-custom.scss (webroot/scss/bootstrap/_bootstrap-custom.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Light Theme Style

How to Change Light Background Color?

Please follow the bellow steps to change Light Background Color
Step 1 :

To change Light Background Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (webroot/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Text Color?

Please follow the bellow steps to change Light Text Color
Step 1 :

To change Light Text Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (webroot/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Border Color?

Please follow the bellow steps to change Light Border Color
Step 1 :

To change Light Border Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (webroot/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Dark Theme Style

How to Change Dark body Color?

Please follow the bellow steps to change Dark body Color
Step 1 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (webroot/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark Theme Color?

Please follow the bellow steps to change Dark Theme Color
Step 1 :

To change Dark Theme Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (webroot/scss/_variables.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Local Storage

How to clear LocalStorage (cookie)?

Step1:

Open themeColors.js file webroot/assets/js/themeColors.js

To clear LocalStorage loading functions you need to remove localStorageBackup() {} and localStorageBackup() calling function in themeColors.js as shown below


		
		function localStorageBackup() {

		}
			
		
		
Step2:

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

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


		localStorage.setItem("dashplexdarktheme", true);
		localStorage.removeItem("dashplexlighttheme");
		localStorage.getItem("dashplexscrollable")
		
Font-use

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com

thank you!