Sash – Laravel Bootstrap 5 Admin & Dashboard Template

NOTE:

Please refer Faq's section in documentation itself to enable different layouts like RTL version, Dark version and more..

Dashboard
Welcome to Sash – Laravel Bootstrap 5 Admin & Dashboard Template
  • Created Date: 31-01-2022
  • Author: SPRUKO™
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

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

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

Introduction

Sash – Laravel Bootstrap 5 Admin & Dashboard Template, With this template format it is very easy to create a presence and grab someone's attention around the web Because this template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please make sure that before you start working with Sash template go through the documentation for easy understanding.

Template Description

Sash – Laravel Bootstrap 5 Admin & Dashboard Template built with 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 100+ Blade Pages, 50+ Plugins and more UI elements. There is no need to spend more time to customize this template, we've already made it easy for you to customize as how you like. Added advanced Form-Elements like Date pickers ,Password Input, Text Area, Select Drop Down, Check Box, Radio Input, File Input etc,. After Purchasing our template you will be getting all Blade.php, CSS, Scss and JS files.

This template is ready for admin Backend design, easy customizable components and widgets.

It is built with fully responsive and flexible for all type of devices like Desktops, iPhone, iPad, Tablets and all other smart phone devices. Works on all major Web Browsers

Once you Purchased Sash – Laravel Bootstrap 5 Admin & Dashboard Template you will be able to get all the future updates for free.

Template Features

100+

Blade Pages

60+

Customized Plugins

6

Types of Charts

11

Types of Icons

Single Dashboard Horizontal and Vertical-menu Bootstrap 5 Responsive Framework
Well Commented Code 24 * 7 Professional Company Support Regular Updates
Select2 Mail Inbox File upload
Message Chat Form Elements Month & Date & Year Range Pickers
FormAdvanced Elements Data Tables Lockscreen Page
Error Pages Under Construction Page Full Calendar
User Profile Invoice Page Pricing Tables
customizable styles More Widgets Sweet Alert
Neat, clean and simple design Very Easy to Create your Own Site W3C Validated
Minimum Requirements
  • PHP >= 8.0 or Newer
  • Laravel >= 8.0 or Newer
  • Ctype PHP Extension
  • OpenSSL PHP Extension
  • Fileinfo PHP extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • JSON PHP Extension
Installation Process of Composer
In order to run Laravel we need to install composer by the following steps

Steps to Download & Installation of Composer


Step1: Please visit 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 8.0v, here we've used 8.0.13 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)

Installation Process of Laravel
Here we are using "Composer" to download "Laravel" packages

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

  • Open command prompt, find the path of your XAMPP that is installed in your system.
  • Go to Example:C:\xampp\htdocs> path in command prompt.
  • Now type the following command line composer create-project laravel/laravel my-project and hit enter to install the Laravel Packages in your "htdocs" folder.
  • Now your downloading is started please wait for sometime to download all the necessary packages
  • Once you are redirected to the C:\xampp\htdocs> path then you are sucessfully installed laravel

    • Note: If you have any further queries in installation please refer to the official website Click here

After installation run the following command to get laravel development server
php artisan serve
How to install Livewire
  1. Basic requirements to install Livewire
    • PHP 8.0 or higher
    • Laravel 8.0 or higher
  2. Install LiveWire using composer.
  3. Set your project root path in your console or terminal and type below command line.
    4. composer require livewire/livewire
  4. To create component using LiveWire set your project root path in your console and type below command line.
    5. php artisan make:livewire example
  5. Now two new files were created in your project: referral link LiveWire Component
      6. app/Http/Livewire/example.php is the Component file and
    • resources/views/livewire/example.blade.php
      •  is the View file
  6. Here we used Livewire to create Components and View files (i.e example.php and example.blade.php files).

    7. Note:There are total 100+ blade.php and php files created by Livewire.

The Basic Structure Of Laravel Project
													
														├── app
														├── bootstrap
														├── config
														├── database
														├── public
														├── resources								
														├── routes
														├── storage
														├── tests
														├── vendor
														├── .editorconfig
														├── .env
														├── .env.example
														├── .gitattributes
														├── .gitignore
														├── .styleci.yml
														├── artisan.php
														├── composer.json
														├── composer.lock					
														├── package.json
														├── phpunit.xml
														├── README.md
														├── server.php
														└── webpack.mix.js
How to Run Laravel Project in localhost

If you have installed XAMPP on your Desktop/Laptop 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 Laravel by using Composer as mentioned in the installation process above.

Step:2 Run project

1. Now laravel has installed in your system

