Dayone - Django Multipurpose Admin & Dashboard Template

Dashboard
Welcome to Dayone – Django Multipurpose Admin & Dashboard Template
  • Created Date: 11/July/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 a dedicated team to provide you best support. If you have any queries please reach us through live chat or email : sprukotechnologies@gmail.com

If You Love Our Template Design please don't forget to rate it, Thank you.

Introduction

Dayone - Django Multipurpose Admin & Dashboard Template, with Dayone template format, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

Template Description

Dayone is a Django Multipurpose Admin & Dashboard Template comes with modern and minimal design. It is fully responsive, flexible, and user-friendly. Dayone admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 240+ HTML Pages, 75+ Plugins and more UI elements. User 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. Dayone admin template comes with 100% premium quality design. Dayone template designed by using HTML5, CSS3, Jquery, After Purchasing Dayone template you will get HTML, CSS, Scss and JS files.

Dayone has very clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with an awesome unique design also we ensure you can easily design admin template.

Dayone comes with fully responsive layouts for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Dayone, you will be able to get all the future updates for free.

Template Features
  • 7 Types Dashboards
  • 240+ html Pages
  • Bootstrap 5 Responsive Framework
  • Well Commented Code
  • 24 * 7 Professional Company Support
  • Regular Updates
  • 75+ Plugins
  • 7 types of Charts
  • Select2
  • Mail Inbox
  • 11 Types of Icons
  • File upload
  • Message Chat
  • Form Elements
  • Moth & Date & Year Range Pickers
  • FormAdvanced Elements
  • Data Tables
  • Lockscreen Page
  • Error Page
  • Under Construction Page
  • User Profile
  • Draggable cards
  • Images-comparison
  • Easy to customize
  • More Widgets
  • Invoice Page
  • Pricing Tables
  • Very Easy to Create your Own Site
  • Neat, clean and simple design
  • W3C Validated
Minimum Requirements
  • asgiref==3.5.0
  • beautifulsoup4==4.10.0
  • Django==4.0.2
  • pip==22.0.3
  • django-htmlmin==0.11.0
  • html5lib==1.1
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 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 dayone/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 website 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/	
					|   |   |   ├── support-system/	
					|   |   |   ├── base.html
					|   |   |   ├── client-base.html
					|   |   |   ├── custom-base.html	
					|   |   |   ├── employee-base.html	
					|   |   |   ├── custom-base.html
					|   |   |   ├── hr-base.html
					|   |   |   ├── job-base.html	
					|   |   |   ├── project-base.html	
					|   |   |   ├── superadmin-base.html
					|   |   |   ├── support-base.html
					|   |   |   ├── support-landing-base.html
					|   |   |   ├── task-base.html
					|   |   |   └── theme-base.html
					|   |   └── 240+ HTML pages																							
					├── dayone/
					├── static/
					|   └── assets/
					├── db.sqlite3
					├── gulpfile.js
					├── manage.py
					├── package.json
					├── package-lock
			
		
  • 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 240+ html pages
  • Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, client-base.html, custom-base.html, employee-base.html, hr-base, job-base, project-base, superadmin-base, support-base, support-landing-base, task-base, theme-base.html files
  • Here base.html file is the base file for all the html pages
  • Here custom-base.html file is the base file for all custom pages ex: login.html, register.html, etc..,
  • Here client-base.html file is the base file for only client pages ex: index5.html, client-list.html, client-new.html, etc..,
  • Here employee-base.html file is the base file for only employee pages ex: index2.html, employee-attendance.html, employee-expenses.html, etc..,
  • Here hr-base.html file is the base file for only hr pages ex: index.html, hr-addemployee.html, hr-addpayroll.html, etc..,
  • Here job-base.html file is the base file for only job pages ex: index6.html, job-application.html, job-apply.html, etc..,
  • Here project-base.html file is the base file for only project pages ex: index4.html, project-list.html, project-new.html, etc..,
  • Here superadmin-base.html file is the base file for only super-admin pages ex: index7.html, superadmin-admon.html, superadmin-company.html, etc..,
  • Here support-base.html file is the base file for only support-system pages ex: support-admindash.html, support-agentdash.html, etc..,
  • Here support-landing-base.html file is the base file for only support-landing.html page
  • Here task-base.html file is the base file for only task pages ex: index3.html, task-board.html, task-complete.html, etc..,
  • Here theme-base.html file is the base file for only theme-settings pages ex: theme-settings-1.html, theme-settings-2.html
  • NOTE : By default switcher is enabled in your template, so the custom styles will not work i.e., RTL, horizontal, hover and etc..,. So if you want to enable those styles, first you need to remove or disable switcher in your template as shown in switcher section in documentation.
  • Please refer FAQ'S to activate other versions and styles like RTL, horizontal, horizontal-hover, Dark-mode, Boxed-Layout, Sidemenu-Icon. etc..,
SCSS & CSS
  • Gulp

    Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows to easily compilation of scss to css. You can read it more about it here.

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you have already installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g gulp from your terminal.

  • Gulp Variables

    After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command
    npm install gulp,
    const sass = require('gulp-sass')(require('sass'));,
    npm install gulp-postcss,
    npm install autoprefixer,
    npm install gulp-sourcemaps,
    npm install browser-sync from your terminal.

    Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt

