Solic - Django Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.

Dashboard
Welcome to Solic – Django Admin & Dashboard Template

  • Created Date: 18/October/2023
  • Author: Spruko
  • Company: Spruko Technologies Private Limited

Thank you for purchasing our project and being our valued customer. We hope you are happy with your purchase. Feel free to contact us at any time. We have a dedicated team to provide you with the best support. If you have any issues, please contact the Support Help Desk at https://support.spruko.com/.

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

Introduction
Welcome to Solic – Django Admin & Dashboard Template

Solic - Django Admin Template, With this 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 styles. So before you start working with the template please take a quick look on the documentation so that you can easily understand.

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

Template Description

Solic– is a Django Bootstrap5 Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Solic Django admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 100+ html Pages & 50+ Plugins more UI elements . No Need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed for using HTML5, CSS3, Jquery. After Purchased this template you will get All HTML Files, CSS, SCSS and JS Files.

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

it is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Solic– is a Django Bootstrap5 Admin & Dashboard template, you will be able to get free download of all future updates.

Template Features
Vertical-menu Horizontal click menu Horizontal hover menu 5 Different Dashboards
RTL ready 100+ html Pages Bootstrap 5 Responsive Framework Well Commented Code
24 * 7 Professional Company Support Regular Updates 50+ Plugins 5 types of Charts
Gallery Select2 About us Blog
File Manager Mail Inbox Ecommerce Pages Services Page
Blog Details Calendar Mail Inbox 11 Types of Icon sets
File upload Message Chat Form Elements Month & Date & Year Range Pickers
FormAdvanced Elements Data Tables Lockscreen Page Error Page
User Profile Invoice Page Advanced Pricing Tables Easy to customize
More Widgets Very Easy to Create your Own Site Neat, clean and simple design W3C Validated
Minimum Requirements
  • asgiref==3.6.0
  • beautifulsoup4==4.12.2
  • Django==4.2
  • django-htmlmin==0.11.0
  • html5lib==1.1
  • six==1.16.0
  • soupsieve==2.4
  • sqlparse==0.4.3
  • tzdata==2023.3
  • webencodings==0.5.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 and pip install django-htmlmin 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/	
		|   |   |   β”œβ”€β”€ base.html
		|   |   |   β”œβ”€β”€ custom-base.html	
		|   |   |   └── switcher-base.html
		|   |   └── 100+ html pages																							
		β”œβ”€β”€ solic/
		β”œβ”€β”€ static/
		|   └── assets/
		β”œβ”€β”€ db.sqlite3
		β”œβ”€β”€ esbuild.config.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 100+ html pages
  • Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, custom-base.html, switcher-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, error400, error403, etc..,
  • Here switcher-base.html file is the base file for only switcher page ex: switcher.html
  • NOTE : By default switcher is enabled in your template, so the switcher-styles will 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, Icon Overlay, etc..,
How to Run Django Project in localhost
Step:1 Quick view of Installations

1. Download and Install the python from official site https://python.org/

2. Install Django by using Python as mentioned in the installation process above.

Step:2 Run project

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

2. Another process for accessing the Django project, open command prompt or terminal and set your project root path: Example: C:\xampp\htdocs

3. To create Virtualenv type python -m venv envin your terminal or console

4. Now you need to activate your Virtualenv by typing env\scripts\activate

5. Now then in your terminal type pip install -r requirements.txt

6. The above command will download all the required packages by using the requirements.txt file.

7. Go to Project root path and run the command line: python manage.py runserver

8. Django development server at started: http://127.0.0.1:8000/ now type the url in the browser to access the project.

Purpose of a Starter Kit
Introduction to the Django Template Starter Kit:

The Django template starterkit is a resource that helps developers kickstart their Django web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Django-based websites or applications.

Purpose of the Django Template Starter Kit:

The purpose of the Django template starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Django projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Django Template Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Django template starter kit, developers should have a basic understanding of Django and web development concepts. Additionally, they should have a web server environment Django installed on their local machines or a hosting server. Familiarity with HTML, CSS, and JavaScript is also beneficial for frontend development aspects.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Solic have more than 100 HTML pages.