2. Now open Xampp and click on the start button on the Apache server

3. Extract the zip file of laravel project you received after purchase (not necessary where it is)

4. And set your project path in command prompt

5. Example: cd C:\Users\Admin\Desktop\my-project

6. And run the command line: php artisan serve

7. Laravel development server started: http://127.0.0.1:8000

How to Use Laravel Mix
In order to use laravel Mix you need to install Node.js in your system

Recommended LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org

Install Node.js using .exe downloaded file.

To check your node version, run node -v in a terminal/console window (cmd)

Now you need to install Node Modules in your project folder

1. Go to your project folder and there you will find a file called package.json.

2. Open the file in your editor and make sure that all the dependencies are correct as shown below

  • "axios": "^0.21",
  • "browser-sync": "^2.27.7",
  • "browser-sync-webpack-plugin": "^2.3.0",
  • "laravel-mix": "^6.0.6",
  • "lodash": "^4.17.19",
  • "postcss": "^8.1.14",
  • "sass": "^1.44.0",
  • "sass-loader": "^12.1.0"

3. And now set your project root path in terminal or command prompt Example: cd C:\Users\Admin\Desktop\my-project 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.

6. Now in order to Compile Assets (Mix) first, you need to run development mode.

7. Set your project root path and type the below command line.

npm run development

8. Once the development mode starts you can customize your assets

9. After your project is set into Development Mode you need not to run the Development Mode, again and again, you can simply run the below command line to compile your assets continuously.

npm run watch

10. Once you completed with the customization work you need to run your project in Production Mode in order to run Production Mode run the below command line

npm run production
Compiling Assets (Mix) or Customization

1. Go to your project root path and there you will find a folder named resources in the resources folder you will find assets.

2. In the assets folder you will see colors, css, images, js, plugins, scss folders

Folder Structure
								
									├── public/                   				 
									|   ├── assets     									    											
									|   |	├── colors  
									|   |	├── css  
									|   |	├── iconfonts                      	 								    										
									|   |	├── images     								    						
									|   |	├── js									    
									|   |	├── plugins								    									    
									|   ├── .htaccess								    
									|   ├── favicon									    
									|   ├── index.php								    
									|   ├── mix-manifest.json						    
									|   ├── robots.txt								    
									|   └── web.config								    
									├── resources/					  			    	
									|   ├── assets											
									|   |	├── colors
									|   |	├── css
									|   |	├── iconfonts
									|   |	├── images
									|   |	├── js
									|   |	├── plugins
									|   |	├── scss
									|   ├── css
									|   ├── js
									|   ├── lang
									|   └── views
									|   |	├── layouts/
									|   |	|   └── components/
									|   |	└── livewire/ (100+ blade.php files)
									├── routes/
									├── storage
									├── tests
									├── vendor
									├── .editorconfig
									├── .env
									├── .env.example
									├── .gitattributes
									├── .gitignore
									├── .styleci.yml
									├── artisan.php
									├── composer.json
									├── composer.lock					
									├── package.json
									├── package-lock.json
									├── phpunit.xml
									├── README.md
									├── server.php
									└── webpack.mix.js

3. Now you can compile or customize your assets using scss and js files that are present in the resources/assets folder.

4. Once the changes made in those files in order to apply the changes to your template you need to perform the below command in the same terminal or in command prompt that you have set your project root path.

npm run dev (or) npm run watch

NOTE: Both commands will performs the same actions but the difference is that npm run dev will only perform at once you've started it and stops after compiling, where as npm run watch will starts compiling after you've started it and it won't stop until you stop it.

5. npm starts Compiling all your scss, css, js, images and plugins that are present in resources folder.

6. And all the compiled files of scss, css, js, img, plugins folder are copied to your public/assets css, js, img, plugins folders respectively.

Note: While compiling assets, scss files are converted to css, plugins are directly copied to the folders and these complied assets are seen in your public folder with the name of assets as shown in the above folder structure.

How to Use BrowserSync
  1. The BrowserSync is a built-in feature in this Sash Laravel project.
  2. The BrowserSync dependency is downloaded automatically with node_modules when you run npm install.
  3. In order to use BrowserSync you need to set your domain as shown in the below root path.
  4. Open your project folder and scroll down there you will find a file name called webpack.mix open the file in your favourite editor.
  5. Now scroll down there you will find mix.browserSync('http://127.0.0.1:8000'); here we used http://127.0.0.1:8000 is the default domain of php artisan serve but you can use your own domain in place of http://127.0.0.1:8000 BrowserSync.
  6. Once you set your domain you need to run your project in server mode, set your project root path in console or terminal and run the below command. 
    7. php artisan serve
  7. And to open your project in your browser you need to run the below command.
    8. npm run watch

    Note:First you need to set your Domain as shown above and you need to run your project in server mode (php artisan serve).

  8. If you want to ignore Browser-Sync process then, please navigate to the root project there you will find webpack.mix.js file, open that file in an editor and scroll-down there you will find "mix.browserSync('http://127.0.0.1:8000');" please comment or remove that particular line now you are done. Now you can use your project without browser sync
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. 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
How to Upgrade Larvel Version

