Adminor - ASP.Net Core6 & Mvc5 Bootstrap5 Admin & Dashboard Template

Note:-

Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark styles,etc..

Dashboard
Welcome to Adminor – ASP.Net Core6 & Mvc5 Bootstrap5 Admin & Dashboard Template
  • Created Date: 09/December/2022
  • Author: Spruko
  • Company: Spruko Technologies Private Limited

Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries please contact live chat

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

Introduction
Welcome to Adminor – ASP.Net Core6 & Mvc5 Bootstrap5 Admin & Dashboard Template

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

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

Template Description

Adminor– ASP.Net Core6 & Mvc5 is a Bootstrap Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Adminor admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 110+ CSHTML 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 CSHTML 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 Adminor , you will be able to get free download of all future updates.

Template Features
Vertical-menu Horizontal click menu Horizontal hover menu RTL ready
110 + CSHTML Pages Bootstrap 5 Responsive Framework Well Commented Code 24 * 7 Professional Company Support
Regular Updates 50+ Plugins 8 types of Charts Select2
About us Blog File Manager Gallery
Image-Comparision Ecommerce Pages Settings Page Blog Details
Calendar Mail Inbox 12 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

  • Visual Studio Code or Visual Studio 2022
  • C# for Visual Studio Code (latest version)
  • .NET 6.0 SDK
Installation Process of .NET SDK.

Step1: Please visite the Official Web Site of the ..NET SDK

Step2: Click on the Download .NET SDK. button

Step3: Now your .NET SDK file has downloaded and installed in your computer.

Instalation Process Of ASP.Net Core6 & Mvc5

Here we are using "ASP.Net Core6 & Mvc5 " download

If you know how to createASP.Net Core6 & Mvc5 project you can skip this step.

  • Assuming that you have already installed .NET SDK in your computer.
  • First, you need to create an environment at your project location For example:C:\project\projectname>
  •      Use for Asp.Net Mvc5
  • This project folder path can be used to open the command.Now execute the command dotnet new mvc -o Projectname It creates a new ASP.NET MVC5
         project in the Project Name folder.
  •      Use for Asp.Net Core6
  • This project folder path can be used to open the command.Now execute the command dotnet new webapp -o Projectname It creates a new ASP.NET Core6
         project in the Project Name folder.
  • Trust the HTTPS development certificate by running the following command dotnet dev-certs https --trust .
  • Now you are sucessfully installed ASP.Net Core6 & Mvc5 project.
Visual Studio Code
  • If you are using Visual Studio Code.
  • Go to your root project location path, then open the project file in your editor.
  • Open the command prompt, then use " cd /path-to-your-project ".
  • Enter the command dotnet watch run to get ASP.Net Core6 & Mvc5 development server.
Visual Studio
  • If you are using Visual Studio.
  • Open the Visual studio, then click on "Open a Project or Solution."
  • Go to your root project location path, then you will see inside the folder projectname.csproj. Select it, and then open the project file.
  • Now, press the key F5 to get ASP.Net Core6 & Mvc5 development server.
The Basic Structure Of ASP.NET Mvc5 Project

												
													├── bin/
													|   └── debug/   	
													|       └── net6.0 																		
													├── Controllers/
													├── Models
													├── obj
													├── Properties
													├── Views
													├── wwwroot
													├── appsettings.Development.json
													├── appsettings.json
													├── gulpfile.js
													├── package-lock.json
													├── package.json
													├── program.cs
													├── Adminor.csproj
													└── Adminor.sln
												 
											
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: C:\projectname\views in that project folder in will have 10+ folders and in 120+ cshtml files.
  • Navigate as shown Example: C:\projectname\ Controllers in that project folder will have 10+ Controller.cs pages.
  • Navigate as shown Example: C:\projectname\views\shared\layouts Open folder there you will find _app-header.cshtml, _app-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.
  • Here _Layout.cshtml file is the base file for all the cshtml pages.
  • Here _Layout1.cshtml file is the base file for all custom pages ex: error401.cshtml, error500.cshtml,and error503.cshtml, etc..,
  • Here _Layout2.cshtml file is the base file for all custom pages ex: login.cshtml, register.cshtml, etc..,
  • Here _Layout3.cshtml file is the base file for SwitcherPage.cshtml page.
  • And _Layoutlandingpage.cshtml file is the base file for Layoutlandingpage.cshtml page.
