Sash – PHP Bootstrap 5 Admin & Dashboard Template

Sash - PHP Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to Sash - PHP Bootstrap 5 Admin & Dashboard Template

Sash - 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 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: 26/5/2022
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

Sash– is a PHP Bootstrap 5 Admin & Dashboard Template using modern and minimal design. It is fully flexible user-friendly and responsive. Sash admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 110+ php Pages & 60+ 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 by using HTML5,CSS3,Jquery. After Purchased this template you will get All PHP Pages,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 Sash-PHP Admin & Dashboard Template, you will be able to get free download of all future updates.

Main Features

Vertical Menu
Horizontal Click Menu
Horizontal Hover Menu
RTL Ready
110+ php Pages
Bootstrap 5 Responsive Framework
Well Commented Code
24 * 7 Professional Company Support
Regular Updates
60+ Plugins
9 Types of Charts
About US
Blog
Flie Manager
Gallery
Ecommerce Pages
Settings Page
Invoice Page
Blog Details
Calendar
Select2
Mail Inbox
11 Types of Icons
File upload
Message Chat
Month & Date & Year Range Pickers
Form Elements
Form Editor
Form Wizard
Sweet Alerts
Data Tables
Lockscreen Page
Error Pages
Under Construction Page
User Profile
Advanced Pricing Tables
Easy to customize
Google Fonts
More Widgets
Very Easy to Create your Own Site
Neat, clean and simple design
W3C Validated

Check out the folder structure of the Layout

                 
						├── assets
						|   ├──  colors
						|   ├──  css
						|   ├──  iconfonts
						|   ├──  images
						|   ├──  js
						|   ├──  plugins
						|   ├──  scss
						|   └──  switcher
						├── layouts
						|   ├── landing
						|   |   ├──  footer.php
						|   |   ├──  header.php
						|   |   ├──  scripts.php
						|   |   ├──  sidebar.php
						|   |   ├──  sidebar1.php
						|   |   ├──  styles.php	
						|   |   └──  switcher.php	
						|   ├──  app-header.php
						|   ├──  app-header1.php
						|   ├──  app-sidebar.php
						|   ├──  custom-scripts.php
						|   ├──  custom-styles.php 
						|   ├──  custom-switcher.php
						|   ├──  footer.php
						|   ├──  main-scripts.php
						|   ├──  modal.php
						|   ├──  scripts.php
						|   ├──  sidebar-right.php
						|   ├──  styles.php
						|   └──  switcher.php
						└── pages
							└── (110+ .php pages)

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. Launch Xampp and launch the Apache and MySQL servers by clicking the start buttons.

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

3. Once the extraction is completed, type the localhost url in the browser to access the project. Example: C:\xampp\htdocs\myproject.

Note : Do not forget to start Apache server and MySQL server

1. Basicaly, Gulp is used to compile assets or styles of the project. In order to compile, please follow the below process.

2. First you need to install Node Modules in your project folder

3. 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

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

5. 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 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.

Compiling Styles

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

          
						├── assets
						|   ├── colors
						|   ├── css  
						|   ├── iconfonts 
						|   ├── images
						|   ├── js
						|   ├── plugins
						|   ├── scss
						|   └── switcher

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.

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

FTP Uploading Process

Access FTP:

Upload Project Files:

Once you successfully accessed your FTP server navigate to the Path: public_html/ in your FTP server.
Now upload and extract the project folder that you have received, in the Path: public_html/
Once the extraction is completed, you can access your project by visiting your domain, Example: www.example.com

cPanel Uploading Process

Access cPanel:

Upload Project Files:

Once you successfully accessed your cPanel dashboard, navigate and click on File Manager
Now open public_html and click on Upload
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
In the public_html folder, you will find your zipped project folder now you need to extract that project folder
Once the extraction is completed, you can access your project by visiting your domain Example: www.example.com

Version

