Azea - PHP Admin & Dashboard Template

Introduction

Welcome to Azea - PHP Admin & Dashboard Template

Azea is a responsive HTML based PHP 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 it will be easy for you to understand.

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

Dashboard

  • Created Date: 18/11/2021
  • Author: SPRUKO™
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

Thank you for purchasing our admin template. Feel free to contact us any time. We have The Best dedicated team to provide you the best support. If you have any queries please reach us through live chat or email:- sprukotechnologies@gmail.com

Template Description

Azea - PHP Admin & Dashboard Template. It includes 140+ .php Pages, 60+ Plugins, UI elements and different Styles of Widgets etc. This template is “User Friendly” and it is designed in such a way that you can easily understand the code and can modify the template. The template contains advanced Form-Elements like Date pickers, Select2, Multi Select etc. This template is 100% Premium Admin Templates. This template is designed using Bootstrap 5 framework, HTML5, CSS3, Jquery.

It has clean, flat user interface design, easily customizable components and widgets. The Template comes with an unique design also we ensure you that you can easily design your admin template.

It’s fully responsive layout for all types of devices. It work’s on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart devices.

Once you Purchase the Azea - PHP Admin & Dashboard Template you’ll be getting all the .php, CSS3, SCSS & JS files and you are enabled to get free downloads of all the future updates.

Main Features

  • 140+ php Pages
  • Bootstrap 5 Responsive Framework
  • Well Commented Code
  • 24 * 7 Professional Company Support
  • Regular Updates
  • 60+ Plugins
  • 7 types of Charts
  • Select2
  • Mail Inbox
  • 12 Types of Icons
  • File upload
  • Message Chat
  • Form Elements
  • Form Editor
  • Form Wizard
  • Sweet Alerts
  • Data Tables
  • Lockscreen Page
  • Error Page
  • Under Construction Page
  • User Profile
  • Easy to customize
  • More Widgets
  • Invoice Page
  • Pricing Tables
  • Very Easy to Create your Own Site
  • Neat, clean and simple design
  • W3C Validated
Check out the folder structure of the Layout versions
										

											|   ├── assets
											|   ├── horizontal
											|   |   └── layouts	
											|   |   |   ├──  app-header.php
											|   |   |   ├──  horizontal-main.php
											|   |   |   ├──  scripts.php
											|   |   |   ├──  styles.php
											|   |   |   ├──  footer.php
											|   |   |   ├──  custom-scripts.php
											|   |   |   ├──  custom-styles.php
											|   |   |   └──  switcher.php
											|   |   └── (140+ .php pages)
											|   ├── vertical
											|   |   └── layouts	
											|   |   |   ├──  app-sidebar.php
											|   |   |   ├──  main-header.php
											|   |   |   ├──  scripts.php
											|   |   |   ├──  styles.php
											|   |   |   ├──  footer.php
											|   |   |   ├──  custom-scripts.php
											|   |   |   ├──  custom-styles.php
											|   |   |   └──  switcher.php
											|   |   └── (140+ .php pages)

How to Run PHP Project in localhost

Step:1 Quick view of Installations

Download and Install the XAMPP from official site https://www.apachefriends.org/download.html

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

Step:2 Run project

1. Open Xampp and click on the start button on the Apache server and MySQL server

2. Extract zip file of the project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

3. In your received project folder you will have vertical, horizontal and assets folders EX: (myproject/assets, vertical & horizontal), Now you can use the version which you wanted

Ex 1: If you want to use vertical version then open browser and type http://localhoast/myproject/vertical hit enter

Ex 2: If you want to use horizontal version then open browser and type http://localhoast/myproject/horizontal hit enter


Note : By default vertical-light and horizontal-light versions are given

1) If you want to activate vertical-dark please navigate to the root path assets/js/custom.js file and then uncomment the dark-mode .

2) If you want to activate horizontal-dark please navigate to the root path assets/js/custom.js file and then uncomment the dark-mode .

How to Install node_modules

Now you need to install Node Modules in your project folder

1. And now set your project root path in terminal or command prompt Example: cd C:\xampp\htdocs\myproject\ and type the below command line.

npm install

2. Wait until all the dependencies are downloaded to your project folder.

3. Now you can see the downloaded folder with the name of node_modules in your project folder.

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 completion of download, you can compile your SCSS files into css files by using below 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.
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 assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
gulp dark In this template gulp dark command is for what ever changes that are made in dark.scss will be watched and the changes automatically updated in dark.css file in css folder.
gulp skins In this template gulp skins command is for what ever changes are made in skin-modes.scss will be watched and the changes automatically updated in skin-modes.css file in css folder.
gulp color1 In this template gulp color1 command is for what ever changes are made in color1.scss will be watched and the changes automatically updated in color1.css file in css folder.

Installation Instructions For both CPANEL’S and FTP

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