The Basic Structure Of ASP.NET Core6 Project

												
													├── bin/
													|   └── debug/   	
													|       └── net6.0 																		
													├── obj
													├── Pages
													├── Properties
													├── wwwroot
													├── Adminor.csproj
													├── Adminor.sln
													├── appsettings.Development.json
													├── appsettings.json
													├── gulpfile.js
													├── package-lock.json
													├── package.json
													└── program.cs
												 
												 
											
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: C:\projectname\Pages in that project folder in will have 10+ folders and in 120+ cshtml files and 10+cshtml.cs files.
  • Navigate as shown Example: C:\projectname\Pages\shared\layouts Open folder there you will find _app-header.cshtml, _app-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.
  • Here _Layout.cshtml file is the base file for all the cshtml pages.
  • Here _Layout1.cshtml file is the base file for all custom pages ex: error401.cshtml, error500.cshtml,and error503.cshtml, etc..,
  • Here _Layout2.cshtml file is the base file for all custom pages ex: login.cshtml, register.cshtml, etc..,
  • Here _Layout3.cshtml file is the base file for SwitcherPage.cshtml page.
  • And _Layoutlandingpage.cshtml file is the base file for Layoutlandingpage.cshtml page.
How to run ASP.Net Core6 & Mvc5 development server

Visual studio code
  • First, unzip the project folder that you received from us.
  • Go to your root project location path, then open the project file in your editor.
  • Open the command prompt, then use " cd /path-to-your-project ".
  • Now execute the command: dotnet watch run to getASP.Net Core6 & Mvc5 development server.
Visual studio
  • First, unzip the project folder that you received from us.
  • Go to your root project location path, then open the project file.
  • Just double click on the file Adminor.sln inside the project folder.
  • Now, press the keyF5 to getASP.Net Core6 & Mvc5 development server.
SCSS & CSS

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

  • 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 csss. 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.

  • 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 into css: gulp

SCSS & CSS
GULP COMMANDS
Command Description
gulp Runs the project locally, starts the development server and watches for any changes in your code, including your html, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp watch In this template gulp watch command is for what ever changes made in scss folder, will watch and run an appropriate task. All the CSS files under assets/css/ folder will be watched and upon changes made to these files, the styles task will be executed.
Software Versions Used:
  • .Net fremework :4.8
  • C# for Visual Studio Code : 1.69
  • .NET : 6.0.202