Installation

To setup, follow below mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running in your computer

  • Install Dependencies

    Open your terminal, go to your folder and enter the command npm install. This would install all required dependencies in node_modules folder.

After you finished with above steps, you can run the command to compile scss files into css: gulp

SCSS & CSS

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

After compilation of download, you can compile your SCSS files into CSS files by following 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 Noa template gulp watch command is used for, whatever the changes made in scss files, will watch and compiled into css files.
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.
Version
  • python : 3.10.2
  • Django : 4.0.5
  • pip : 22.0.4
  • asgiref : 3.5.0
  • 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-header1.html		
							|   |   |   |   ├── app-sidebar.html	
							|   |   |   |   ├── custom-scripts.html	
							|   |   |   |   ├── custom-styles.html	
							|   |   |   |   ├── custom-switcher.html	
							|   |   |   |   ├── footer.html	
							|   |   |   |   ├── modal.html
							|   |   |   |   ├── right-sidebar.html		
							|   |   |   |   ├── scripts.html	
							|   |   |   |   ├── styles.html		
							|   |   |   |   └── switcher.html	
							|   |   |   ├── support-system/
							|   |   |   |   ├── landing-footer.html
							|   |   |   |   ├── landing-header.html	
							|   |   |   |   ├── landing-header1.html
							|   |   |   |   ├── mobile-header.html		
							|   |   |   |   ├── modal.html	
							|   |   |   |   ├── onlinesletter.html	
							|   |   |   |   ├── scripts.html	
							|   |   |   |   ├── spfooter.html	
							|   |   |   |   ├── styles.html	
							|   |   |   |   ├── switcher.html	
							|   |   |   ├── base.html
							|   |   |   ├── client-base.html	
							|   |   |   ├── custom-base.html
							|   |   |   ├── employee-base.html
							|   |   |   ├── hr-base.html
							|   |   |   ├── job-base.html
							|   |   |   ├── project-base.html
							|   |   |   ├── superadmin-base.html	
							|   |   |   ├── support-base.html
							|   |   |   ├── support-landing-base.html
							|   |   |   ├── task-base.html
							|   |   |   └── theme-base.html	
							|   |   └── 240+ HTML pages
							|   ├── __init__.py
							|   ├── admin.py
							|   ├── apps.py
							|   ├── models.py
							|   ├── tests.py
							|   ├── urls.py
							|   └── views.py
							├── dayone/
							|   ├── __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.

NOTE: Please repeat the above switcher process for the remaing base Files that are available in the path: app/templates/components/

NOTE: Please repeat the above switcher process for the support.base.html that is available in the path: app/templates/components/

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

FAQ'S

1. 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 Slect One font Family and import In to style.css file

How to Select Font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add 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: #263871;
				text-align: left;
				background: #f1f4fb;
				min-height: 100vh;
				flex-direction: column;
				justify-content: flex-start;
				position: relative;
				overflow-y: scroll;
			}
			
		

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

2. How to Change Sidemenu and Header icon?

NOTE :Sidemenu & Header Icons used in Dayone 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 ?

Step 1:

Go To _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.scss )

You will find --primary-bg-color: #3366ff; , where you can simply change color code to change primary color

How to Change Primary Color

Example:

Simply you can also change color for primary-bg-hover:#255bfb; & --primary-bg-border:#255bfb; , where you can simply change color code to change them

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

4. How to Change Logo ?

Go To "static/assets/images/brand" folder and replace Previous logo with New Logo within the given image size.

NOTE: Please don't increase logo sizes, replace the logo within given image size, otherwise the logo will not fit in particular place and it disturbs the template design.

NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.

5. How to Enable RTL version?

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


				// $('body').addClass('rtl');
			
Remove the comments to enable rtl version as shown below

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

6. How to Enable Darktheme?

To enable Darktheme you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Drak Theme as shown in below


		// DARK THEME START
			// $('body').addClass('dark-mode');
		// DARK THEME END
	
		
Remove the comments to enable dark-theme as shown below

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

7. How to change Dark Background Color?

Step 1:

Go To _bootstrap-styles.scss (static/assets/scss/_variables.scss )

You will find --dark-body: #151636; , where you can simply change color code to change dark background color

How to change Dark Background Color

Example:

8. How to Enable Transparent Background Image?

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

To enable Transparent Background Image you have to open custom.jsfile present in (static/assets/js/custom.js) file and remove comments for bg-img1 in Transparent Bg-Image Stylesection 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');

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

Go To "static/assets/images/photos" folder and replace your image with Previous image(bg-img1) within in 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.

9. How to Enable Color-Header?

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


		// COLOR HEADER START
			// $('body').addClass('color-header');
		// COLOR HEADER END
		
Remove the comments to enable color-header as shown below

		// COLOR HEADER START
			$('body').addClass('color-header');
	   // COLOR HEADER END
		

10. How to Enable Dark-Header?

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


		// DARK HEADER START
			// $('body').addClass('dark-header');
		// DARK HEADER END
		