We have provided all the pre-build layouts like Sidemenu, Header, Footer and Scripts etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link.

https://support.spruko.com/
Starterkit Folder Structure
The Basic Structure Of Django PROJECT
      
				β”œβ”€β”€ app/
				|   β”œβ”€β”€ __pycache__/
				|   β”œβ”€β”€ migrations/
				|   β”œβ”€β”€ templates/
				|   |   β”œβ”€β”€ components/
				|   |   |   β”œβ”€β”€ layouts/
				|   |   |   └── base.html
				|   |   └── html pages																							
				β”œβ”€β”€ solic/
				β”œβ”€β”€ static/
				|   └── assets/
				β”œβ”€β”€ db.sqlite3
				β”œβ”€β”€ esbuild.config.js
				β”œβ”€β”€ manage.py
				β”œβ”€β”€ package.json
				β”œβ”€β”€ package-lock
							
						
  • Take a quick look at the folder structure of the "Starterkit."
  • Integration of your customized HTML pages becomes easy when using the "Starterkit."
  • The "Starterkit" provides all the layouts, related assets, and plugins.
  • To explore the contents of the "Starterkit," unzip the project folder received after purchase.
  • Navigate as shown Example: C:\projectname\app\ templates in that project folder in will have one html file and Add your html files here if you have more.
  • Navigate as shown Example: C:\projectname\app\templates\components Open folder there you will find footer.html, header.html, scripts.html, sidebar.html, styles.html, and switcher.html files etc.
  • Here base.html file is the base file for all the html pages.
SCSS & CSS

Solic comes with power of SCSS. The css files can be generated from scss by simply following below steps:

  • esbuild

    Esbuild is a cutting-edge JavaScript task runner that automates common development tasks, such as compiling Sass to CSS, minifying JavaScript and CSS files, optimizing images, and more. Esbuild allows developers to define tasks that process files in a project, and then run those tasks automatically when files are changed or when specific commands are issued.for more information about Esbuild Check 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,

    Note : If you are using the latest version of Node JS or want to install and use the latest version, click here and install all the dependencies manually that are given below in command prompt.

  • esbuild

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

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 into css: npm run build

Note:- please ensure that you have installed all nodemodules requried to run esbuild tasks .

SCSS & CSS

Here we provided package.json and esbuild.config.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
npm run build In Solic template npm run build command is used for, whatever the changes made in scss files, will watch and compiled into css files.
Compiling Styles

1. In the assets folder you will see css, icon-fonts, images, js, libs, scss, video

Folder Structure

        
		β”œβ”€β”€ assets
		|   β”œβ”€β”€ css  
		|   β”œβ”€β”€ iconfonts 
		|   β”œβ”€β”€ images
		|   β”œβ”€β”€ js
		|   β”œβ”€β”€ plugins
		|   β”œβ”€β”€ scss
		|   └── switcher
		
		
		

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

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

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

Version
  • python : 3.11.1
  • Django : 4.2
  • pip : 22.3.1
  • esbuild:- 0.19.4
  • node:- 18.17.1
  • npm :- 9.6.7
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		
			|   |   |   |   β”œβ”€β”€ footer.html	
			|   |   |   |   β”œβ”€β”€ right-sidebar.html		
			|   |   |   |   β”œβ”€β”€ scripts.html	
			|   |   |   |   β”œβ”€β”€ search-modal.html	
			|   |   |   |   β”œβ”€β”€ styles.html		
			|   |   |   |   β”œβ”€β”€ switcher-scripts.html	
			|   |   |   |   β”œβ”€β”€ switcher-styles.html		
			|   |   |   |   └── switcher.html
			|   |   |   β”œβ”€β”€ base.html
			|   |   |   β”œβ”€β”€ custom-base.html
			|   |   |   └── switcher-base.html	
			|   |   └── 100+ html pages
			|   β”œβ”€β”€ __init__.py
			|   β”œβ”€β”€ admin.py
			|   β”œβ”€β”€ apps.py
			|   β”œβ”€β”€ models.py
			|   β”œβ”€β”€ tests.py
			|   β”œβ”€β”€ urls.py
			|   └── views.py
			β”œβ”€β”€ solic/
			|   β”œβ”€β”€ __pycache__
			|   β”œβ”€β”€ __init__.py
			|   β”œβ”€β”€ asgi.py
			|   β”œβ”€β”€ settings.py
			|   β”œβ”€β”€ urls.py
			|   └── wsgi.py
			β”œβ”€β”€ static/
			|   └── assets/
			β”œβ”€β”€ db.sqlite3
			β”œβ”€β”€ esbuild.config.js
			β”œβ”€β”€ manage.py
			β”œβ”€β”€ package-lock.json
			└── package.json
		
				