php :- 8.1
Gulp:- 4.0.2
node:- 14.15.0
npm :- 6.14.8

        
						├── assets   
						|   ├── colors  									    											
						|   ├── css  
						|   ├── iconfonts 
						|   ├── images
						|   ├── js
						|   ├── plugins
						|   ├── scss
						|   └── switcher
						├── layouts  
						|   ├── landing
						|   |   ├──  footer.php
						|   |   ├──  header.php
						|   |   ├──  scripts.php
						|   |   ├──  sidebar.php
						|   |   ├──  sidebar1.php
						|   |   ├──  styles.php	
						|   |   └──  switcher.php	  
						|   ├──  app-header.php
						|   ├──  app-header1.php
						|   ├──  app-sidebar.php
						|   ├──  custom-scripts.php
						|   ├──  custom-styles.php 
						|   ├──  custom-switcher.php 
						|   ├──  footer.php
						|   ├──  main-scripts.php
						|   ├──  modal.php
						|   ├──  scripts.php
						|   ├──  sidebar-right.php
						|   ├──  styles.php
						|   └──  switcher.php
						├── pages
						|   └── (110+ .php pages)
						├── gulpfile.js
						├── package.json
						└── package-lock.json

SWITCHER?

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

How to add Switcher to the Template?

Go to root path: layouts/styles.php open "styles.php" file and add switcher css links given below.

     
			Add switcher css:

			<!-- INTERNAL SWITCHER CSS -->
			<link href="../assets/switcher/css/switcher.css" rel="stylesheet" />
			<link href="../assets/switcher/demo.css" rel="stylesheet" />

Go to root path: layouts/main-scripts open "main-scripts.php" file and add switcher.js links given below.

     
			Add switcher js:

			<!-- INTERNAL SWITCHER JS -->
			<script src="../assets/switcher/js/switcher.js"></script>

Go to root path: layouts/main-scripts.php open "main-scripts.php" file and then change custom.js link to custom1.js link given below.

     
			change custom js link

			Before :

			<!-- CUSTOM JS -->
			<script src="../assets/js/custom.js"></script>
			
			After :
			
			<!-- CUSTOM1 JS -->
			<script src="../assets/js/custom1.js"></script>

NOTE: Custom1.js file is only used when you want to use switcher for your template.

Go to root path: pages open "All php pages" file and then Replace app-header.php to app-header1.php given below.

Go to root path: pages open All php pages in that file, below the body tag switcher path given below.

     
			Switcher path:

How to add Switcher for Landing Page?

Go to root path: layouts/landing/styes open "styles.php" file and add switcher css links given below.

     
				Add switcher css:
		
				<!-- INTERNAL SWITCHER CSS -->
				<link href="../assets/switcher/css/switcher.css" rel="stylesheet" />
				<link href="../assets/switcher/demo.css" rel="stylesheet" />

Go to root path: pages open "Landing php page" file and then Replace sidebar.php to sidebar1.php given below.

Go to root path: pages open Landing php page in that file, below the body tag switcher path given below.

     
				Switcher path:

NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).

How to add Switcher for Custom Pages?

Go to root path: layouts/custom-styles open "custom-styles.php" file and add switcher css links given below.

     
			Add switcher css:
					
			<!-- INTERNAL SWITCHER CSS -->
			<link href="../assets/switcher/css/switcher.css" rel="stylesheet" />
			<link href="../assets/switcher/demo.css" rel="stylesheet" />

Go to root path: layouts/custom-scripts open "custom-scripts.php" file then add switcher.js link given below.

     
			Add switcher js:

			<!-- SWITCHER JS -->
			<script src="../assets/switcher/js/switcher.js"></script>

Go to root path: layouts/custom-scripts open "custom-scripts.php" file and then change custom.js link to custom1.js link given below.

     

			change custom js link

			Before :

			<!-- CUSTOM JS -->
			<script src="../assets/js/custom.js"></script>
			
		
			
			After :
		
			<!-- CUSTOM1 JS -->
			<script src="../assets/js/custom1.js"></script>

Go to root path: pages open "Custom php pages" in the body section add the "custom switcher icon code" given below.

     
			Add custom switcher icon code:

Go to root path pages open Custom php pages in the body section add the custom switcher path given below.

Chart Color

NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).

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: assets/js/index1.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 || "#38cab3") value to that particular color field based on your requirement.

