Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Menu style..etc.
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!
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! 😊
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.
| 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 |
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)
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" .
"bin/cake server"
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 .
├── .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
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.
| 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.
|
If you have installed XAMPP on your machine then please follow the below steps
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.
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
Upload the Project that you have purchased, based on your uploading process on server
├── .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
If you want to add switcher to your template follow the below process.
Go to root path: templates/layout/default.php open default.php in that file, below the body tag, include the switcher path given below.
Switcher path:
<?= $this->element('switcher'); ?>
EX:
<body class="main-body leftmenu ltr light-theme dark-menu">
<?= $this->element('switcher'); ?>
Go to root path: templates/element/styles.php open "styles.php" file and add switcher css links given below.
Add switcher css:
<!-- Internal Switcher css -->
<link href="switcher/css/switcher.css" rel="stylesheet"/>
<link href="switcher/demo.css" rel="stylesheet"/>
Go to root path: templates/element/scripts.php open "scripts.php" file and then add theswitcher.js link as shown below.
Add switcher js:
<!-- Switcher js -->
<script src="switcher/js/switcher.js"></script>
Go to root path: templates/layout/default.php open default.php file and then chenge app-header.php to app-header1.php given below.
Before:
<!-- app header code -->
<?= $this->element('app-header'); ?>
<!-- End app header Code -->
After:
<!-- app header1 Code -->
<?= $this->element('app-header1'); ?>
<!-- End app header1 Code -->
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.
Note: This process is only for replace your own chart in index.php page
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.
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?
" if(document.querySelector('#salessummary') !== null){
index();
}}"
" if(document.querySelector('# your chart id') !== null){
index();
}"
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.
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
}
myFunction2() {
chart js2 content
}
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
}"
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.
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

And paste Your Selected font-family in _fonts.scss

And add the Your Selected font-family in _bootstrap-styles.scss(webroot/scss/bootstrap/_bootstrap-styles.scss)
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.
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.
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 */
horizontalmenu as shown below
/* Horizontal Menu Start */
$('body').addClass('horizontalmenu');
if(document.querySelector('.page').classList.contains('main-signin-wrapper') !== true){
checkHoriMenu();
}
/*Horizontal Menu End */
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 */
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 */
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 */
rtl as shown below
/* RTL version Start */
$('body').addClass('rtl');
/* RTL version End */
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 */
dark-theme as shown below
/* Dark Theme Start */
$('body').addClass('dark-theme');
$('body').removeClass('light-theme');
/* Dark Theme End */
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 */
color-header as shown below
/* Color Header Start */
$('body').addClass('color-header');
/* Color Header End */
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 */
header-dark as shown below
/* Dark Header Start */
$('body').addClass('header-dark');
/* Dark Header End */
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 */
header-light as shown below
/* Light Header Start */
$('body').addClass('header-light');
/* Light Header End */
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 */
light-menu as shown below
/* Light Menu Start */
$('body').addClass('light-menu');
$('body').removeClass('dark-menu');
/* Light Menu End */
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 */
color-menu as shown below
/* Color Menu Start */
$('body').addClass('color-menu');
$('body').removeClass('dark-menu');
/* Color Menu End */
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 */
dark-menu as shown below
/* Dark Menu Start */
$('body').addClass('dark-menu');
/* Dark Menu End */
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 */
layout-fullwidth as shown below
/* Full Width Layout Start */
$('body').addClass('layout-fullwidth');
/* Full Width Layout End */
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 */
layout-boxed as shown below
/* Boxed Layout Start */
$('body').addClass('layout-boxed');
/* Boxed Layout End */
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 */
scrollable-layout as shown below
/* Header-Scrollable Start */
$('body').addClass('scrollable-layout');
/* Header-Scrollable End */
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 */
fixed-layout as shown below
/* Header-Fixed Start */
$('body').addClass('fixed-layout');
/* Header-Fixed End */
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 */
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 */
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 */
icon-overlay as shown below
/* Icon Overlay Sidemenu Start */
$('body').addClass('icon-overlay');
$('body').addClass('main-sidebar-hide');
/* Icon Overlay Sidemenu End */
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 */
closed-leftmenu as shown below
/* Closed Sidemenu Start */
$('body').addClass('closed-menu');
$('body').addClass('main-sidebar-hide');
/* Closed Sidemenu End */
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 */
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 */
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 */
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 */
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.
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.
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.
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.
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.
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.
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() {
}
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")
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com