SWITCHER?

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

Chart color
How to change any chart color according to your theme color?

By default, the chart color will change based on the theme color.

You can replace the default chart with your own chart, but in order to change the colors of your chart with respect to the theme colors you have to follow the below steps.

How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?

Note: This process is only for replace your own chart in index.html page

Step1:

Go to root path: static/assets/js/index.js in that js file you will find a function named as index " function conversionChart() ; " inside of that function replace the old chart js data with your new chart js data, in order to change your chart color according to your themecolor then add " myVarVal" (Ex:- myVarVal to that particular color field based on your requirement.

Step2:

Navigate to root path: static/assets/js/ and open custom-switcher.js in that js file you will find a function called "(function names() )" In that function you will find

// index charts
if (document.querySelector('#conversion') !== null) { conversionChart(); }

Then change it's id name based on the id that you've used for your particular chart.

Ex: How do I modify the Id in the "custom-switcher.js" file?

    Before : " if(document.querySelector('#conversion') !== null){ conversionChart() ; }"

    After : " if(document.querySelector('# your chart id') !== null){ conversionChart() ; }"

How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?

Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)

If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.

Step 1:

If you want to add any chart to any other page then follow the below process.

Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique " name (for example in my case: myFunction() ), and then place the chart js content inside of that function.

Note: If there is more than one chart then you need to create different functions for different charts respectively.

Ex-1: myFunction1() { chart js1 content }

Ex-2:myFunction2() { chart js2 content }
Step 2:

Navigate to root path: static/assets/js/custom-switcher.js in that js file you will find a function called "(function names() )" In that function you will find

"if(document.querySelector('#conversion') !== null){ conversionChart() ; }"

Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)

Ex: " if(document.querySelector('# your chart id') !== null){ myFunction(); =>created function for the above id }"
Step 3:

If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process

Ex : Go to root path: static/assets/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " value (Ex:- myVarVal )to that particular color field based on your requirement.

FAQS

1) How to Change Font Style ?

Step 1:

Go To _variables.scss (static/assets/scss/_variables.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 _variables.scss i.e (root:- static/assets/scss/_variables.scss)

Example:

Before : @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');

After : @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

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: 'Lato', sans-serif;
				font-size: 14px;
				font-weight: 400;
				line-height: 1.5;
				color: $default-color;
				text-align: start;
				background-color: $background;
			}
				
			

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

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

3) How to Enable Darktheme?

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for dark-mode to enable dark-theme style as shown in below


				//Dark Theme Style
				if (!localStorage.getItem("solicdarktheme")) {
					// html.setAttribute("data-theme-color" , "dark") // for dark theme 
				}
					
					
Remove the comments to enable dark-mode as shown below

				//Dark Theme Style
				if (!localStorage.getItem("solicdarktheme")) {
					html.setAttribute("data-theme-color" , "dark") // for dark theme 
				}
					
					

4) How to Enable Headers Styles ?

open custom-switcher.js path:(static/assets/js/custom-switcher.js)file and remove comments for any data-header-style to enable Headers Styles.


				//Header Styles
				if (!localStorage.getItem("solicHeader")) {
				// html.setAttribute("data-header-style" , "light") // for light header style
				// html.setAttribute("data-header-style" , "dark") // for dark header style
				// html.setAttribute("data-header-style" , "color") // for color header style
				// html.setAttribute("data-header-style" , "gradient") // for gradient header style
				}
			

