Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark styles,etc..
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!
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! 😊
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.
| 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 |
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.
If you know how to createASP.Net Core6 & Mvc5 project you can skip this step.
C:\project\projectname>dotnet new mvc -o Projectname It creates a new ASP.NET MVC5 dotnet new webapp -o Projectname It creates a new ASP.NET Core6 dotnet dev-certs https --trust ." cd /path-to-your-project ".dotnet watch run to get ASP.Net Core6 & Mvc5 development server.projectname.csproj. Select it, and then open the project file.F5 to get ASP.Net Core6 & Mvc5 development server.
├── 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
├── 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
" cd /path-to-your-project ".dotnet watch run to getASP.Net Core6 & Mvc5 development server.Adminor.sln inside the project folder.F5 to getASP.Net Core6 & Mvc5 development server.Adminor comes with power of SCSS. The css files can be generated from scss by simply following below steps:
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.
Please follow below steps to install and setup all prerequisites:
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,
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
To setup, follow below mentioned steps:
Make sure to have all above prerequisites installed & running in your computer
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
| 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.
|
├── 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
├── 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
If you want to add switcher to your template follow the below process.
Go to root path: Views/Shared/_Layout.cshtml open _Layout.cshtml in that file, below the body tag, include the switcher path given below.
Switcher path:
<partial name="~/Views/Shared/layouts/_switcher.cshtml" />
EX:
<body class="main-body app sidebar-mini ltr">
<!-- switcher code -->
<partial name="~/Views/Shared/layouts/_switcher.cshtml" />
<!-- End switcher code -->
Go to root path: Views/Shared/_Layout.cshtml open "_Layout.cshtml" file and add switcher css links given below.
Add switcher css:
<!-- INTERNAL Switcher css -->
<link href="~/assets/switcher/css/switcher.css" rel="stylesheet" asp-append-version="true">
<link href="~/assets/switcher/demo.css" rel="stylesheet" asp-append-version="true">
Go to root path: Views/Shared/_Layout.cshtml open "_Layout.cshtml" file and then add theswitcher.js link as shown below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Views/Shared/_Layout.cshtml open "_Layout.cshtml" file and then chenge _app-header.cshtml to _app-header1.cshtml given below.
Before:
<!-- app header code -->
<partial name="~/Views/Shared/layouts/_app-header.cshtml" />
<!-- End app header Code -->
After:
<!-- app header1 Code -->
<partial name="~/Views/Shared/layouts/_app-header1.cshtml" />
<!-- End app header1 Code -->
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open _Layoutlandingpage.cshtml in that file, below the body tag, include the switcher path given below.
Switcher path:
<!-- switcher code -->
<partial name="~/Views/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher code -->
EX:
<body class="main-body app sidebar-mini ltr landing-page horizontalmenu">
<!-- switcher code -->
<partial name="~/Views/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher code -->
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then chenge _app-header.cshtml to _app-header1.cshtml given below.
Before :
<!-- app header code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-header.cshtml" />
<!-- End app header Code -->
After :
<!-- app header code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-header1.cshtml" />
<!-- End app header Code -->
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then chenge _app-sidebar.cshtml to _app-sidebar1.cshtml given below.
Before :
<!-- app sidebar Code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-sidebar.cshtml" />
<!-- End app sidebar Code -->
After :
<!-- app sidebar Code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-sidebar1.cshtml" />
<!-- End app sidebar Code -->
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then add theswitcher.js link as shown below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and add switcher css links given below.
Add switcher css:
<!-- INTERNAL Switcher css -->
<link href="~/assets/switcher/css/switcher.css" rel="stylesheet" asp-append-version="true">
<link href="~/assets/switcher/demo.css" rel="stylesheet" asp-append-version="true">
If you want to add switcher to your template follow the below process.
Go to root path: Pages/Shared/_Layout.cshtml open _Layout.cshtml in that file, below the body tag, include the switcher path given below.
Switcher path:
<partial name="~/Pages/Shared/layouts/_switcher.cshtml" />
EX:
<body class="main-body app sidebar-mini ltr">
<!-- switcher code -->
<partial name="~/Pages/Shared/layouts/_switcher.cshtml" />
<!-- End switcher code -->
Go to root path: Pages/Shared/_Layout.cshtml open "_Layout.cshtml" file and add switcher css links given below.
Add switcher css:
<!-- INTERNAL Switcher css -->
<link href="~/assets/switcher/css/switcher.css" rel="stylesheet" asp-append-version="true">
<link href="~/assets/switcher/demo.css" rel="stylesheet" asp-append-version="true">
Go to root path: Pages/Shared/_Layout.cshtml open "_Layout.cshtml" file and then add theswitcher.js link as shown below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Pages/Shared/_Layout.cshtml open "_Layout.cshtml" file and then chenge _app-header.cshtml to _app-header1.cshtml given below.
Before:
<!-- app header code -->
<partial name="~/Pages/Shared/layouts/_app-header.cshtml" />
<!-- End app header Code -->
After:
<!-- app header1 Code -->
<partial name="~/Pages/Shared/layouts/_app-header1.cshtml" />
<!-- End app header1 Code -->
Go to root path: Views/Shared/_Layoutlandingpage.cshtml open _Layoutlandingpage.cshtml in that file, below the body tag, include the switcher path given below.
Switcher path:
<!-- switcher code -->
<partial name="~/Pages/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher code -->
EX:
<body class="main-body app sidebar-mini ltr landing-page horizontalmenu">
<!-- switcher code -->
<partial name="~/Pages/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher code -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then chenge _app-header.cshtml to _app-header1.cshtml given below.
Before :
<!-- app header code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-header.cshtml" />
<!-- End app header Code -->
After :
<!-- app header code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-header1.cshtml" />
<!-- End app header Code -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then chenge _app-sidebar.cshtml to _app-sidebar1.cshtml given below.
Before :
<!-- app sidebar Code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-sidebar.cshtml" />
<!-- End app sidebar Code -->
After :
<!-- app sidebar Code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-sidebar1.cshtml" />
<!-- End app sidebar Code -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and then add theswitcher.js link as shown below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml open "_Layoutlandingpage.cshtml" file and add switcher css links given below.
Add switcher css:
<!-- INTERNAL Switcher css -->
<link href="~/assets/switcher/css/switcher.css" rel="stylesheet" asp-append-version="true">
<link href="~/assets/switcher/demo.css" rel="stylesheet" asp-append-version="true">
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.
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: Forindex.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() { -----------
--------
----------
}
Place your new chart data in the function which you created.
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.
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"],
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
Example:

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");
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;
}
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
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
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.
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 *********************/
$('body').addClass('rtl') as shown below
/***************** RTL *********************/
$('body').addClass('rtl');
/***************** RTL *********************/
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 *********************/
dark-mode as
shown below
/***************** DARK THEME *********************/
$('body').addClass('dark-theme');
/***************** DARK THEME *********************/
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**/
color-header
as shown below
/**Color-Header**/
$('body').addClass('color-header');
/**Color-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**/
dark-header as
shown below
/**Dark-Header**/
$('body').addClass('dark-header');
/**Dark-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**/
light-header
as shown below
/**Light-Header**/
$('body').addClass('light-header');
/**Light-Header**/
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**/
light-menu as
shown below
/**Light-menu**/
$('body').addClass('light-menu');
/**Light-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**/
color-menu as
shown below
/**Color-menu**/
$('body').addClass('color-menu');
/**Color-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**/
dark-menu as
shown below
/**Dark-menu**/
$('body').addClass('dark-menu');
/**Dark-menu**/
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 --*/
layout-boxed
as shown below
/*--- Boxed Layout Start --*/
$('body').addClass('layout-boxed');
if (document.querySelector('body').classList.contains('horizontal')) {
checkHoriMenu();
}
/*--- Boxed Layout End --*/
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**/
scrollable-layout as shown below
/**Header-Position Styles**/
$('body').addClass('scrollable-layout');
/**Header-Position Styles**/
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**/
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**/
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**/
Closed Sidemenu as shown below
/**closed-Menu**/
$('body').addClass('closed-menu');
$('body').addClass('sidenav-toggled');
/**closed-Menu**/
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**/
sideicon-menu
as shown below
/**Icon-Overlay-Menu**/
$('body').addClass('sideicon-menu');
$('body').addClass('sidenav-toggled');
/**Icon-Overlay-Menu**/
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**/
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**/
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**/
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**/
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**/
Double-menu as shown below
/**Double-Menu**/
$('body').addClass('double-menu');
doubleLayoutFn()
/**Double-Menu**/
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**/
Double-menu-tabs as shown below
/**Double-menu-tabs**/
$('body').addClass('double-menu-tabs');
doubleLayoutFn()
/**Double-menu-tabs**/
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*/
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*/
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*/
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*/
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'
noWrap with wrap as
shown below
document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Example:

