Sash – Django Bootstrap 5 Admin & Dashboard Template

Dashboard
Welcome to Sash – Django Bootstrap 5 Admin & Dashboard Template
  • Created Date: 04/02/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 – Django 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 – Django 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 – Django Bootstrap 5 Admin & Dashboard Template you will be able to get all the future updates for free.

Template Features

100+

HTML 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
  • Python >= 3.10.1
  • asgiref >=3.4.1
  • pytz >=2021.5
  • sqlparse >=0.4.2
  • pip >= 21.3.1
  • Django >= 4.0
  • Django-htmlmin >= 0.11.0
Installation Process of Python
In order to run Django you need to install Python by the following steps

This steps are based on Windows OS


Step1: Please visite the Official Web Site of the Python python.org

Step2: Click on the Download Python button

Step3: Now your Python setup file has downloaded

Step4: Now Right click on the Python setup file and select Run as administrator click on Yes

Step5: Please click on the Check Box Add Python to PATH. And select Customize installation option

Step6: Click on Install for all users. And click on the Install button to install python on your system

Step7: To check whether Python is installed or not type python --version in your terminal or console

Step8: The pip package is automatically installed with your python installation

Step9: To check whether pip package is installed or not type pip --version in your terminal or console

Note: Please follow the official web site python.org to install on Linux/UNIX OS.

SET-UP DJANGO PROJECT
  • Assuming that you have already installed python in your computer.
  • First, you need to create an environment at your project location. where, you want to create your project in your computer globally or locally by setting your project path in the terminal.
  • To create Virtualenv type python -m venv env in your terminal or console
  • Now you need to activate your Virtualenv by typing env\scripts\activate
  • You must activate your Virtualenv to download any new dependencies "locally", otherwise those dependencies you install will install "globally"
INSTALLATION PROCESS OF Django
Here we are using "Python Manager" to download "Django"

If you know how to create Django project you can skip this step.

  • First open command prompt in my case Example:C:\Users\ADMIN01> and type pip install django to install Django globally.
  • To check whether Django is installed or not type python -m django --version in your terminal or console
  • Now open a new command prompt and navigate to the folder where you want to create the Django project.
  • In my case Example:C:\Users\ADMIN01\Desktop\django>.
  • Now type the following command line django-admin startproject projectname and hit enter to create Django project. Here projectname is nothing but your django project folder name that you want to keep as your project name
  • Now you are sucessfully created Django project.
  • To create App or Application navigate to your django project folder Example:C:\Users\ADMIN01\Desktop\django\projectname> in your command prompt and type python manage.py startapp appname
  • Now you are sucessfully created App in your django project.
  • The project that you received will have a file called the requirements.txt file. Now go to that file location and then in your terminal type pip install -r requirements.txt
  • The above command will download all the required packages by using the requirements.txt file.
  • We have an improtant dependency or module called django-htmlmin it is used to minify the html content. You have already installed HTML_MINIFY with the help of requirements.txt file
  • By default we are disabling HTML_MINIFY module i.e., HTML_MINIFY= False if you want to enable HTML_MINIFY module please follow the root path Sash/settings.py in that file you will find HTML_MINIFY= False then change it into HTML_MINIFY= True

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

After installation run following command to get Django development server
python manage.py runserver
The Basic Structure Of Django Project
													
														├── app
														|   ├── __pycache__
														|   ├── migrations
														|   ├── templates/
														|   |   ├── components
														|   |   |   ├── layouts	
														|   |   |   ├── base.html	
														|   |   |   ├── custom-base.html
														|   |   |   └── switcher-base.html
														|   |   └── .html files (100+)																							
														├── sash
														├── static
														|   └── assets
														├── db.sqlite3
														├── gulpfile.js
														├── manage.py								
														├── package-lock.json
														├── package.json
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: F:\project folder\app\templates in that template folder will have 100+ html pages
  • Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, custom-base.html and switcher-base.html files
  • Here base.html file is the base file for all html pages
  • Here custom-base.html file is the base file for all custom pages ex: login.html, register.html, etc..,
  • and switcher-base.html file is the base file for switcher1.html page
  • Please refer FAQ'S to activate other versions and styles like RTL, horizontal, horizontal-hover, Dark-mode, Boxed-Layout, Sidemenu-Icon. etc..,
SCSS & CSS

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

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

Command Description
gulp Runs the project locally, starts the development server and watches for any changes in your sass files and folders etc. The development server is accessible at http://localhost:8000.
gulp watch In this template gulp watch command is for what ever changes made in scss files, will watch and compiled into css files.
gulp dark In this template gulp dark command is for what ever changes that are made in dark.scss file will be compiled and the changes will update 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 file will be compiled and the changes will update in skin-modes.css file in css folder.
gulp transparent In this template gulp transparent command is for what ever changes are made in transparent.scss file will be compiled and the changes will update in transparent.css file in css folder.
gulp color In this template gulp color command is for what ever changes are made in color1.scss file will be compiled and the changes will update in color1.css file in css folder.
Software Versions Used:
  • python : 3.10.1
  • Django : 4.0
  • asgiref : 3.4.1
  • beautifulsoup4 : 4.10.0
  • django-htmlmin : 0.11.0
  • html5lib : 1.1
  • six : 1.16.0
  • soupsieve : 2.3.1
  • sqlparse : 0.4.2
  • tzdata : 2021.5
  • webencodings : 0.5.1