FTP Uploading Process
    Access FTP:
  1. Go to your FTP login page using your login credentials provided by your hosting provider.
    2. Upload Project Files:
  2. Now extract the project folder that you have received in any of your directories
  3. Now navigate to that directory using FTP panel and upload your project.
  4. Once the uploading completes you can access your domain Example: www.example.com
cPanel Uploading Process
    Access cPanel:
  1. Go to your cPanel login page using your login credentials provided by your hosting provider.
    2. Upload Project Files:
  2. Once you successfully accessed your cPanel dashboard, navigate and click on File Manager
  3. Now open public_html and click on Upload
  4. 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
  5. In the public_html folder, you will find your zipped project folder now you need to extract that project folder
  6. Once the extraction is completed you can access your domain Example: www.example.com

Compiling Assets

1. In the assets folder you will see colors, css, iconfonts images, js, plugins and switcher folders

Folder Structure

																 
															|   ├── assets
															|   |	├── colors  
															|   |	├── css  
															|   |	├── iconfonts 
															|   |	├── images
															|   |	├── js
															|   |	├── plugins
															|   |	└── switcher
															|   ├── horizontal
															|   |   ├── layouts
															|   |   └── (140+ .php pages)
															|   ├── vertical
															|   |   ├── layouts
															|   |   └── (140+ .php pages)

2. Now you can compile or customize your styles in scss files that are present in the assets folder.

3. Once the changes made in the files in order to apply those changes to your template you need to run the gulp commands in the same terminal or command prompt that you have set your project root path.

4. After Compilation, all your .scss files are converted into .css.

Version

  • php :- 8.0.9
  • Gulp:- 4.0.2
  • node:- 14.15.0
  • npm :- 6.14.8

Over All Folder Structure

													
														|   └── assets     									    											
														|   |	├── colors  
														|   |	├── css  
														|   |	├── iconfonts 
														|   |	├── images
														|   |	├── js
														|   |	├── plugins
														|   |	└── switcher
														|   ├── horizontal
														|   |   └── layouts	
														|   |   |   ├──  app-header.php
														|   |   |   ├──  horizontal-main.php
														|   |   |   ├──  scripts.php
														|   |   |   ├──  styles.php
														|   |   |   ├──  footer.php
														|   |   |   ├──  custom-scripts.php
														|   |   |   ├──  custom-styles.php
														|   |   |   └──  switcher.php
														|   |   └── (140+ .php pages)
														|   ├── vertical
														|   |   └── layouts	
														|   |   |   ├──  app-sidebar.php
														|   |   |   ├──  main-header.php
														|   |   |   ├──  scripts.php
														|   |   |   ├──  styles.php
														|   |   |   ├──  footer.php
														|   |   |   ├──  custom-scripts.php
														|   |   |   ├──  custom-styles.php
														|   |   |   └──  switcher.php
														|   |   └── (140+ .php pages)
														|   ├── gulpfile.js
														|   ├── package-lock.json
														|   └── package.json
FAQS

How to Change Font Style ?

Step 1:

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

if you want to change another font-family Go to the site Google Fonts And Slect 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 your Selected font-family in _bootstrap-styles.scss(assets/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: $default-color;
								text-align: left;
								background-color: $background;
							}

How to Change Logo ?

Go To "assets/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.

How to Enable Darktheme?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find dark-mode and remove comments for dark-mode to enable dark-mode style as shown in below


							/*Dark Layout Start*/
							// $('body').addClass('dark-mode');
							/*Dark Layout End*/
Remove the comments to enable dark-mode as shown below 

							/*Dark Layout Start*/
								 $('body').addClass('dark-mode');
							/*Dark Layout End*/

How to Enable Color-header?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find color-header remove comments for color-header to enable color-header style as shown in below


							/*Color Header Start*/
							// $('body').addClass('color-header');
							/*Color Header End*/
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?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find dark-header and remove comments for dark-header to enable dark-header style as shown in below


							/*Dark Header Start*/
							// $('body').addClass('dark-header');
							/*Dark Header End*/
Remove the comments to enable dark-header as shown below 

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

How to Enable Light-header?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find light-header and remove comments for light-header to enable light-header style as shown in below


							/*Light Header Start*/
							// $('body').addClass('light-header');
							/*Light Header End*/
Remove the comments to enable light-header as shown below 

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

How to Enable Gradient-header?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find gradient-header and remove comments for gradient-header to enable gradient-header style as shown in below


							/*Gradient Header Start*/
							// $('body').addClass('gradient-header');
							/*Gradient Header End*/
Remove the comments to enable gradient-header as shown below 

							/*Gradient Header Start*/
								 $('body').addClass('gradient-header');
							/*Gradient Header End*/

How to Enable Horizontalmenu light?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find light-hormenu and remove comments for light-hormenu to enable light-hormenu style as shown in below


							/*Light Hormenu Start*/
							// $('body').addClass('light-hormenu');
							/*Light Hormenu End*/