Remove the comments to enable dark-header as shown below

		// DARK HEADER START
			$('body').addClass('dark-header');
	   // DARK HEADER END
		

11. How to Enable Light-Header?

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


		// LIGHT HEADER START
			// $('body').addClass('light-header');
		// LIGHT HEADER END
		
Remove the comments to enable light-header as shown below

		// LIGHT HEADER START
			$('body').addClass('light-header');
	   // LIGHT HEADER END
		

12. How to Enable Gradient-Header?

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


		// GRADIENT HEADER START
			// $('body').addClass('gradient-header');
		// GRADIENT HEADER END
		
Remove the comments to enable gradient-header as shown below

		// GRADIENT HEADER START
			$('body').addClass('gradient-header');
	   // GRADIENT HEADER END
		

13. How to Enable Light Menu?

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


		// LIGHT LEFTMENU START
			// $('body').addClass('light-menu');
		// LIGHT LEFTMENU END
		
Remove the comments to enable light-menu as shown below

		// LIGHT LEFTMENU START
			$('body').addClass('light-menu');
	   // LIGHT LEFTMENU END
		

14. How to Enable Color Menu?

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


		// COLOR LEFTMENU START
			// $('body').addClass('color-menu');
		// COLOR LEFTMENU END
		
Remove the comments to enable color-menu as shown below

		// COLOR LEFTMENU START
			$('body').addClass('color-menu');
	   // COLOR LEFTMENU END
		

15. How to Enable Dark Menu?

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


		// DARK LEFTMENU START
			// $('body').addClass('dark-menu');
		// DARK LEFTMENU END
		
Remove the comments to enable dark-menu as shown below

		// DARK LEFTMENU START
			$('body').addClass('dark-menu');
	   // DARK LEFTMENU END
		

16. How to Enable Gradient Menu?

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


		// GRADIENT LEFTMENU START
			// $('body').addClass('gradient-menu');
		// GRADIENT LEFTMENU END
		
Remove the comments to enable gradient-menu as shown below

		// GRADIENT LEFTMENU START
			$('body').addClass('gradient-menu');
	   // GRADIENT LEFTMENU END
		

17. How to Enable Boxed-Layout?

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


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

			// Boxed Layout Start //
			  $('body').addClass('boxed');
			// Boxed Layout Start //
		

18. How to Enable Sidemenu-Icon-with Text?

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 icon-text as shown in below


				// ***** Icon with Text *****//
				// $('body').addClass('icon-text');
				// $('body').addClass('sidenav-toggled');
				// if(document.querySelector('.icon-text').firstElementChild.classList.contains('responsive-log') !== true){
				// icontext();
				// }
			
Remove the comments to enable sidemenu-icontext as shown below

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

19. How to Enable Closed-Menu?

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


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

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

20. How to Enable Icon Overlay

To enable 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');
			
Remove the comments to enable sideicon-menu as shown below

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

21. How to Enable Hover Submenu

To enable Hover Submenu 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('responsive-log') !== true){
				// hovermenu();
				// }
			
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('responsive-log') !== true){
				 hovermenu();
				 }
			

22. How to Enable Hover Submenu Style1

To enable Hover submenu style1 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 submenu1 *****//
				// $('body').addClass('hover-submenu1');
				// $('body').addClass('sidenav-toggled');
				// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('responsive-log') !== true){
				// hovermenu();
				// }
			
Remove the comments to enable Hover Submenu Style1 as shown below

				// ***** Hover submenu1 *****//
				 $('body').addClass('hover-submenu1');
				$('body').addClass('sidenav-toggled');
				if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('responsive-log') !== true){
			 	hovermenu();
				}
			

23. How to Enable Horizontal Click Menu

To enable Horizontal layout 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');
			
Remove the comments to enable Horizontal layout as shown below

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

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

24. How to Enable Horizontal Hover Menu

To enable Horizontal Hover layout 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');
			
Remove the comments to enable Horizontal Hover layout as shown below

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

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

25. How to Enable Horizontal or Horizantal Hover layout With Wrap Style

Open custom.js file present in static/assets/js/custom.js in that file you will find below js, 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.


			$('#slide-left').addClass('d-none');
			$('#slide-right').addClass('d-none');
			// $('#slide-left').removeClass('d-none');
			// $('#slide-right').removeClass('d-none');
			if (!document.querySelector('body').classList.contains('login-img') && !$('body').hasClass('main-content')) {
			document.querySelector('.horizontal .side-menu')?.classList.add('flex-nowrap');
		
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.

													//$('#slide-left').addClass('d-none');
													//$('#slide-right').addClass('d-none');
													 $('#slide-left').removeClass('d-none');
													 $('#slide-right').removeClass('d-none');
													if (!document.querySelector('body').classList.contains('login-img') && !$('body').hasClass('main-content')) {
														document.querySelector('.horizontal .side-menu')?.classList.add('flex-wrap');
								
Related Image:

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus

To Clear LocalStorage (cookie)

How to Clear LocalStorage (cookie)?

Font Used

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

All Images are used: Pexels.com

THANK YOU!