If you want to Upgrade laravel version, Please follow the below steps, if not you can skip this procedure.

Step 1:

Replace below Dependency versions in composer.json file which is placed in root directory

  • php:- ^7.3|^8.0
  • fideloper/proxy:- ^4.4
  • fruitcake/laravel-cors:- ^2.0.4
  • guzzlehttp/guzzle:- ^7.4.1
  • laravel/framework:- ^8.54
  • nunomaduro/collision:- ^5.10
  • phpunit/phpunit:- ^9.5.10
  • laravel/tinker:- ^2.6
  • livewire/livewire:- ^2.8
Step 2:

Delete vendor folder

Step 3:

Set your project root path in command prompt and run the following command line in command prompt.

Composer update
Software Versions Used:
  • PHP : 8.0.13
  • fideloper/proxy : 4.4
  • fruitcake/laravel-cors : 2.0.4
  • guzzlehttp/guzzle : 7.4.1
  • laravel/framework : 8.76.2
  • laravel/tinker : 2.6.3
  • livewire/livewire : 2.8.2
  • phpunit/phpunit : 9.5.10
Over All Folder Structure
										
				├── app/
				|   ├── Console
				|   ├── Exceptions
				|   ├── Http
				|   |	├── Controllers
				|   |	├── Livewire ((100+ php files))
				|   |	├── Middleware
				|   |	└── Kernel.php
				|   ├── Models
				|   └── Providers
				├── bootstrap/
				├── config/
				├── database/
				├── public/
				|   ├── assets
				|   ├── .htaccess
				|   ├── favicon.ico
				|   ├── index.php
				|   ├── robots.txt
				|   ├── mix-manifest.json
				|   └── web.config
				├── resources/
				|   ├── assets
				|   ├── css
				|   ├── js
				|   ├── lang
				|   └── views
				|   |	├── layouts/
				|   |	|   └── components/
				|   |	|       ├── app-header.blade.php
				|   |	|       ├── app-sidebar.blade.php
				|   |	|       ├── custom-scripts.blade.php
				|   |	|       ├── custom-styles.blade.php
				|   |	|       ├── footer.blade.php
				|   |	|       ├── modal.blade.php
				|   |	|       ├── scripts.blade.php
				|   |	|       ├── sidebar-right.blade.php
				|   |	|       ├── styles.blade.php
				|   |	|       └── switcher.blade.php
				|   |	|   ├── app.blade.php
				|   |	|   ├── custom-app.blade.php
				|   |	|   └── switcher.blade.php
				|   |	└── livewire/ (100+ blade.php files)
				|   |									
				├── routes/
				|   ├── api.php
				|   ├── channels.php
				|   ├── console.php
				|   └── web.php
				├── storage
				├── tests
				├── vendor
				├── .editorconfig
				├── .env
				├── .env.example
				├── .gitattributes
				├── .gitignore
				├── .styleci.yml
				├── artisan.php
				├── composer.json
				├── composer.lock					
				├── package.json
				├── package-lock.json
				├── phpunit.xml
				├── README.md
				├── server.php
				└── webpack.mix.js
Blade View

Blade is a simple, yet powerful templating engine provided with Laravel.

--------Imports master file--------

@extends('layouts.app')


@section('content')

 --------created a section called content--------

@endsection


--------get content data into app file--------

@yield('content')

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: resources/views/layouts open app.blade.php in that file, below the body tag, include the switcher path given below.

																
					

					EX:

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

																
				
 Add switcher css:

Go to root path: resources/views/layouts/components/ open "scripts.blade.php" file then add switcher js link given below.

																

Add switcher js:

Go to root path: resources/views/layouts/components/ open "scripts.blade.php" file and then change custom.js link to custom1.js link as shown below.

																
				
change custom js link:

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

Go to root path: resources/views/layouts/components/ open app-header.blade.php file in the header section add the "switcher-icon code" given below.

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: resources/views/layouts/components and create a new file by naming it as "custom-switcher.blade.php" in that file, add code given below