Simply you can change noWrap with wrapto change
the style of Horizontal or Horizontal Hover Menus
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() {
}
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");
| Plugin | Version | URL |
|---|---|---|
| Bootstrap | v5.1.3 | https://getbootstrap.com/ |
| jquery | v3.6.0 | https://jquery.com/ |
| chartjs | v3.9.1 | https://www.chartjs.org/ |
| echarts | v5.4.0 | https://echarts.apache.org/en/index.html |
| Perfect-scrollbar | v1.4.0 | https://github.com/mdbootstrap/perfect-scrollbar |
| Datatables | v5.0 | https://datatables.net/ |
| Datepicker | v1.12.0 | https://jqueryui.com/datepicker/ |
| Flotchart | v1.1 | https://www.flotcharts.org/plugins/ |
| Fullcalendar | v5.11.3 | https://fullcalendar.io/ |
| ion.rangeSlider | v2.2.0 | http://ionden.com/a/plugins/ion.rangeSlider/index.html |
| jquery-countdown | v2.1.0 | http://keith-wood.name/countdown.html |
| jquery-inputmask | v1.9.0 | https://robinherbots.github.io/Inputmask/ |
| Sweet-alert | v1.3.3 | https://lipis.github.io/bootstrap-sweetalert/ |
| morris | v0.5.0 | http://morrisjs.github.io/morris.js/ |
| select2 | v4.0.5 | https://select2.org/ |
| wysiwyag | https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/ | |
| summernote editor | https://summernote.org/ |
Refer following links for usage:
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/v4.7.0/icons/ |
| Material Design Icons | https://materialdesignicons.com/ |
| Simple Line Icons | https://simplelineicons.github.io/ |
| Feather Icons | https://feathericons.com/ |
| Ionic Icons | https://ionicons.com/ |
| Pe7 Icons | https://themes-pixeden.com/font-demos/7-stroke/ |
| Themify Icons | https://themify.me/themify-icons |
| Typicons Icons | https://iconify.design/icon-sets/typcn/ |
| Weather Icons | https://erikflowers.github.io/weather-icons/ |
| Material Icons | https://fonts.google.com/icons?selected=Material+Icons |