5) How to Enable Menu Styles ?

open custom-switcher.js path:(static/assets/js/custom-switcher.js)file and remove comments for any data-menu-style to enable Menu Styles.


				//Menu Styles
				if (!localStorage.getItem("solicMenu")) {
					// html.setAttribute("data-menu-style" , "light") // for light menu style
					// html.setAttribute("data-menu-style" , "dark") // for dark menu style
					// html.setAttribute("data-menu-style" , "color") // for color menu style
					// html.setAttribute("data-menu-style" , "gradient") // for gradient menu style
				}
			

6) How to Enable Boxed-Layout?

open custom-switcher.js path:(static/assets/js/custom-switcher.js)file and remove comments for layout-boxed to enable layout-boxed style as shown in below


				//Boxed styles
				if (!localStorage.getItem("solicboxed")) {
				// html.setAttribute("data-width" , "boxed") // for boxed style
				}
				
Remove the comments to enable layout-boxed as shown below

				//Boxed styles
				if (!localStorage.getItem("solicboxed")) {
				html.setAttribute("data-width" , "boxed") // for boxed style
				}
				

7) How to Enable Scrollable-Layout?

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below


				//Scrollabel styles
				if (!localStorage.getItem("solicscrollable")) {
					// html.setAttribute("data-position" , "scrollable") // for scrollable style
					}
					
Remove the comments to enable scrollable-layout as shown below

				//Scrollabel styles
				if (!localStorage.getItem("solicscrollable")) {
				html.setAttribute("data-position" , "scrollable") // for scrollable style
				}
					

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

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for sidemenu-icontext to enable sidemenu-icontext style as shown in below


				//IconText Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					// html.setAttribute("data-vertical-style" , "icontext") // for Vertical icontext style
					// textLayoutFn();
				}
					
					
Remove the comments to enable sidemenu-icontext as shown below

				//IconText Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					html.setAttribute("data-vertical-style" , "icontext") // for Vertical icontext style
					textLayoutFn();
				}
					

9) How to Enable Closed-Menu?

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for Closed Sidemenu to enable closed menu style as shown in below


				//Closed Layout Styles
				if (!localStorage.getItem("solicverticalstyles")) {
					// html.setAttribute("data-vertical-style" , "closed") // for Vertical closed style 
					// $('body').addClass('sidenav-toggled');
				}
				//Closed Layout Styles
					
Remove the comments to enable Closed Sidemenu as shown below

				//Closed Layout Styles
				if (!localStorage.getItem("solicverticalstyles")) {
					html.setAttribute("data-vertical-style" , "closed") // for Vertical closed style 
					$('body').addClass('sidenav-toggled');
				}
				//Closed Layout Styles
					

10) How to Enable Icon Overlay

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for Icon Overlay Sidemenu to enable Icon Overlay style as shown in below


				//Overlay Layout Styles
				if (!localStorage.getItem("solicverticalstyles")) {
					// html.setAttribute("data-vertical-style" , "overlay") // for Vertical overlay style 
					// $('body').addClass('sidenav-toggled');
				}
					
Remove the comments to enable sideicon-menu as shown below

				//Overlay Layout Styles
				if (!localStorage.getItem("solicverticalstyles")) {
					html.setAttribute("data-vertical-style" , "overlay") // for Vertical overlay style 
					$('body').addClass('sidenav-toggled');
				}
					

11) How to Enable Hover Submenu

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for Hover Submenu to enable Hover submenu style as shown in below


				//Hover Submenu Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					// html.setAttribute("data-vertical-style" , "hover") // for Vertical hover style 
					// hoverLayoutFn();
				}
					
Remove the comments to enable Hover Submenu as shown below

				//Hover Submenu Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					html.setAttribute("data-vertical-style" , "hover") // for Vertical hover style 
					hoverLayoutFn();
				}
					