Over All Folder Structure
				
					├── app/
					|   ├── __pycache__
					|   ├── migrations
					|   ├── templates/
					|   |   ├── components
					|   |   |   ├── layouts	
					|   |   |   |   ├── app-header.html	
					|   |   |   |   ├── app-sidebar.html	
					|   |   |   |   ├── custom-scripts.html	
					|   |   |   |   ├── custom-styles.html	
					|   |   |   |   ├── footer.html	
					|   |   |   |   ├── modal.html	
					|   |   |   |   ├── scripts.html	
					|   |   |   |   ├── styles.html	
					|   |   |   |   ├── sidebar-right.html	
					|   |   |   |   └── switcher.html	
					|   |   |   ├── base.html	
					|   |   |   ├── custom-base.html	
					|   |   |   └── switcher-base.html	
					|   |   └── 100+ .html files
					|   ├── __init__.py
					|   ├── admin.py
					|   ├── apps.py
					|   ├── models.py
					|   ├── tests.py
					|   ├── urls.py
					|   └── views.py									
					├── Sash/
					|   ├── __pycache__
					|   ├── __init__.py
					|   ├── asgi.py
					|   ├── settings.py
					|   ├── urls.py
					|   └── wsgi.py
					├── static/
					|   └── assets
					├── db.sqlite3
					├── gulpfile
					├── manage.py
					└── package.json
Switcher

By default the switcher is enabled in your template, if you want to remove switcher from your template please follow the process

Go to root path: app/templates/components/ open "base.html" in that file, below the body tag remove the swithcer link as shown below.

Go to root path: app/templates/components/layouts/ open "styles.html" file and remove switcher css links given below.

																

 Remove switcher css:

Go to root path: app/templates/components/layouts/ open "scripts.html" file and remove switcher js link given below.

																

Remove switcher js:

And change custom1.js link to custom.js link as shown below.

NOTE: The type="module" is only used when exporting a function from one js file to another js file.

Go to root path: app/templates/components/layouts/ open "app-header.html" file and at the bottom of that page remove the "switcher-icon code" given below.

After completion of this process perform python manage.py runserver in your terminal.

NOTE: If you remove switcher styles and scripts from your template, then switcher1.html and switcher2.html pages present in templates folder root path: app/templates/ will not work properly. If you want to use switcher1.html and switcher2.html pages particularly then go to root path: app/templates/ open switcher1.html and switcher2.html and then uncomment the styles and scripts which are commented.(Skip this process if this is not your requirement).

STEP 1: Uncomment the styles and scripts which are commented in switcher1.html and switcher2.html.

And then change theextends path for Switcher1.html and Switcher2.html pages ashown below

STEP 2: Go to the root path: app/templates/components/ and open switcher-base.html file and uncomment the switcher path for switcher pages as shown below.
How to change colors of any chart according to the primary color of the template?

This process is only for change colors of a new chart according to the theme color.

If you want to add a new chart in any page of your template (for example in my case : "empty.html" page).

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

  • Assume that you want to add chart in empty.html 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.html 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.html page

How to apply colors to the new chart?

Open themecolor.js (root path: static/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 index2.js file present in root path: "static/assets/js/index2.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 (static/assets/scss/bootstrap/_bootstrap-styles.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/_variables.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

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 (static/assets/scss/bootstrap/_bootstrap-styles.scss )

NOTE: After Changing color you must run gulp command i.e.,gulp watch.

Background Image Style

NOTE: By default the switcher is enabled in your template, if you want to use any of these transparent bg-img styles, you must remove switcher i.e., The two styles or features will not work at a time. So, if you want to apply the features are specified below, please remove the switcher as mentioned in switcher section in documentation.

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 static/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 static/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.

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 static/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 static/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.

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 static/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 static/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.

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 static/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 static/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.

FAQS

NOTE: By default the switcher is enabled in your template, if you want to use any of these features are in FAQ'S section, you must remove switcher i.e., The two styles or features will not work at a time. So if you want to apply the features are specified in FAQ'S section, please remove the switcher as mentioned in switcher section in documentation.

General Style

How to Change Font Style ?

Step 1:

Go To _fonts.scss (static/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(static/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 "static/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 (static/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');

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 (static/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');

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.

															
From:
        // $('#slide-left').addClass('d-none');
        // $('#slide-right').addClass('d-none');
        $('#slide-left').removeClass('d-none');
        $('#slide-right').removeClass('d-none');
        document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
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. 
															
To:
        $('#slide-left').addClass('d-none');
        $('#slide-right').addClass('d-none');
        // $('#slide-left').removeClass('d-none');
        // $('#slide-right').removeClass('d-none');
        document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Example Image:

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 (static/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');
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 (static/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');

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 (static/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');
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 (static/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')

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 (static/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');

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 (static/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');

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 (static/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');
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 (static/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');

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 (static/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');

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 (static/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');

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 (static/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');
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 (static/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');

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 (static/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');
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 (static/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');

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 (static/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');
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 (static/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();
		}

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 (static/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');

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 (static/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')

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

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 (static/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();
		}
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.