Step2:

Navigate to root path: assets/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('#transactions') !== 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('#transactions') !== 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: assets/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

 "if(document.querySelector('#transactions') !== 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: assets/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 || "#38cab3")to that particular color field based on your requirement.

FAQ'S

1) 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 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(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;
	}

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

2) How to Change Sidemenu and Header Icon?

NOTE :Sidemenu & Header Icons used in Sash are fromhttps://iconscout.com/unicons (Thin Line Icons).

Changing Sidemenu Icon :

You can change sidemenu icon by replacing svg code of selected icon with svg code of required icon and add class="side-menu__icon" for that svg icon

Changing Header Icon :

You can change Header icon by simply replacing svg code of selected icon with svg code of required icon.

3) How to Change Primary Color for All Themes (Light, Dark, Transparent)?

Please follow the below steps to change Primary Color

Step 1 :

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

Rootpath : _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )

Step 2 :

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

4) 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.

5) How to Enable RTL Version?

Please follow the below steps to enable RTL Version

Step 1 :

To enable RTL Version you have to open custom.js (assets/js/custom.js) file and remove comments for rtl as shown in below



		/******* RTL VERSION *******/

		// $('body').addClass('rtl');

Step 2 :

Remove the comments to enable rtl as shown below



		/******* RTL VERSION *******/

		$('body').addClass('rtl');

6) How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

Step 1 :

To enable Dark Theme you have to open custom.js (assets/js/custom.js) file and remove comments for dark-mode as shown in below


	//---- Dark mode ----- //
	// $('body').addClass('dark-mode');
	// $('body').removeClass('light-mode');
	// $('body').removeClass('transparent-mode');

Step 2 :

Remove the comments to enable dark-mode as shown below



	//---- Dark mode ----- //
	$('body').addClass('dark-mode');
	$('body').removeClass('light-mode');
	$('body').removeClass('transparent-mode');

7) How to Change Dark Theme Color?

Please follow the below 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 (assets/scss/_variables.scss )

Step 2 :

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

8) How to Change Dark Body Color?

Please follow the below 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 (assets/scss/_variables.scss )

Step 2 :

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

9) How to Enable Background Image Style?

open custom.js path:(assets/js/custom.js) file go to Background Image Styles and remove comments for bg-img1, transparent-mode, light-mode & dark-mode to enablebackground style as shown in below



	// Bg-Image1 Style
	// $('body').addClass('bg-img1');
	// $('body').addClass('transparent-mode');
	// $('body').removeClass('light-mode');
	// $('body').removeClass('dark-mode');

Remove the comments to enable bg-img1, transparent-mode, light-mode & dark-mode as shown below



		// Bg-Image1 Style
		$('body').addClass('bg-img1');
		$('body').addClass('transparent-mode');
		$('body').removeClass('light-mode');
		$('body').removeClass('dark-mode');

NOTE: Similarly you can apply bg-img2,bg-img3,bg-img4

NOTE: We can't use menu styles and header styles in Background Image

Go To "assets/img/media" folder and replace your image with Previous image(bg-img1) within image size. note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.

10) How to Enable Color-Header?

Please follow the below steps to enable Color-header

Step 1 :

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



	/******* Header Styles ********/

	//$('body').addClass('color-header')

Step 2 :

Remove the comments to enable color-header as shown below



	/******* Header Styles ********/

	$('body').addClass('color-header')

11) How to Enable Dark-Header?

Please follow the below steps to enable Dark-header

Step 1 :

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



	/******* Header Styles ********/

	//$('body').addClass('dark-header');

Step 2 :

Remove the comments to enable dark-header as shown below



	/******* Header Styles ********/

	$('body').addClass('dark-header');

12) How to Enable Light-Header?

Please follow the below steps to enable Light-header

Step 1 :

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



	/******* Header Styles ********/

	//$('body').addClass('light-header');

Step 2 :

Remove the comments to enable light-header as shown below



	/******* Header Styles ********/

	$('body').addClass('light-header');

13) How to Enable Gradient-Header?

Please follow the below steps to enable Gradient-header