ASP .Net Mvc5 Over All Folder Structure

											├── bin/
											|   └── Debug/
											|       └── net6.0/
											|           ├── Adminor.deps.json/
											|           ├── Adminor.dll	
											|           ├── Adminor.exe
											|           ├── Adminor.pdp
											|           ├── Adminor.runtimeconfig.json	
											|           ├── Adminor.staticwebassets.runtime.json
											|           ├── appsettings.Development.json
											|           ├── appsettings.json/	
											|           ├── package-lock.json
											|           └── package.json
											├── Controllers	
											|   └── 12 Controller (Files)	
											├── Modals	
											|   └── ErrorViewModel.cs	
											├── obj		
											|   ├── Debug	
											|   ├── Adminor.csproj.nuget.dgspec.json	
											|   ├── Adminor.csproj.nuget.g.props	
											|   ├── Adminor.csproj.nuget.g.targets
											|   ├── project.assets.json
											|   ├── project.nuget.cache	
											|   └── staticwebassets.pack.sentinel
											├── Properties
											|   └── launchSettings.json
											├── Views
											|   ├── Shared__
											|   |   ├── _Layout.cshtml.css
											|   |   ├── _Layout1.cshtml
											|   |   ├── _Layout2.cshtml
											|   |   ├── _Layout3.cshtml
											|   |   ├── _Layoutlandingpage.cshtml
											|   |   ├── _ValidationScriptsPartial.cshtml
											|   |   └── layouts
											|   |       ├── landingpage
											|   |       ├── _app-header.cshtml
											|   |       ├── _app-header1.cshtml
											|   |       ├── _app-sidebar.cshtml
											|   |       ├── _footer.cshtml
											|   |       └── _switcher.cshtml
											|   ├── Advancedui
											|   |   └── 12 .cshtml (Files)
											|   ├── Apps
											|   |   └── 22 .cshtml (Files)
											|   ├── Charts
											|   |   └── 8 .cshtml (Files)
											|   ├── Custompages
											|   |   └── 10 .cshtml (Files)
											|   ├── Ecommerce
											|   |   └── 5 .cshtml (Files)
											|   ├── Elements
											|   |   └── 19 .cshtml (Files)
											|   ├── Forms
											|   |   └── 7 .cshtml (Files)
											|   ├── Home
											|   |   └── 6 .cshtml (Files)
											|   ├── Icons
											|   |   └── 11 .cshtml (Files)
											|   ├── Landingpage
											|   |   └── Index.cshtml (Files)
											|   ├── Pages
											|   |   └── 18 .cshtml (Files)
											|   ├── Utilities
											|   |   ├── Utilities.cshtml.cs
											|   |   └── 9 .cshtml (Files)
											|   ├── _ViewImports.cshtml
											|   └── _ViewStart.cshtml
											├── Properties
											|   └──launchSettings.json
											├── wwwroot
											|   ├── assets
											|   |   ├── css
											|   |   ├── iconfonts
											|   |   ├── img
											|   |   ├── js
											|   |   ├── landing
											|   |   ├── plugins
											|   |   ├── scss
											|   |   └── switcher
											|   ├── css
											|   ├── js
											|   └── lib
											|   └── favicon.ion
											├── appsettings.Development.json
											├── appsettings.json
											├── gulpfile.js
											├── package-lock.json
											├── package.json
											├── program.cs
											├── Adminor.csproj
											└── Adminor.sln
											
Asp .Net Core6 Over All Folder Structure

											├── bin/
											|   └── Debug
											|       └── net6.0
											|           ├── Adminor.deps.json
											|           ├── Adminor.dll
											|           ├── Adminor.exe
											|           ├── Adminor.pdb	
											|           ├── Adminor.runtimeconfig.json
											|           ├──  Adminor.staticwebassets.runtime.json
											|           ├── appsettings.Development.json
											|           └── appsettings.json	
											├── obj		
											|   ├── Debug	
											|   ├── Adminor.csproj.nuget.dgspec.json	
											|   ├── Adminor.csproj.nuget.g.props	
											|   ├── Adminor.csproj.nuget.g.targets
											|   ├── project.assets.json
											|   ├── project.nuget.cache	
											|   └── staticwebassets.pack.sentinel
											├── Pages
											|   ├── Shared__
											|   |   ├── _Layout.cshtml.css
											|   |   ├── _Layout1.cshtml
											|   |   ├── _Layout2.cshtml
											|   |   ├── _Layout3.cshtml
											|   |   ├── _Layoutlandingpage.cshtml
											|   |   ├── _ValidationScriptsPartial.cshtml
											|   |   └── layouts
											|   |       ├── landingpage
											|   |       ├── _app-header.cshtml
											|   |       ├── _app-header1.cshtml
											|   |       ├── _app-sidebar.cshtml
											|   |       ├── _footer.cshtml
											|   |       └── _switcher.cshtml
											|   ├── Advancedui
											|   |   ├── Advancedui.cshtml.cs
											|   |   └── 12 .cshtml (Files)
											|   ├── Apps
											|   |   ├── Apps.cshtml.cs
											|   |   └── 22 .cshtml (Files)
											|   ├── Charts
											|   |   ├── Charts.cshtml.cs
											|   |   └── 8 .cshtml (Files)
											|   ├── Custompages
											|   |   ├── Custompages.cshtml.cs
											|   |   └── 10 .cshtml (Files)
											|   ├── Ecommerce
											|   |   ├── Ecommerce.cshtml.cs
											|   |   └── 5 .cshtml (Files)
											|   ├── Elements
											|   |   ├── Advancedui.cshtml.cs
											|   |   └── 19 .cshtml (Files)
											|   ├── Forms
											|   |   ├── Forms.cshtml.cs
											|   |   └── 7 .cshtml (Files)
											|   ├── Home
											|   |   ├── Home.cshtml.cs
											|   |   └── 6 .cshtml (Files)
											|   ├── Icons
											|   |   ├── Icons.cshtml.cs
											|   |   └── 11 .cshtml (Files)
											|   ├── _ViewImports.cshtml
											|   ├── _ViewStart.cshtml
											|   ├── Error.cshtml
											|   ├── Error.cshtml.cs
											|   ├── Index.cshtml
											|   ├── Index.cshtml.cs
											|   ├── Privacy.cshtml
											|   └── Privacy.cshtml.cs
											├── Properties
											|   └──launchSettings.json
											├── wwwroot
											|   ├── assets
											|   |   ├── css
											|   |   ├── iconfonts
											|   |   ├── img
											|   |   ├── js
											|   |   ├── landing
											|   |   ├── plugins
											|   |   ├── scss
											|   |   └── switcher
											|   ├── css
											|   ├── js
											|   └── lib
											|   └── favicon.ion
											├── Adminor.csproj
											├── Adminor.sln
											├── appsettings.Development.json
											├── appsettings.json
											├── gulpfile.js
											├── package-lock.json
											├── package.json
											└── Program.cs
											