Go to root path: resources/views/layouts/ open "custom-app.blade.php" in that file, below the body tag, include the switcher path as shown below.

																
				


			EX:

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

																
				
 Add switcher css:

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

																

Add switcher js:

STEP2: And change the custom.js link to custom1.js link:

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

Go to root path: resources/views/layouts/ open "custom-app.blade.php" file in the page section add the "switcher-icon code" as shown below.
Chart color

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

How to change colors of any chart according to the primary color of the template?

  • Assume that you want to add chart in empty.blade.php page then create an empty.js file, which is used for that particular page only.
  • Place your chart data in the empty.js file in a particular function related to that chart. If you are using more than one chart in empty.blade.php page, then please create a new function() and a new id (here id is nothing but a name that you used for your particular chart. function() name and ID name must be unique for every chart).
  • Here i created a new function with name (myChart()) for my new chart in empty.blade.php page

How to apply colors to the new chart?

Open themecolor.js (root path: resources/assets/js/themecolor.js) and paste the below code inside of the function names() function of (// chart colors) section.
  • Here (#chartId1) is nothing but, the id that you used for your particular chart.
  • Here myChart1(); is nothing but a function that you used for your particular chart.
  • Open empty.js file and add( myVarVal ) variable in a place, where you want to change the colors of your chart according to the primary color of the template.
  • NOTE: For more understanding please refer below code which we used in index1.js file present in root path: "resources/assets/js/index1.js".
    • colors: [ myVarVal || "#38cab3","#e4e7ed"],
  • Here myVarVal is nothing but a variable name, if you use this variable anywhere then the color of that particular place will change according to theme color
Theme Styles
Primary Color For All Themes

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 the color code you want as shown in below

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

Light Theme Style

If you want to change Light Theme color you need to follow the below process. Below are the background color, text color and border color of Light Theme.

How to Change Light Background Color?

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

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

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

How to Change Light Text Color?

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

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

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

How to Change Light Border Color?

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

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

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

Dark Theme Style

If you want to change Dark Theme color you need to follow the below process. Below are the body color, theme color, border color and text color of Dark Theme.

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 the color code you want as shown in below

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

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 the color code you want as shown in below

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

How to Change Dark Border Color?

Please follow the below steps to change Dark Border Color
Step 1 :

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

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

How to Change Dark Text Color?

Please follow the below steps to change Dark Text Color
Step 1 :

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

Rootpath : _variables.scss (resources/assets/scss/_variables.scss )

Transparent Theme Style

If you want to change Transparent Theme color you need to change Transparent Body Color. Please follow the below process.

How to Change Transparent Body Color?

Please follow the below steps to change Transparent Body Color
Step 1 :

To change Transparent Body Color you have to open _bootstrap-styles.scss file and replace the color code you want as shown in below

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

Background Image Style

If you want to apply best background image for your Transparent Theme you need to follow below process.

How to Enable Transparent Background Image Style1?

Please follow the below steps to enable Transparent Background Image Style1
Step 1 :

To enable Transparent Background Image you have to open custom.js file present in resources/assets/js/custom.js and remove comments for bg-img1 as shown in below


			
		// Bg-Image1 Style

		// $('body').addClass('bg-img1');
		// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable bg-img1 as shown below 

			
		// Bg-Image1 Style

		$('body').addClass('bg-img1');
		$('body').addClass('transparent-mode');

To change Transparent Background Image go to resources/assets/images/media then replace previous image with new image (bg-img1) within the given image size

NOTE: Please do not increase image size, you need to replace your image within the given image size, otherwise the image will not fit in particular place and it disturbs the template design.

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Transparent Background Image Style2?

Please follow the below steps to enable Transparent Background Image Style2
Step 1 :

To enable Transparent Background Image you have to open custom.js file present in resources/assets/js/custom.js and remove comments for bg-img2 as shown in below

															
			
		// Bg-Image2 Style

		// $('body').addClass('bg-img2');
		// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable bg-img2 as shown below 

			
		// Bg-Image2 Style

		$('body').addClass('bg-img2');
		$('body').addClass('transparent-mode');

To change Transparent Background Image go to resources/assets/images/media then replace previous image with new image (bg-img2) within the given image size

NOTE: Please do not increase image size, you need to replace your image within the given image size, otherwise the image will not fit in particular place and it disturbs the template design.

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Transparent Background Image Style3?

Please follow the below steps to enable Transparent Background Image Style3
Step 1 :

To enable Transparent Background Image you have to open custom.js file present in resources/assets/js/custom.js and remove comments for bg-img3 as shown in below


			
		// Bg-Image3 Style

		// $('body').addClass('bg-img3');
		// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable bg-img3 as shown below 

			
		// Bg-Image3 Style

		$('body').addClass('bg-img3');
		$('body').addClass('transparent-mode');

To change Transparent Background Image go to resources/assets/images/media then replace previous image with new image (bg-img3) within the given image size

NOTE: Please do not increase image size, you need to replace your image within the given image size, otherwise the image will not fit in particular place and it disturbs the template design.

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Transparent Background Image Style4?

Please follow the below steps to enable Transparent Background Image Style4
Step 1 :

To enable Transparent Background Image you have to open custom.js file present in resources/assets/js/custom.js and remove comments for bg-img4 as shown in below


			
		// Bg-Image4 Style

		// $('body').addClass('bg-img4');
		// $('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable bg-img4 as shown below 

			
		// Bg-Image4 Style

		$('body').addClass('bg-img4');
		$('body').addClass('transparent-mode');

To change Transparent Background Image go to resources/assets/images/media then replace previous image with new image (bg-img4) within the given image size

NOTE: Please do not increase image size, you need to replace your image within the given image size, otherwise the image will not fit in particular place and it disturbs the template design.

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

FAQS
General Style

How to Change Font Style ?

Step 1:

Go To _fonts.scss (resources/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(resources/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 "resources/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.

Navigation Style

How to Enable Horizontal Click Menu?

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

To enable Horizontal Menu Style you have to open custom.js file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Horizontal or Horizontal Hover layout With Wrap Style

NOTE: By default nowrapstyle is given for horizontal and horizontal-hover menu styles, if you want to change it to wrap style please follow below process.

Open custom.js file present in resources/assets/js/custom.js in that file you will find below js, in Horizontal (or) Horizontal-Hover style section.
Example 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.
Example Image:

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable RTL Version

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Theme Styles

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 file present in (resources/assets/js/custom.js) file and remove comments for dark-mode as shown in below


				
	/******* Theme Style ********/

	//$('body').addClass('dark-mode');
Step 2 :
Remove the comments to enable dark-mode as shown below 

				
	/******* Theme Style ********/

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

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Transparent Theme?

Please follow the below steps to enable Transparent Theme
Step 1 :

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


				
	/******* Theme Style ********/

	//$('body').addClass('transparent-mode');
Step 2 :
Remove the comments to enable transparent-mode as shown below 

				
	/******* Theme Style ********/

	$('body').addClass('transparent-mode');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Header Styles

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 file present in (resources/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')

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Menu Styles

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Layout Width Styles

How to Enable Full-Width-Layout?

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

To enable Full-Width-Layout you have to open custom.js file present in (resources/assets/js/custom.js) file and remove comments for layout-fullwidth as shown in below


	/*Layout-width Styles*/

	// $('body').addClass('layout-fullwidth');
Step 2 :
Remove the comments to enable layout-fullwidth as shown below 

	/*Layout-width Styles*/

	$('body').addClass('layout-fullwidth');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Layout Positions

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Fixed-Layout?

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

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


				
	/*Header-Position Styles*/

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

				
	/*Header-Position Styles*/

	$('body').addClass('fixed-layout');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

Sidemenu layout Styles

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 file present in (resources/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();
		}

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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');

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

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 file present in (resources/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')

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Hover Sidemenu?

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

To enable Hover Sidemenu you have to open custom.js file present in (resources/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();
		}

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

How to Enable Hover Sidemenu 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 file present in (resources/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();
		}

NOTE: You must perform npm run dev command after changing or modifying the content in assets folder, otherwise those changes you've made will not be applied to your template.

License Details

Copyright © SPRUKO™ SPRUKO TECHNOLOGIES PRIVATE LIMITED All Rights Reserved.

If you have any questions please contact : support@spruko.com.

Please note that your use of this Template/Application/Code is subject to the Terms and Conditions of the license agreement by which you acquired this product.

For instance :
  • If you have purchased a regular license, then you can use this based on the regular license agreement.
  • If you have purchased an extended license, then you can use this based on the extended license agreement.

You may not use this Template/Application if you have not validly acquired a license.

Please read the license details carefully.

Warning:- This project is protected by copyright law and international treaties. Unauthorized license usage, as well as unauthorised reproduction or redistribution of this product, software, or any of its components, may result in severe civil and criminal penalties, and will be prosecuted to the fullest extent permitted by law.

Font Used

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

All Images are used: Pexels.com

THANK YOU!
Copyright © 2022 Sash. Designed with by Spruko All rights reserved.