Step 1 :

To enable Gradient-header you have to open custom.js (assets/js/custom.js) file and remove comments for gradient-header as shown in below



	/******* Header Styles ********/

	//$('body').addClass('gradient-header');

Step 2 :

Remove the comments to enable gradient-header as shown below



	/******* Header Styles ********/

	$('body').addClass('gradient-header');

14) How to Enable Light Menu?

Please follow the below steps to enable Light Menu

Step 1 :

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


	/*Left-menu Styles*/
	//$('body').addClass('light-menu');

Step 2 :

Remove the comments to enable light-menu as shown below


	/*Left-menu Styles*/

	$('body').addClass('light-menu');

15) How to Enable Color Menu?

Please follow the below steps to enable Color Menu

Step 1 :

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


	/*Left-menu Styles*/
	//$('body').addClass('color-menu');

Step 2 :

Remove the comments to enable color-menu as shown below


	/*Left-menu Styles*/
	$('body').addClass('color-menu');

16) How to Enable Dark Menu?

Please follow the below steps to enable Dark Menu

Step 1 :

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


	/*Leftmenu Styles*/
	//$('body').addClass('dark-menu');

Step 2 :

Remove the comments to enable dark-menu as shown below


	/*Leftmenu Styles*/
	$('body').addClass('dark-menu');

17) How to Enable Gradient Menu?

Please follow the below steps to enable Gradient Menu

Step 1 :

To enable Gradient Menu you have to open custom.js (assets/js/custom.js) file and remove comments for gradient-menu as shown in below


	/*Leftmenu Styles*/
	//$('body').addClass('gradient-menu');

Step 2 :

Remove the comments to enable gradient-menu as shown below


	/*Leftmenu Styles*/
	$('body').addClass('gradient-menu');

18) How to Enable Boxed-Layout?

Please follow the below steps to enable Boxed-Layout

Step 1 :

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


	/*Layout-width Styles*/
	// $('body').addClass('layout-boxed');

Step 2 :

Remove the comments to enable layout-boxed as shown below


	/*Layout-width Styles*/
	$('body').addClass('layout-boxed');

19) How to Enable Scrollable-Layout?

Please follow the below steps to enable Scrollable-Layout

Step 1 :

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


	/*Header-Position Styles*/
	// $('body').addClass('scrollable-layout');

Step 2 :

Remove the comments to enable scrollable-layout as shown below


	/*Header-Position Styles*/
	$('body').addClass('scrollable-layout');

20) How to Enable Sidemenu-Icon-with Text?

Please follow the below steps to enable Sidemenu-Icon-with Text

Step 1 :

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



		// ***** Icon with Text *****//
		// $('body').addClass('icontext-menu');
		// $('body').addClass('sidenav-toggled');
		// if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
		// icontext();
		// }

Step 2 :

Remove the comments to enable icontext-menu as shown below



		// ***** Icon with Text *****//
		$('body').addClass('icontext-menu');
		$('body').addClass('sidenav-toggled');
		if(document.querySelector('.icontext-menu').firstElementChild.classList.contains('login-img') !== true){
		icontext();
		}

21) How to Enable Sidemenu-Icon Overlay?

Please follow the below steps to enable Sidemenu-Icon Overlay

Step 1 :

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



		// ***** Icon Overlay ***** //
		// $('body').addClass('icon-overlay');
		// $('body').addClass('sidenav-toggled');

Step 2 :

Remove the comments to enable icon-overlay as shown below



		// ***** Icon Overlay ***** //
		$('body').addClass('icon-overlay');
		$('body').addClass('sidenav-toggled');

22) How to Enable Closed Sidemenu?

Please follow the below steps to enable Closed Sidemenu

Step 1 :

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



		// ***** closed-leftmenu ***** //
		// $('body').addClass('closed-leftmenu');
		// $('body').addClass('sidenav-toggled')

Step 2 :

Remove the comments to enable closed-leftmenu as shown below



		// ***** closed-leftmenu ***** //
		$('body').addClass('closed-leftmenu');
		$('body').addClass('sidenav-toggled')