Switcher?
Asp.Net Mvc5 Switcher?

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


Asp.Net Core6 Switcher?

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

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 change color of any chart according to the primary color of the template ?

Please Follow the below steps
Step1:

open a js file used for that particular CSHTML page and create a new function in that that js file as shown below

NOTE-1: For index.cshtml page there is index.js file which is used for that particular page only. You should create function and place data for your chart in that index.js you should create new function and place chart data in that js files only

IMPORTANT:If you want to place a new chart in any other page Please create new js file and create the below function


																function chartid() {  -----------
																	--------
																	----------
																}
															
NOTE-2:Function name should be unique,It is better to give the function name according to your chart id, any other names also can be used
Step2:

Place your new chart data in the function which you created.

Step3:

open themecolor.js Path:(wwwroot\assets\js\themecolor.js) and paste the below code in the names() function in (// chart colors) section located at the bottom of the file.


																	if(document.querySelector('#Your-chart-id') !== null){
																		example();
																	}
																

replace (#Your-chart-id) with your new chart id & replace example(); with chartid() function which you created in step 1.

Step3:

place ( myVarVal ) variable before the colors of your chart where you want to change accordingly to the primary color of the template for example refer below code which we used in index.js file.


																	colors: [ myVarVal || "#38cab3","#e4e7ed"],
																
FAQS

1) How to Change Font Style ?

Step 1:

Go To _fonts.scss (wwwroot/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 Style.scss i.e (root:-wwwroot/assets/scss/style.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 _custom-styles.scss(wwwroot/assets/scss/bootstarp/_bootstrap-custom.scss)

Example:


															body {
																font-family: "Roboto", sans-serif;
															}
															
														

2) How to Change Primary Color ?

Step 1:

Go To _custom-styles.scss (wwwroot/assets/scss/variables )

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

How to Change Primary Color

																	BEFORE:
																			:root {
																				--primary-bg-color: #623AA2;
			
			
																	AFTER:
																			:root {
																				--primary-bg-color: #0162e8;
														

Simply you can also change color for primary-bg-hover:#025cd8; & --primary-bg-border:#0162e8; , where you can simply change color code to change them

3) How to Change Logo ?

Go To "wwwroot/assets/img/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.

4) How to Enable RTL version?

One more methode to add RTL version

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


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

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

5) How to Enable Darktheme?

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


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

															/***************** DARK THEME *********************/
															$('body').addClass('dark-theme');
															/***************** DARK THEME *********************/
			
															

6) How to Enable Color-header?

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


			
																/**Color-Header**/
																// $('body').addClass('color-header');
																/**Color-Header**/
			
															