Remove the comments to enable light-hormenu as shown below 

							/*Light Hormenu Start*/
								 $('body').addClass('light-hormenu');
							/*Light Hormenu End*/

How to Enable Horizontalmenu Color?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find color-hormenu and remove comments for color-hormenu to enable color-hormenu style as shown in below


							/*Color Hormenu Start*/
							// $('body').addClass('color-hormenu');
							/*Color Hormenu End*/
Remove the comments to enable color-hormenu as shown below 

							/*Color Hormenu Start*/
								$('body').addClass('color-hormenu');
							/*Color Hormenu End*/

How to Enable Horizontalmenu Dark?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find dark-hormenu and remove comments for dark-hormenu to enable dark-hormenu style as shown in below


							/*Dark Hormenu Start*/
							// $('body').addClass('dark-hormenu');
							/*Dark Hormenu End*/
Remove the comments to enable dark-hormenu as shown below 

							/*Dark Hormenu Start*/
								 $('body').addClass('dark-hormenu');
							/*Dark Hormenu End*/

How to Enable Horizontalmenu Gradient?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find gradient-hormenu and remove comments for gradient-hormenu to enable gradient-hormenu style as shown in below


							/*Gradient Hormenu Start*/
							// $('body').addClass('gradient-hormenu');
							/*Gradient Hormenu End*/
Remove the comments to enable gradient-hormenu as shown below 

							/*Gradient Hormenu Start*/
								$('body').addClass('gradient-hormenu');
							/*Gradient Hormenu End*/

How to Enable Verticalmenu light?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find light-menu and remove comments for light-menu to enable light-menu style as shown in below


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

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

How to Enable Verticalmenu Color?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find color-menu and remove comments for color-menu to enable color-menu style as shown in below


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

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

How to Enable Verticalmenu Dark?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find dark-menu and remove comments for dark-menu to enable dark-menu style as shown in below


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

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

How to Enable Verticalmenu Gradient?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find gradient-menu and remove comments for gradient-menu to enable gradient-menu style as shown in below


							/*Gradient Menu Start*/
							// $('body').addClass('gradient-menu');
							/*Gradient Menu End*/
Remove the comments to enable gradient-menu as shown below 

							/*Gradient Menu Start*/
								 $('body').addClass('gradient-menu');
							/*Gradient Menu End*/

How to Enable Boxed-Layout?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find layout-boxed and remove comments for layout-boxed to enable layout-boxed style as shown in below


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

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

How to Enable Scrollable-Layout?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find scrollable-layout and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


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

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

How to Enable Sidemenu-Icon-with Text?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find sidemenu-icontext and remove comments for sidemenu-icontext to enable sidemenu-icontext style as shown in below


								/*Icon Text Sidemenu Start*/
								// $('body').addClass('icontext-menu');
								// icontext();
								// $('body').addClass('sidenav-toggled');
								/*Icon Text Sidemenu End*/
Remove the comments to enable sidemenu-icontext as shown below 

								/*Icon Text Sidemenu Start*/
									$('body').addClass('icontext-menu');
									icontext();
									$('body').addClass('sidenav-toggled');
								/*Icon Text Sidemenu End*/

How to Enable Closed-Menu?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find closed-menu file and remove comments for Closed-menu to enable closed menu style as shown in below


								/*Closed Sidemenu Start*/
								// $('body').addClass('closed-menu');
								// $('body').addClass('sidenav-toggled');
								/*Closed Sidemenu End*/
Remove the comments to enable Closed Sidemenu as shown below 

								/*Closed Sidemenu Start*/
									$('body').addClass('closed-menu');
									$('body').addClass('sidenav-toggled');
								/*Closed Sidemenu End*/

How to Enable Icon Overlay

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find sideicon-menu and remove comments for sideicon-menu to enable Icon Overlay style as shown in below


								/*Icon Overlay Sidemenu Start*/
								// $('body').addClass('sideicon-menu');
								// $('body').addClass('sidenav-toggled');
								/*Icon Overlay Sidemenu End*/
Remove the comments to enable sideicon-menu as shown below 

								/*Icon Overlay Sidemenu Start*/
									$('body').addClass('sideicon-menu');
									$('body').addClass('sidenav-toggled');
								/*Icon Overlay Sidemenu End*/

How to Enable RTL version?

open custom.js file prestnt in assets/js/custom.js go to the bottom of the file there you will find $('body').addClass('rtl') and remove comments for $('body').addClass('rtl') to enable RTL version as shown in below


									/*RTL Layout Style*/
									// $('body').addClass('rtl');
									/*RTL Layout Style End*/
Remove the comments to enable $('body').addClass('rtl') as shown below 

									/*RTL Layout Style*/
										 $('body').addClass('rtl');
									/*RTL Layout Style End*/

Font Used

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

All Images are used: Pexels.com

THANK YOU!