23) How to Enable Hover Subemenu?

Please follow the below steps to enable Hover Sidemenu

Step 1 :

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



		// ***** hover-submenu ***** //
		// $('body').addClass('hover-submenu');
		// $('body').addClass('sidenav-toggled')
		// if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
		// hovermenu();
		// }

Step 2 :

Remove the comments to enable hover-submenu as shown below



		// ***** hover-submenu ***** //
		$('body').addClass('hover-submenu');
		$('body').addClass('sidenav-toggled')
		if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('login-img') !== true){
		hovermenu();
		}

24) How to Enable Hover Subemenu Style 1?

Please follow the below steps to enable Hover Sidemenu Style 1

Step 1 :

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



		// ***** hover-submenu style 1 ***** //
		// $('body').addClass('hover-submenu1');
		// $('body').addClass('sidenav-toggled')
		// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
		// hovermenu();
		// }

Step 2 :

Remove the comments to enable hover-submenu1 as shown below



		// ***** hover-submenu style 1 ***** //
		$('body').addClass('hover-submenu1');
		$('body').addClass('sidenav-toggled')
		if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('login-img') !== true){
		hovermenu();
		}

25) How to Enable Horizontal Click Menu?

Please follow the below steps to enable Horizontal Click Menu Style

Step 1 :

To enable Horizontal Click Menu Style you have to open custom.js (assets/js/custom.js) file and remove comments for horizontal as shown in below



		// ***** Horizontal Click Menu ***** //

		// $('body').addClass('horizontal');

Step 2 :

Remove the comments to enable horizontal as shown below



		// ***** Horizontal Click Menu ***** //

		$('body').addClass('horizontal');

26) How to Enable Horizontal Hover Menu?

Please follow the below steps to enable Horizontal Hover Menu Style

Step 1 :

To enable Horizontal Hover Menu Style you have to open custom.js (assets/js/custom.js) file and remove comments for horizontal-hover as shown in below



		// ***** Horizontal Hover Menu ***** //

		// $('body').addClass('horizontal-hover');

Step 2 :

Remove the comments to enable horizontal-hover as shown below



		// ***** Horizontal Hover Menu ***** //
		$('body').addClass('horizontal-hover');

27) How to Enable Horizontal or Horizontal Hover layout With Wrap Style

noWrap style:

open custom.js assets/js/custom.js file and you will find below js in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizontal or Horizontal Hover

noWrap style is given as default horizontal menu style,if you want to change it to wrap style please follow below process.


	document.querySelector('.horizontal .side-menu')?.classList.add('flex-nowrap')
	// $('#slide-left').addClass('d-none');
	// $('#slide-right').addClass('d-none');
	$('#slide-left').removeClass('d-none');
	$('#slide-right').removeClass('d-none');

Related Image:

wrap style:

Replace noWrap with wrap as shown below and remove comments for $('#slide-left').addClass('d-none'); & $('#slide-right').addClass('d-none'); and add comments to $('#slide-left').removeClass('d-none'); & $('#slide-right').removeClass('d-none'); as shown below.


						document.querySelector('.horizontal .side-menu')?.classList.add('flex-wrap')
						$('#slide-left').addClass('d-none');
						$('#slide-right').addClass('d-none');
						// $('#slide-left').removeClass('d-none');
						// $('#slide-right').removeClass('d-none');

Related Image:

Landing Page FAQ's

1) How to Enable Landing Page RTL Version?

Changing to RTL Version

open custom.js path:(assets/js/landing.js) file go to RTL Style. and remove comments for $('body').addClass('rtl'); to enable RTL version as shown in below

     
		// $('body').addClass('rtl');

Remove the comments to enable rtl as shown below

     
		$('body').addClass('rtl');

2) How to Enable Landing Page Darktheme?

open landing.js path:(assets/js/landing.js) file go to Dark Theme Style and remove comments for $("body").addClass("dark-mode"); to enable dark-mode style as shown in below

     
		// DARK THEME START
			// $('body').addClass('dark-mode');
		// DARK THEME END