Remove the comments to enable color-header as shown below

			
																/**Color-Header**/
																	$('body').addClass('color-header');
																/**Color-Header**/
			
															

7) How to Enable Dark-header?

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


																/**Dark-Header**/
																// $('body').addClass('dark-header');
																/**Dark-Header**/
															
Remove the comments to enable dark-header as shown below

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

8) How to Enable Light-header?

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


																/**Light-Header**/
																// $('body').addClass('light-header');
																/**Light-Header**/
															
Remove the comments to enable light-header as shown below

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

10) How to Enable Light Menu?

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


																/**Light-menu**/
																// $('body').addClass('light-menu');
																/**Light-menu**/
															
Remove the comments to enable light-menu as shown below

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

11) How to Enable Color Menu?

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


																/**Color-menu**/
																// $('body').addClass('color-menu');
																/**Color-menu**/
															
Remove the comments to enable color-menu as shown below

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

12) How to Enable Dark Menu?

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


																/**Dark-menu**/
																// $('body').addClass('dark-menu');
																/**Dark-menu**/
															
Remove the comments to enable dark-menu as shown below

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

14) How to Enable Boxed-Layout?

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


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

																/*---  Boxed Layout Start --*/
																	$('body').addClass('layout-boxed');
																	if (document.querySelector('body').classList.contains('horizontal')) {
																		checkHoriMenu();
																	}
																/*---  Boxed Layout End --*/
															

15) How to Enable Scrollable-Layout?

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


																/**Header-Position Styles**/
																// $('body').addClass('scrollable-layout');
																/**Header-Position Styles**/
															
Remove the comments to enable scrollable-layout as shown below

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

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

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


															/**Icon-Text-Menu**/
															// $('body').addClass('icontext-menu');
															// $('body').addClass('sidenav-toggled');
															// if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																// icontext();
															// }
															/**Icon-Text-Menu**/
			
															
Remove the comments to enable sidemenu-icontext as shown below

																/**Icon-Text-Menu**/
																$('body').addClass('icontext-menu');
																$('body').addClass('sidenav-toggled');
																if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																icontext();
																}
																/**Icon-Text-Menu**/
			
																

17) How to Enable Closed-Menu?

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


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

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

18) How to Enable Icon Overlay

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


															/**Icon-Overlay-Menu**/
															// $('body').addClass('sideicon-menu');
															// $('body').addClass('sidenav-toggled');
															/**Icon-Overlay-Menu**/
															
Remove the comments to enable sideicon-menu as shown below

															/**Icon-Overlay-Menu**/
																$('body').addClass('sideicon-menu');
																$('body').addClass('sidenav-toggled');
															/**Icon-Overlay-Menu**/
														

19) How to Enable Hover Submenu

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


			
																/**Hover-Sub-Menu**/
																// $('body').addClass('hover-submenu');
																// $('body').addClass('sidenav-toggled');
																// if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																// 	hovermenu();
																// }
																/**Hover-Sub-Menu**/
																
Remove the comments to enable Hover Submenu as shown below

			
																/**Hover-Sub-Menu**/
																$('body').addClass('hover-submenu');
																$('body').addClass('sidenav-toggled');
																if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																	hovermenu();
																}
																/**Hover-Sub-Menu**/
															

20) How to Enable Hover Submenu style1

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


																/**Hover-Sub-Menu1**/
																// $('body').addClass('hover-submenu1');
																// $('body').addClass('sidenav-toggled');
																// if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																// 	hovermenu();
																// }
																/**Hover-Sub-Menu1**/
															
Remove the comments to enable Hover Submenu Style1 as shown below

															/**Hover-Sub-Menu1**/
															$('body').addClass('hover-submenu1');
															$('body').addClass('sidenav-toggled');
															if (document.querySelector('body').classList.contains('horizontal')  && !document.querySelector('body').classList.contains('login-img')) {
																hovermenu();
															}
															/**Hover-Sub-Menu1**/
														