12) How to Enable Hover Submenu Style1

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for Hover Submenu Style1 to enable Hover submenu style1 style as shown in below


				//Hover Submenu1 Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					// html.setAttribute("data-vertical-style" , "hover1") // for Vertical hover1 style 
					// hoverLayoutFn();
				}
					
Remove the comments to enable Hover Submenu Style1 as shown below

				//Hover Submenu1 Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					html.setAttribute("data-vertical-style" , "hover1") // for Vertical hover1 style 
					hoverLayoutFn();
				}
					

13) How to Enable Double-menu

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments for Double-menu to enable Double-menu style as shown in below


				//Double Menu Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					// html.setAttribute("data-vertical-style" , "doublemenu") // for Vertical doublemenu style 
					// doubleLayoutFn();
				}
					
Remove the comments to enable Double-menu as shown below

				//Double Menu Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					html.setAttribute("data-vertical-style" , "doublemenu") // for Vertical doublemenu style 
					doubleLayoutFn();
				}
					

14) How to Enable Double-menu-tabs

open custom-switcher.js path:(assets/js/custom-switcher.js) file and remove comments for Double-menu-tabs to enable Double-menu-tabs style as shown in below


				//Double Menu Tabs Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					// html.setAttribute("data-vertical-style" , "doublemenu-tabs") // for Vertical doublemenu-tabs style 
					// doubleLayoutFn();
				}
					
Remove the comments to enable Double-menu-tabs as shown below

				//Double Menu Tabs Layout Styles
				if (!localStorage.getItem("solicverticalstyles") && document.querySelector(".switcher-wrapper")) {
					html.setAttribute("data-vertical-style" , "doublemenu-tabs") // for Vertical doublemenu-tabs style 
					doubleLayoutFn();
				}
					

15) How to Enable RTL version?

One more methode to add RTL version

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


				//RTL 
				if (!localStorage.getItem("solicrtl")) {
					// html.setAttribute("dir" , "rtl") // for rtl version 
				}
					
Remove the comments to enable $('body').addClass('rtl') as shown below

				//RTL 
				if (!localStorage.getItem("solicrtl")) {
					html.setAttribute("dir" , "rtl") // for rtl version 
				}
					

16) How to Enable Horizontalmenu?

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for $('body').addClass('horizontal') to enable Horizontalmenu as shown in below


				//horizontalmenu Layout Style
				if (!localStorage.getItem("soliclayout") === "horizontal" || localStorage.getItem("soliclayout") == null) {
					// html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style 
				} 
						
Remove the comments to enable $('body').addClass('horizontal') as shown below

				//horizontalmenu Layout Style
				if (!localStorage.getItem("soliclayout") === "horizontal" || localStorage.getItem("soliclayout") == null) {
					html.setAttribute("data-hor-style" , "hor-click") // for horizontal click style 
				} 
						

17) How to Enable Horizontal Hover layout

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for Horizontal Hover layout to enable Horizontal Hover layout style as shown in below


				//horizontalmenu-hover Layout Style
				if (!localStorage.getItem("soliclayout") === "horizontal" || localStorage.getItem("soliclayout") == null) {
					// html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style 
				} 
					
Remove the comments to enable Horizontal Hover layout as shown below

				//horizontalmenu-hover Layout Style
				if (!localStorage.getItem("soliclayout") === "horizontal" || localStorage.getItem("soliclayout") == null) {
					html.setAttribute("data-hor-style" , "hor-hover") // for horizontal hover style 
				} 
					

18) How to Enable Horizontal Centerlogo

open custom-switcher.js path:(static/assets/js/custom-switcher.js) file and remove comments for centerlogo-horizontal to enable centerlogo-horizontal style as shown in below


						//Centerlogo For Horizontal
						if (!localStorage.getItem("soliccenterlogo")) {
							// html.setAttribute("data-logo" , "centerlogo") // for Horizontal Centerlogo
						}
					
Remove the comments to enable centerlogo-horizontal as shown below

						//Centerlogo For Horizontal
						if (!localStorage.getItem("soliccenterlogo")) {
							html.setAttribute("data-logo" , "centerlogo") // for Horizontal Centerlogo
						}
					

19) 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!