Remove the comments to enable dark-mode as shown below

     
		// DARK THEME START
			$('body').addClass('dark-mode');
		// DARK THEME END

Sources

Bootstrap
https://getbootstrap.com/
Jquery
https://jquery.com/
Jquery Datepicker
https://jqueryui.com/datepicker/
Jquery Timepicker
https://jonthornton.github.io/jquery-timepicker/
Perfect-scrollbar
https://github.com/mdbootstrap/perfect-scrollbar
Full Calendar
https://fullcalendar.io/
File Uploads
https://www.jqueryscript.net/demo/jQuery-Plugin-To-Beautify-File-Inputs-with-Custom-Styles-Dropify/
Select2
https://select2.org/
Datatable
https://datatables.net/
Font Awesome Icons
https://fontawesome.com/
Material Design Icons
https://materialdesignicons.com/
Simpleline Icons
https://iconify.design/icon-sets/simple-line-icons/
Ionicons
https://ionicons.com/
ion.rangeSlider
http://ionden.com/a/plugins/ion.rangeSlider/index.html
jquery-countdown
http://keith-wood.name/countdown.html
jquery-inputmask
https://robinherbots.github.io/Inputmask/
jquery-sparkline
https://omnipotent.net/jquery.sparkline/#s-about
jQuery StarRatingSvg
http://github.com/nashio/star-rating-svg
Sweet-alert
https://lipis.github.io/bootstrap-sweetalert/
Sparkline Charts
https://omnipotent.net/jquery.sparkline/#s-about
Chartjs
https://www.chartjs.org/
Flotcharts
https://www.flotcharts.org/plugins/
Echarts
https://echarts.apache.org/en/index.html
Morris Chart
https://morrisjs.github.io/morris.js/
Wysiwyag
https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/
Summernote Editor
https://summernote.org/

Font Used

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

All Images are used: Pexels.com

Sash - PHP Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to Sash - PHP Bootstrap 5 Admin & Dashboard Template

Dashboard

Template Description

Main Features

Check out the folder structure of the Layout

How to Run PHP Project in localhost

Step:1 Quick view of Installations

Step:2 Run project

How to use GULP

SCSS & CSS

Compiling Styles

Folder Structure

Installation Instructions For both CPANEL’S and FTP

FTP Uploading Process

cPanel Uploading Process

Version

Over All Folder Structure

SWITCHER?

How to add Switcher to the Template?

How to add Switcher for Landing Page?

How to add Switcher for Custom Pages?

Chart Color

How to Replace your own Chart with existing Chart and Change Colors of that Particular Chart in Dashboard Page ?

Step1:

Step2:

How to add your New Chart and Change Colors of that New Chart According to your Themecolor in Other Pages ?

Step 1:

Step 2:

Step 3:

FAQ'S

1) How to Change Font Style ?

Step 1:

How to Select font Family

Example:

Step 2:

Example:

Step 3:

Example:

2) How to Change Sidemenu and Header Icon?

Changing Sidemenu Icon :

Changing Header Icon :

3) How to Change Primary Color for All Themes (Light, Dark, Transparent)?

Please follow the below steps to change Primary Color

Step 1 :

Step 2 :

4) How to Change Logo ?

5) How to Enable RTL Version?

Please follow the below steps to enable RTL Version

Step 1 :

Step 2 :

6) How to Enable Dark Theme?

Please follow the below steps to enable Dark Theme

Step 1 :

Step 2 :

7) How to Change Dark Theme Color?

Please follow the below steps to change Dark Theme Color

Step 1 :

Step 2 :

8) How to Change Dark Body Color?

Please follow the below steps to change Dark body Color

Step 1 :

Step 2 :

9) How to Enable Background Image Style?

10) How to Enable Color-Header?

Please follow the below steps to enable Color-header

Step 1 :

Step 2 :

11) How to Enable Dark-Header?

Please follow the below steps to enable Dark-header

Step 1 :

Step 2 :

12) How to Enable Light-Header?

Please follow the below steps to enable Light-header

Step 1 :

Step 2 :

13) How to Enable Gradient-Header?

Please follow the below steps to enable Gradient-header

Step 1 :