20) How to Enable Double-menu

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


																/**Double-Menu**/
																// $('body').addClass('double-menu');
																// doubleLayoutFn()
																/**Double-Menu**/
															
Remove the comments to enable Double-menu as shown below

																/**Double-Menu**/
																	$('body').addClass('double-menu');
																	doubleLayoutFn()
																/**Double-Menu**/
															

20) How to Enable Double-menu-tabs

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


																/**Double-menu-tabs**/
																// $('body').addClass('double-menu-tabs');
																// doubleLayoutFn()
																/**Double-menu-tabs**/
																
Remove the comments to enable Double-menu-tabs as shown below

																/**Double-menu-tabs**/
																	$('body').addClass('double-menu-tabs');
																	doubleLayoutFn()
																/**Double-menu-tabs**/
																

21) How to Enable Horizontal layout

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


																/*Horizontal start*/
																$('body').addClass('horizontal');
															// if (!document.querySelector('.horizontal').classList.contains('error-page1')) {
															// 	document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
															// 	menuClick();
															// 	responsive();
															// 	$(".main-container").removeClass("container-fluid");
															// 	$(".main-container").addClass("container");
															// } else {
															// 	$(".main-container").addClass("container-fluid");
															// 	$(".main-container").removeClass("container");
															// }
																/*Horizontal end*/
															
Remove the comments to enable Horizontal layout as shown below

																/*Horizontal start*/
																$('body').addClass('horizontal');
																if(!document.querySelector('.horizontal').classList.contains('error-page1')){
																	document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
																	menuClick();
																	responsive();
																	$(".main-container").removeClass("container-fluid");
																	$(".main-container").addClass("container");
																}else {
																	$(".main-container").addClass("container-fluid");
																	$(".main-container").removeClass("container");
																}
																/*Horizontal end*/
															

22) How to Enable Horizontal Hover layout

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


																/*Horizontal-hover start*/
																// $('body').addClass('horizontal-hover');
																// if (!document.querySelector('.horizontal-hover').classList.contains('error-page1')) {
																// 	document.querySelector('.horizontal-hover .side-menu').style.flexWrap = 'nowrap'
																// 	HorizontalHovermenu();
																// 	responsive();
																// $(".main-container").removeClass("container-fluid");
																// $(".main-container").addClass("container");
																// } else {
																// 	$(".main-container").addClass("container-fluid");
																// 	$(".main-container").removeClass("container");
																// }
																/*Horizontal-hover end*/
															
Remove the comments to enable Horizontal Hover layout as shown below

																/*Horizontal-hover start*/
																$('body').addClass('horizontal-hover');
																if (!document.querySelector('.horizontal-hover').classList.contains('error-page1')) {
																	document.querySelector('.horizontal-hover .side-menu').style.flexWrap = 'nowrap'
																	HorizontalHovermenu();
																	responsive();
																	$(".main-container").removeClass("container-fluid");
																	$(".main-container").addClass("container");
																} else {
																	$(".main-container").addClass("container-fluid");
																	$(".main-container").removeClass("container");
																}
																/*Horizontal-hover end*/
															

23) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

open custom.js path:(wwwroot/assets/js/switcher-style.js) file and replacenoWrap with wrap in Horizontal (or) Horizontal Hover layout to enable wrap style for Horizantal or Horizantal Hover


																document.querySelector('.horizontal .side-menu').style.flexWrap = 'noWrap'
															
Replace noWrap with wrap as shown below

																document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
															
Below Image Shows How Wrap and Nowrap Styles Looks like.

Example:

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

24) How to clear LocalStorage (cookie)?

Step1:

Open themeColors.js file wwwroot/assets/js/themeColors.js

To clear LocalStorage loading functions you need to remove localStorageBackup() {} and localStorageBackup() calling function in themeColors.js as shown below


													
														function localStorageBackup() {

														}
																											
													
Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions in switcher-styles.js wwwroot/assets/js/switcher-styles.js files.

LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.

														
														localStorage.setItem("AdminordarkMode" , true);
														localStorage.removeItem("AdminorlightMode");
													
THANK YOU!