Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you best support. If you have any queries please reach us through live chat or email : sprukotechnologies@gmail.com
If You Love Our Template Design please don't forget to rate it, Thank you.
Noa - ASP.Net Core6 & Mvc5 Bootstrap 5 Admin & Dashboard Template, with Noa template format, it's very easy to create a presence and grab someone's attention around the web page Because the template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.
Noa is a ASP.Net Core6 & Mvc5 Bootstrap Admin & Dashboard Template comes with modern and minimal design. It is fully responsive, flexible, and user-friendly. noa admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 120+ CSHTML Pages, 50+ Plugins and more UI elements. User no need to do hard work for this template customization. We already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. Noa admin template comes with 100% premium quality design. Noa template designed by using HTML5, CSS3, Jquery, After Purchasing Noa template you will get CSHTML, CSS, Scss and JS files.
Noa has very clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with an awesome unique design also we ensure you can easily design admin template.
Noa comes with fully responsive layouts for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Noa, you will be able to get all the future updates for free.
Vertical-menu | Horizontal click menu | Horizontal hover menu | RTL ready |
120+ CSHTML Pages | Bootstrap 5 Responsive Framework | Well Commented Code | 24 * 7 Professional Company Support |
Regular Updates | 50+ Plugins | 5 types of Charts | Select2 |
About us | Blog | File Manager | Gallery |
Project Pages | Ecommerce Pages | Settings Page | Blog Details |
Calendar | Mail Inbox | 10 Types of Icon sets | File upload |
Message Chat | Tickets | Month & Date & Year Range Pickers | FormAdvanced Elements |
Data Tables | Lockscreen Page | Error Page | User Profile |
Task Pages | 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 create ASP.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 aspnetcoreapp
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
├── Model
├── obj
├── Properties
├── views
├── wwwroot
├── appsettings.Development.json
├── appsettings.json
├── gulpfile.js
├── noa.csproj
├── noa.csproj.user
├── noa.sin
├── package-lock.json
├── package.json
└── program.cs
├── bin/
| └── debug/
| └── net6.0
├── obj
├── Pages
├── Properties
├── wwwroot
├── appsettings.Development.json
├── appsettings.json
├── gulpfile.js
├── noa.sln
├── noa.csproj
├── package-lock.json
├── package.json
└── program.cs
" cd /path-to-your-project "
.dotnet watch run
to get ASP.Net Core6 & Mvc5 development server.noa.sln
inside the project folder.F5
to get ASP.Net Core6 & Mvc5 development server.Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows to easily compilation of scss to css. You can read it more about it here.
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 files into css:
gulp
Here we provided package.json and gulpfile.js files in your project, you just need to run npm install
in your terminal in your project root path.
After compilation of download, you can compile your SCSS files into CSS files by following below procedure.
Command | Description |
---|---|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your sass files and folders etc. The development server is accessible at http://localhost:8000. |
gulp watch
|
In Noa template gulp watch command is used for, whatever the changes made in scss files, will watch and compiled into css files.
|
gulp skins
|
In this template gulp skins command is for what ever changes are made in skin-modes.scss file will be compiled and the changes will update in skin-modes.css file in css folder.
|
├── bin/
| └── Debug/
| └── net6.0/
| ├── appsettings.Development.json/
| ├── appsettings.json/
| ├── noa.deps.json/
| ├── noa.dll
| ├── noa.exe
| ├── noa.pdp
| ├── noa.runtimeconfig.json
| └── noa.staticwebassets.runtime.json
├── Controllers
| └── 124 Controller.cs (files)
├── Modals
| └── ErrorViewModel.cs
├── obj
| ├── Debug
| ├── noa.csproj.nuget.dgspec.json
| ├── noa.csproj.nuget.g.props
| ├── noa.csproj.nuget.g.targets
| ├── project.assets.json
| ├── project.nuget.cache
| └── staticwebassets.pack.sentinel
├── Properties
| └── launchSettings.json
├── Views
| ├── Shared__
| | ├── _Layout.cshtml
| | ├── _Layout1.cshtml
| | ├── _Layout2.cshtml
| | ├── _Layout3.cshtml
| | ├── _Layoutlandingpage.cshtml
| | ├── _ValidationScriptsPartial.cshtml
| | ├── Error.cshtml
| | └── layouts
| | ├── _landing
| | | ├── _app-header.cshtml
| | | ├── _app-header1.cshtml
| | | ├── _app-sidebar.cshtml
| | | ├── _app-sidebar1.cshtml
| | | ├── _switcher.cshtml
| | | └── _landing
| | |
| | ├── _app-header.cshtml
| | ├── _app-headericon.cshtml
| | ├── _app-sidebar.cshtml
| | ├── _footer.cshtml
| | ├── _footercustom.cshtml
| | ├── _switcher.cshtml
| | ├── _switchercustom.cshtml
| | └── _selecor-model.cshtml
| ├── 124 Folders
| | └── 124 .cshtml (Files)
| ├── _ViewImports.cshtml
| └── _ViewStart.cshtml
├── wwwroot
| ├── assets
| | ├── css
| | ├── iconfonts
| | ├── images
| | ├── js
| | ├── landing
| | ├── plugins
| | ├── scss
| | └── switcher
| ├── css
| | └── site.css
| ├── js
| | └── site.js
| └── lib
| ├── bootstrap
| ├── jquery
| ├── jquery-validation
| └── jquery-validation-unobtrusive
├── appsettings.Development.json
├── appsettings.json
├── gulpfile.js
├── noa.csproj
├── noa.csproj.user
├── noa.sin
├── package-lock.json
├── package.json
└── Program.cs
├── bin/
| └── Debug
| └── net6.0
| ├── appsettings.Development.json
| ├── appsettings.json
| ├── noa-dotnetcore.deps.json
| ├── noa-dotnetcore.dll
| ├── noa-dotnetcore.exe
| ├── noa-dotnetcore.pdb
| ├── noa-dotnetcore.runtimeconfig.json
| └── noa-dotnetcore.staticwebassets.runtime.json
├── obj
| ├── Debug
| ├── project.assets.json
| ├── project.nuget.cache
| ├── noa-dotnetcore.csproj.nuget.dgspec.json
| ├── noa-dotnetcore.csproj.nuget.g.props
| ├── noa-dotnetcore.csproj.nuget.g.targets
| └── staticwebassets.pack.sentinel
├── Pages
| ├── Shared__
| | ├── _Layout.cshtml
| | ├── _Layout.cshtml.css
| | ├── _Layout1.cshtml
| | ├── _Layout2.cshtml
| | ├── _Layout3.cshtml
| | ├── _Layoutlandingpage.cshtml
| | ├── _ValidationScriptsPartial.cshtml
| | └── layouts
| | ├── landing
| | | ├──_app-header.cshtml
| | | ├──_app-header1.cshtml
| | | ├──_app-sidebar.cshtml
| | | ├──_app-sidebar1.cshtml
| | | └──_switcher.cshtml
| | |
| | ├── _app-header.cshtml
| | ├── _app-header1.cshtml
| | ├── _app-sidebar.cshtml
| | ├── _custom-switcher.cshtml
| | ├── _footer.cshtml
| | ├── _model.cshtml
| | ├── _sidebar-right.cshtml
| | └── _switcher.cshtml
| ├── 122 Folders
| | ├── 122 .cshtml (Files)
| | └── 122 .cshtml.cs (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
| | ├── colors
| | ├── css
| | ├── iconfonts
| | ├── images
| | ├── js
| | ├── plugins
| | ├── scss
| | └── switcher
| ├── css
| | └── site.css
| ├── js
| | └── site.js
| └── lib
| | ├── bootstrap
| | ├── jquery
| | ├── jquery-validation
| | └── jquery-validation-unobtrusive
| └── favicon.ion
├── appsettings.Development.json
├── appsettings.json
├── gulpfile.js
├── package-lock.json
├── package.json
├── Program.cs
├── noa.csproj
└── noa.sln
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="app sidebar-mini ltr">
<partial name="~/Views/Shared/layouts/_switcher.cshtml" />
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 change custom.js
link tocustom1.js
link as shown below.
Before:
<!-- Custom js -->
<script src="~/assets/js/custom.js"></script>
After:
<!-- Custom js -->
<script src="~/assets/js/custom1.js"></script>
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-headericon.cshtml
given below.
Before:
<!-- app header code -->
<partial name="~/Views/Shared/layouts/_app-header.cshtml" />
<!-- End app header Code -->
After:
<!-- app-headericon Code -->
<partial name="~/Views/Shared/layouts/_app-headericon.cshtml" />
<!-- End app-headericon 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 -->
<partial name="~/Views/Shared/layouts/landing/_switcher.cshtml" />
<!-- End Switcher -->
EX:
<body class="ltr app horizontal landing-page">
<!-- Switcher -->
<partial name="~/Views/Shared/layouts/landing/_switcher.cshtml" />
<!-- End Switcher -->
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 -->
<partial name="~/Views/Shared/layouts/landing/_app-header.cshtml" />
<!-- APP-HEADER CLOSED -->
After :
<!-- APP-HEADER -->
<partial name="~/Views/Shared/layouts/landing/_app-header1.cshtml" />
<!-- APP-HEADER CLOSED -->
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 -->
<partial name="~/Views/Shared/layouts/landing/_app-sidebar.cshtml" />
<!-- APP-SIDEBAR CLOSED -->
After :
<!-- APP-SIDEBAR -->
<partial name="~/Views/Shared/layouts/landing/_app-sidebar1.cshtml" />
<!-- APP-SIDEBAR CLOSED -->
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"/>
NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).
Go to root path: Views/Shared/Layout1.cshtml
open "_Layout1.cshtml"
in that file, below the body tag
, include the switcher path given below.
Switcher path:
<partial name="~/Views/Shared/layouts/_switchercustom.cshtml" />
EX:
<body class="ltr login-img">
<partial name="~/Views/Shared/layouts/_switchercustom.cshtml" />
Go to root path: Views/Shared/Layout1.cshtml
open "_Layout1.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/Layout1.cshtml
open "_Layout1.cshtml"
file and then change link tocustom1.js
link given below.
Before:
<!-- Custom js -->
<script src="~/assets/js/custom.js"></script>
After:
<!-- Custom js -->
<script src="~/assets/js/custom1.js"></script>
Go to root path: Views/Shared/Layout1.cshtml
open "_Layout1.cshtml"
file then add switcher js
link given below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Views/Shared/Layout1.cshtml
open "_Layout1.cshtml"
file in the page section add the "switcher-icon code" as shown below the body
.
Add the Switcher-icon code below the body tag:
<body class="ltr login-img">
<!-- switcher-icon code -->
<div class="demo-icon nav-link icon fe-spin">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
<path d="M11.5,7.9c-2.3,0-4,1.9-4,4.2s1.9,4,4.2,4c2.2,0,4-1.9,4-4.1c0,0,0-0.1,0-0.1C15.6,9.7,13.7,7.9,11.5,7.9z M14.6,12.1c0,1.7-1.5,3-3.2,3c-1.7,0-3-1.5-3-3.2c0-1.7,1.5-3,3.2-3C13.3,8.9,14.7,10.3,14.6,12.1C14.6,12,14.6,12.1,14.6,12.1z M20,13.1c-0.5-0.6-0.5-1.5,0-2.1l1.4-1.5c0.1-0.2,0.2-0.4,0.1-0.6l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.2l-2,0.4c-0.8,0.2-1.6-0.3-1.9-1.1l-0.6-1.9C14.2,2.1,14,2,13.8,2H9.5C9.3,2,9.1,2.1,9,2.3L8.4,4.3C8.1,5,7.3,5.5,6.5,5.3l-2-0.4C4.3,4.9,4.1,5,4,5.2L1.9,8.8C1.8,9,1.8,9.2,2,9.4l1.4,1.5c0.5,0.6,0.5,1.5,0,2.1L2,14.6c-0.1,0.2-0.2,0.4-0.1,0.6L4,18.8c0.1,0.2,0.3,0.3,0.5,0.2l2-0.4c0.8-0.2,1.6,0.3,1.9,1.1L9,21.7C9.1,21.9,9.3,22,9.5,22h4.2c0.2,0,0.4-0.1,0.5-0.3l0.6-1.9c0.3-0.8,1.1-1.2,1.9-1.1l2,0.4c0.2,0,0.4-0.1,0.5-0.2l2.1-3.7c0.1-0.2,0.1-0.4-0.1-0.6L20,13.1z M18.6,18l-1.6-0.3c-1.3-0.3-2.6,0.5-3,1.7L13.4,21H9.9l-0.5-1.6c-0.4-1.3-1.7-2-3-1.7L4.7,18l-1.8-3l1.1-1.3c0.9-1,0.9-2.5,0-3.5L2.9,9l1.8-3l1.6,0.3c1.3,0.3,2.6-0.5,3-1.7L9.9,3h3.5l0.5,1.6c0.4,1.3,1.7,2,3,1.7L18.6,6l1.8,3l-1.1,1.3c-0.9,1-0.9,2.5,0,3.5l1.1,1.3L18.6,18z" />
</svg>
</div>
<!-- End switcher-icon code -->
Go to root path: Views/Shared/Layout2.cshtml
open "_Layout2.cshtml"
in that file, below the body tag
, include the switcher path given below.
Switcher path:
<partial name="~/Views/Shared/layouts/_switchercustom.cshtml" />
EX:
<body class="ltr error-bg">
<partial name="~/Views/Shared/layouts/_switchercustom.cshtml" />
Go to root path: Views/Shared/Layout2.cshtml
open "_Layout2.cshtml"
file in the page section add the "switcher-icon code" as shown below the body
.
Add the Switcher-icon code below the body tag:
<body class="ltr error-bg">
<!-- switcher-icon code -->
<div class="demo-icon nav-link icon fe-spin">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
<path d="M11.5,7.9c-2.3,0-4,1.9-4,4.2s1.9,4,4.2,4c2.2,0,4-1.9,4-4.1c0,0,0-0.1,0-0.1C15.6,9.7,13.7,7.9,11.5,7.9z M14.6,12.1c0,1.7-1.5,3-3.2,3c-1.7,0-3-1.5-3-3.2c0-1.7,1.5-3,3.2-3C13.3,8.9,14.7,10.3,14.6,12.1C14.6,12,14.6,12.1,14.6,12.1z M20,13.1c-0.5-0.6-0.5-1.5,0-2.1l1.4-1.5c0.1-0.2,0.2-0.4,0.1-0.6l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.2l-2,0.4c-0.8,0.2-1.6-0.3-1.9-1.1l-0.6-1.9C14.2,2.1,14,2,13.8,2H9.5C9.3,2,9.1,2.1,9,2.3L8.4,4.3C8.1,5,7.3,5.5,6.5,5.3l-2-0.4C4.3,4.9,4.1,5,4,5.2L1.9,8.8C1.8,9,1.8,9.2,2,9.4l1.4,1.5c0.5,0.6,0.5,1.5,0,2.1L2,14.6c-0.1,0.2-0.2,0.4-0.1,0.6L4,18.8c0.1,0.2,0.3,0.3,0.5,0.2l2-0.4c0.8-0.2,1.6,0.3,1.9,1.1L9,21.7C9.1,21.9,9.3,22,9.5,22h4.2c0.2,0,0.4-0.1,0.5-0.3l0.6-1.9c0.3-0.8,1.1-1.2,1.9-1.1l2,0.4c0.2,0,0.4-0.1,0.5-0.2l2.1-3.7c0.1-0.2,0.1-0.4-0.1-0.6L20,13.1z M18.6,18l-1.6-0.3c-1.3-0.3-2.6,0.5-3,1.7L13.4,21H9.9l-0.5-1.6c-0.4-1.3-1.7-2-3-1.7L4.7,18l-1.8-3l1.1-1.3c0.9-1,0.9-2.5,0-3.5L2.9,9l1.8-3l1.6,0.3c1.3,0.3,2.6-0.5,3-1.7L9.9,3h3.5l0.5,1.6c0.4,1.3,1.7,2,3,1.7L18.6,6l1.8,3l-1.1,1.3c-0.9,1-0.9,2.5,0,3.5l1.1,1.3L18.6,18z" />
</svg>
</div>
<!-- End switcher-icon code -->
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="app sidebar-mini ltr">
<partial name="~/Pages/Shared/layouts/_switcher.cshtml" />
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 change custom.js
link tocustom1.js
link as shown below.
Before:
<!-- Custom js -->
<script src="~/assets/js/custom.js"></script>
After:
<!-- Custom js -->
<script src="~/assets/js/custom1.js"></script>
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-headericon.cshtml
given below.
Before:
<!-- app header code -->
<partial name="~/Pages/Shared/layouts/_app-header.cshtml" />
<!-- End app header code -->
After:
<!-- app app-headericon code -->
<partial name="~/Pages/Shared/layouts/_app-headericon.cshtml" />
<!-- End app-headericon code -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml
open _Layoutlandingpage.cshtml
in that file, below the body tag
, include the switcher path given below.
Switcher path:
<!-- Switcher -->
<partial name="~/Pages/Shared/layouts/landing/_switcher.cshtml" />
<!-- End Switcher -->
EX:
<body class="ltr app horizontal landing-page">
<!-- Switcher -->
<partial name="~/Pages/Shared/layouts/landing/_switcher.cshtml" />
<!-- End Switcher -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml
open "_Layoutlandingpage.cshtml"
file and then chenge _app-header.cshtml
to _app-header1.cshtml
given below.
change header.html.twig :
Before :
<!-- APP-HEADER -->
<partial name="~/Pages/Shared/layouts/landing/_app-header.cshtml" />
<!--/ APP-HEADER CLOSED -->
After :
<!-- APP-HEADER -->
<partial name="~/Pages/Shared/layouts/landing/_app-header1.cshtml" />
<!-- APP-HEADER CLOSED -->
Go to root path: Pages/Shared/_Layoutlandingpage.cshtml
open "_Layoutlandingpage.cshtml"
file and then chenge _app-sidebar.cshtml
to _app-sidebar1.cshtml
given below.
change sidebar.html.twig :
Before :
<!-- APP-SIDEBAR -->
<partial name="~/Pages/Shared/layouts/landing/_app-sidebar.cshtml" />
<!-- APP-SIDEBAR CLOSED -->
After :
<!-- APP-SIDEBAR -->
<partial name="~/Pages/Shared/layouts/landing/_app-sidebar1.cshtml" />
<!-- APP-SIDEBAR CLOSED -->
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"/>
NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).
Go to root path: Pages/Shared/_Layout1.cshtml
open "_Layout1.cshtml"
in that file, below the body tag
, include the switcher path given below.
Switcher path:
<partial name="~/Pages/Shared/layouts/_custom-switcher.cshtml" />
EX:
<body class="ltr login-img">
<partial name="~/Pages/Shared/layouts/_custom-switcher.cshtml" />
Go to root path: Pages/Shared/_Layout1.cshtml
open "_Layout1.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/_Layout1.cshtml
open "_Layout1.cshtml"
file and then change link tocustom1.js
link given below.
Before:
<!-- Custom js -->
<script src="~/assets/js/custom.js"></script>
After:
<!-- Custom js -->
<script src="~/assets/js/custom1.js"></script>
Go to root path: Pages/Shared/_Layout1.cshtml
open "_Layout1.cshtml"
file then add switcher js
link given below.
Add switcher js:
<!-- Switcher js -->
<script src="~/assets/switcher/js/switcher.js"></script>
Go to root path: Pages/Shared/_Layout1.cshtml
open "_Layout1.cshtml"
file in the page section add the "switcher-icon code" as shown below the body
.
Add the Switcher-icon code below the body tag:
<body class="login-img">
<!-- switcher-icon code -->
<div class="demo-icon nav-link icon fe-spin">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
<path d="M11.5,7.9c-2.3,0-4,1.9-4,4.2s1.9,4,4.2,4c2.2,0,4-1.9,4-4.1c0,0,0-0.1,0-0.1C15.6,9.7,13.7,7.9,11.5,7.9z M14.6,12.1c0,1.7-1.5,3-3.2,3c-1.7,0-3-1.5-3-3.2c0-1.7,1.5-3,3.2-3C13.3,8.9,14.7,10.3,14.6,12.1C14.6,12,14.6,12.1,14.6,12.1z M20,13.1c-0.5-0.6-0.5-1.5,0-2.1l1.4-1.5c0.1-0.2,0.2-0.4,0.1-0.6l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.2l-2,0.4c-0.8,0.2-1.6-0.3-1.9-1.1l-0.6-1.9C14.2,2.1,14,2,13.8,2H9.5C9.3,2,9.1,2.1,9,2.3L8.4,4.3C8.1,5,7.3,5.5,6.5,5.3l-2-0.4C4.3,4.9,4.1,5,4,5.2L1.9,8.8C1.8,9,1.8,9.2,2,9.4l1.4,1.5c0.5,0.6,0.5,1.5,0,2.1L2,14.6c-0.1,0.2-0.2,0.4-0.1,0.6L4,18.8c0.1,0.2,0.3,0.3,0.5,0.2l2-0.4c0.8-0.2,1.6,0.3,1.9,1.1L9,21.7C9.1,21.9,9.3,22,9.5,22h4.2c0.2,0,0.4-0.1,0.5-0.3l0.6-1.9c0.3-0.8,1.1-1.2,1.9-1.1l2,0.4c0.2,0,0.4-0.1,0.5-0.2l2.1-3.7c0.1-0.2,0.1-0.4-0.1-0.6L20,13.1z M18.6,18l-1.6-0.3c-1.3-0.3-2.6,0.5-3,1.7L13.4,21H9.9l-0.5-1.6c-0.4-1.3-1.7-2-3-1.7L4.7,18l-1.8-3l1.1-1.3c0.9-1,0.9-2.5,0-3.5L2.9,9l1.8-3l1.6,0.3c1.3,0.3,2.6-0.5,3-1.7L9.9,3h3.5l0.5,1.6c0.4,1.3,1.7,2,3,1.7L18.6,6l1.8,3l-1.1,1.3c-0.9,1-0.9,2.5,0,3.5l1.1,1.3L18.6,18z" />
</svg>
</div>
<!-- End switcher-icon code -->
Go to root path: Pages/Shared/_Layout2.cshtml
open "_Layout2.cshtml"
in that file, below the body tag
, include the switcher path given below.
Switcher path:
<partial name="~/Pages/Shared/layouts/_custom-switcher.cshtml" />
EX:
<body class="ltr error-bg">
<partial name="~/Pages/Shared/layouts/_custom-switcher.cshtml" />
Go to root path: Pages/Shared/_Layout2.cshtml
open "_Layout2.cshtml"
file in the page section add the "switcher-icon code" as shown below the body
.
Add the Switcher-icon code below the body tag:
<body class="ltr error-bg">
<!-- switcher-icon code -->
<div class="demo-icon nav-link icon fe-spin">
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" viewBox="0 0 24 24">
<path d="M11.5,7.9c-2.3,0-4,1.9-4,4.2s1.9,4,4.2,4c2.2,0,4-1.9,4-4.1c0,0,0-0.1,0-0.1C15.6,9.7,13.7,7.9,11.5,7.9z M14.6,12.1c0,1.7-1.5,3-3.2,3c-1.7,0-3-1.5-3-3.2c0-1.7,1.5-3,3.2-3C13.3,8.9,14.7,10.3,14.6,12.1C14.6,12,14.6,12.1,14.6,12.1z M20,13.1c-0.5-0.6-0.5-1.5,0-2.1l1.4-1.5c0.1-0.2,0.2-0.4,0.1-0.6l-2.1-3.7c-0.1-0.2-0.3-0.3-0.5-0.2l-2,0.4c-0.8,0.2-1.6-0.3-1.9-1.1l-0.6-1.9C14.2,2.1,14,2,13.8,2H9.5C9.3,2,9.1,2.1,9,2.3L8.4,4.3C8.1,5,7.3,5.5,6.5,5.3l-2-0.4C4.3,4.9,4.1,5,4,5.2L1.9,8.8C1.8,9,1.8,9.2,2,9.4l1.4,1.5c0.5,0.6,0.5,1.5,0,2.1L2,14.6c-0.1,0.2-0.2,0.4-0.1,0.6L4,18.8c0.1,0.2,0.3,0.3,0.5,0.2l2-0.4c0.8-0.2,1.6,0.3,1.9,1.1L9,21.7C9.1,21.9,9.3,22,9.5,22h4.2c0.2,0,0.4-0.1,0.5-0.3l0.6-1.9c0.3-0.8,1.1-1.2,1.9-1.1l2,0.4c0.2,0,0.4-0.1,0.5-0.2l2.1-3.7c0.1-0.2,0.1-0.4-0.1-0.6L20,13.1z M18.6,18l-1.6-0.3c-1.3-0.3-2.6,0.5-3,1.7L13.4,21H9.9l-0.5-1.6c-0.4-1.3-1.7-2-3-1.7L4.7,18l-1.8-3l1.1-1.3c0.9-1,0.9-2.5,0-3.5L2.9,9l1.8-3l1.6,0.3c1.3,0.3,2.6-0.5,3-1.7L9.9,3h3.5l0.5,1.6c0.4,1.3,1.7,2,3,1.7L18.6,6l1.8,3l-1.1,1.3c-0.9,1-0.9,2.5,0,3.5l1.1,1.3L18.6,18z" />
</svg>
</div>
<!-- End switcher-icon code -->
This process is only for change colors of a new chart according to the theme color.
(myChart())
and gave it an id i.e., chartId
for my chart in empty.cshtml page
<p>EXAMPLE FOR CHART 1 :</p>
function myChart1() { -----------
----chart1 data----
#chartId1
}
<p>EXAMPLE FOR CHART 2 :</p>
function myChart2() { -----------
----chart2 data----
#chartId2
}
Open themeColors.js (root path: wwwroot/assets/js/themeColors.js)
and add your chart id and function inside of the function names()
function of (// chart colors) section as shown below.
path: "wwwroot/assets/js/index.js"
. Here index1.js file is used for index.cshtml page
color: [ myVarVal]
NOTE: By default the switcher is enabled in your template, if you want to use any of the features specified in FAQ'S
, then you must remove Switcher from your template i.e., The two styles or features will not work at a time.
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 _fonts.scss
Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");And add the Your Selected font-family in _bootstrap-styles.scss(wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss)
Example:
body {
margin: 0;
font-family: "Roboto", sans-serif;
font-size: 0.8375rem;
font-weight: 400;
line-height: 1.5;
color: $default-color;
text-align: left;
background-color: $background;
}
NOTE : After changnig or modifying the content in SCSS
files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
NOTE :Sidemenu & Header Icons used in Noa are fromhttps://iconscout.com/unicons
(Thin Line Icons).
Go to Root Path: Views/Shared/layouts/
and open _app-sidebar.cshtml
. In that file you can change sidemenu icon by replacing svg code of selected icon with svg code of required icon, and then add this class class="side-menu__icon"
to that svg icon
Go to Root Path: Views/Shared/layouts/
and open app-sidebar.cshtml
. In that file you can change Header icon by simply replacing svg code of selected icons with svg code of your required icons.
NOTE :Sidemenu & Header Icons used in Noa are fromhttps://iconscout.com/unicons
(Thin Line Icons).
Go to Root Path: Pages/Shared/layouts/
and open _app-sidebar.cshtml
. In that file you can change sidemenu icon by replacing svg code of selected icon with svg code of required icon, and then add this class class="side-menu__icon"
to that svg icon
Go to Root Path: Pages/Shared/layouts/
and open app-sidebar.cshtml
. In that file you can change Header icon by simply replacing svg code of selected icons with svg code of your required icons.
Go To "wwwroot/assets/images/brand" folder and replace logo with new logo within in given logo size.
NOTE : Please do not increase logo size, you just need to replace logo within the given logo size, otherwise the logo will not fit in the particular place and it will disturbs the template design.
Go To _bootstrap-styles.scss present in Root Path: (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )
You will find --primary-bg-color: #8FBD56;
, there you can simply change color code to change primary color.
Example:
You can also change the colors of primary-bg-hover:#5cd3b9;
& --primary-bg-border:#38cab3;
NOTE : After changnig or modifying the content in SCSS
files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
Go To _bootstrap-styles.scss (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )
You will find --dark-body: #2c2f3e;
, there you can simply change color code to change dark background color.
Example:
NOTE : After changnig or modifying the content in SCSS
files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
Open custom.js file present in Root path : (wwwroot/assets/js/custom.js)
and then remove comments for RTL
as shown in below
/* RTL STYLE START */
// $('body').addClass('rtl');
/* RTL STYLE END */
RTL
as shown below
/* RTL STYLE START */
$('body').addClass('rtl');
/* RTL STYLE END */
Open custom.js file present in Root path : path:(wwwroot/assets/js/)
and then remove comments for Dark-Mode
as shown in below.
/* DARK MODE START */
// $('body').addClass('dark-mode');
/* DARK MODE END */
Dark-Mode
as shown below.
/* DARK MODE START */
$('body').addClass('dark-mode');
/* DARK MODE END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for bg-img1
as shown in below
/* BG-IMAGE1 STYLE START */
// $('body').addClass('bg-img1');
// $('body').addClass('dark-mode');
/* BG-IMAGE1 STYLE END */
Background image
as shown below.
/* BG-IMAGE1 STYLE START */
$('body').addClass('bg-img1');
$('body').addClass('dark-mode');
/* BG-IMAGE1 STYLE END */
NOTE : Similarly you can follow the same process for bg-img2, bg-img3, and bg-img4.
If you want to change the background images then go to Root path : "wwwroot/assets/img/media" folder and replace bg-img1 image with new image with same name and within the given image size.
NOTE : Please do not increase image size, just replace with your image within the given image size, otherwise the image will not fit in particular place and it will disturbs the template design.
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for header-light
as shown in below
/* LIGHT HEADER START */
// $('body').addClass('header-light');
/* LIGHT HEADER END */
header-light
as shown below.
/* LIGHT HEADER START */
$('body').addClass('header-light');
/* LIGHT HEADER END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for color-header
as shown in below.
/* COLOR HEADER START */
// $('body').addClass('color-header');
/* COLOR HEADER END */
color-header
as shown below.
/* COLOR HEADER START */
$('body').addClass('color-header');
/* COLOR HEADER END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for dark-header
as shown in below
/* DARK HEADER START */
// $('body').addClass('dark-header');
/* DARK HEADER END */
dark-header
as shown below.
/* DARK HEADER START */
$('body').addClass('dark-header');
/* DARK HEADER END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for gradient-header
as shown in below
/* GRADIENT HEADER START */
// $('body').addClass('gradient-header');
/* GRADIENT HEADER END */
gradient-header
as shown below.
/* GRADIENT HEADER START */
$('body').addClass('gradient-header');
/* GRADIENT HEADER END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for light-menu
as shown in below.
/* LIGHT LEFTMENU START */
// $('body').addClass('light-menu');
/* LIGHT LEFTMENU END */
light-menu
as shown below.
/* LIGHT LEFTMENU START */
$('body').addClass('light-menu');
/* LIGHT LEFTMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for color-menu
as shown in below.
/* COLOR LEFTMENU START */
// $('body').addClass('color-menu');
/* COLOR LEFTMENU END */
color-menu
as shown below.
/* COLOR LEFTMENU START */
$('body').addClass('color-menu');
/* COLOR LEFTMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for dark-menu
as shown in below.
/* DARK LEFTMENU START */
// $('body').addClass('dark-menu');
/* DARK LEFTMENU END */
dark-menu
as shown below.
/* DARK LEFTMENU START */
$('body').addClass('dark-menu');
/* DARK LEFTMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for gradient-menu
as shown in below
/* GRADIENT LEFTMENU START */
// $('body').addClass('gradient-menu');
/* GRADIENT LEFTMENU END */
gradient-menu
as shown below.
/* GRADIENT LEFTMENU START */
$('body').addClass('gradient-menu');
/* GRADIENT LEFTMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for layout-boxed
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');
/* BOXED LAYOUT END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for scrollable-layout
as shown in below.
/* SCROLLABLE LAYOUT START */
// $('body').addClass('scrollable-layout');
/* SCROLLABLE LAYOUT END */
scrollable-layout
as shown below.
/* SCROLLABLE LAYOUT START */
$('body').addClass('scrollable-layout');
/* SCROLLABLE LAYOUT END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for sidemenu-icontext
as shown in below.
/* SIDEMENU ICONTEXT START */
// $('body').addClass('icontext-menu');
// $('body').addClass('sidenav-toggled');
// if((document.querySelector('body').classList.contains('login-img')) ){
// return;
// }
// else if((document.querySelector('body').classList.contains('error-bg'))){
// return;
// }
// else{
// icontext();
// }
/* SIDEMENU ICONTEXT END */
sidemenu-icontext
as shown below.
/* SIDEMENU ICONTEXT START */
$('body').addClass('icontext-menu');
$('body').addClass('sidenav-toggled');
if((document.querySelector('body').classList.contains('login-img')) ){
return;
}
else if((document.querySelector('body').classList.contains('error-bg'))){
return;
}
else{
icontext();
}
/* SIDEMENU ICONTEXT END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Closed-Sidemenu
as shown in below.
/* CLOSED SIDEMENU START */
// $('body').addClass('closed-leftmenu');
// $('body').addClass('sidenav-toggled');
/* CLOSED SIDEMENU END */
Closed Sidemenu
as shown below.
/* CLOSED SIDEMENU START */
$('body').addClass('closed-leftmenu');
$('body').addClass('sidenav-toggled');
/* CLOSED SIDEMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Icon Overlay
as shown in below.
/* SIDEMENU ICON OVERLAY START */
// $('body').addClass('icon-overlay');
// $('body').addClass('sidenav-toggled');
// if((document.querySelector('body').classList.contains('login-img')) ){
// return;
// }
// else if((document.querySelector('body').classList.contains('error-bg'))){
// return;
// }
// else{
// hovermenu();
// }
/* SIDEMENU ICON OVERLAY END */
Icon Overlay
as shown below.
/* SIDEMENU ICON OVERLAY START */
$('body').addClass('icon-overlay');
$('body').addClass('sidenav-toggled');
if((document.querySelector('body').classList.contains('login-img')) ){
return;
}
else if((document.querySelector('body').classList.contains('error-bg'))){
return;
}
else{
hovermenu();
}
/* SIDEMENU ICON OVERLAY END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Hover Submenu
as shown in below.
/* HOVER SUBMENU START */
// $('body').addClass('hover-submenu');
// $('body').addClass('sidenav-toggled');
// if((document.querySelector('body').classList.contains('login-img')) ){
// return;
// }
// else if((document.querySelector('body').classList.contains('error-bg'))){
// return;
// }
// else{
// hovermenu();
// }
/* HOVER SUBMENU END */
Hover Submenu
as shown below.
/* HOVER SUBMENU START */
$('body').addClass('hover-submenu');
$('body').addClass('sidenav-toggled');
if((document.querySelector('body').classList.contains('login-img')) ){
return;
}
else if((document.querySelector('body').classList.contains('error-bg'))){
return;
}
else{
hovermenu();
}
/* HOVER SUBMENU END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Hover Submenu style1
as shown in below.
/* HOVER SUBMENU STYLE-1 START */
// $('body').addClass('hover-submenu1');
// $('body').addClass('sidenav-toggled');
// if((document.querySelector('body').classList.contains('login-img')) ){
// return;
// }
// else if((document.querySelector('body').classList.contains('error-bg'))){
// return;
// }
// else{
// hovermenu();
// }
/* HOVER SUBMENU STYLE-1 END */
Hover Submenu Style1
as shown below.
/* HOVER SUBMENU STYLE-1 START */
$('body').addClass('hover-submenu1');
$('body').addClass('sidenav-toggled');
if((document.querySelector('body').classList.contains('login-img')) ){
return;
}
else if((document.querySelector('body').classList.contains('error-bg'))){
return;
}
else{
hovermenu();
}
/* HOVER SUBMENU STYLE-1 END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Horizontal layout
as shown in below.
/* HORIZONTAL MENU STYLE START */
// $('body').addClass('horizontal');
/* HORIZONTAL MENU STYLE END */
Horizontal layout
as shown below.
/* HORIZONTAL MENU STYLE START */
$('body').addClass('horizontal');
/* HORIZONTAL MENU STYLE END */
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then remove comments for Horizontal Hover layout
as shown in below.
/* HORIZONTAL HOVER MENU START */
// $('body').addClass('horizontal-hover');
/* HORIZONTAL HOVER MENU END */
Horizontal Hover layout
as shown below.
/* HORIZONTAL HOVER MENU START */
$('body').addClass('horizontal-hover');
/* HORIZONTAL HOVER MENU END */
By default nowrap
style is given for Horizontal and Horizontal-hover layouts, if you want to enable wrap
style for Horizontal or Horizontal-hover layouts, then follow the below process.
Open custom.js file present in Root path : (wwwroot/assets/js/)
and then uncomment wrap style code and comment nowrap style as shown below.
NOTE : You will find NO-WRAP and WRAP styles in HORIZONTAL and HORIZONTAL-HOVER STYLES section.
// To enable no-wrap horizontal style
$('#slide-left').removeClass('d-none');
$('#slide-right').removeClass('d-none');
document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'
// To enable wrap horizontal style
// $('#slide-left').addClass('d-none');
// $('#slide-right').addClass('d-none');
// document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Below image shows how No-Wrap style looks like
// To enable no-wrap horizontal style
// $('#slide-left').removeClass('d-none');
// $('#slide-right').removeClass('d-none');
// document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'
// To enable wrap horizontal style
$('#slide-left').addClass('d-none');
$('#slide-right').addClass('d-none');
document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Below image shows how Wrap style looks like
NOTE : The above example is for Horizontal, Simillarly you can activate wrap style for Horizontal-Hover Layout.
open landing.js path:(wwwroot/assets/js/landing.js)
file go to Dark Theme and remove comments for $('body').addClass('dark-mode');
to enable dark-mode style as shown in below
// Dark Theme
// $('body').addClass('dark-mode');
dark-mode
as shown below
// Dark Theme
$('body').addClass('dark-mode');
open landing.js path:(wwwroot/assets/js/landing.js)
file go to RTL and remove comments for $('body').addClass('rtl');
to enable RTL style as shown in below
// RTL Style
// $('body').addClass('rtl');
RTL
as shown below
// RTL Style
$('body').addClass('rtl');
Open themeColors.js file wwwroot/assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below
function localStorageBackup() {}
To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js wwwroot/assets/js/themeColors.js
, custom.js wwwroot/assets/js/custom.js
and custom1.js wwwroot/assets/js/custom1.js
files.
LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear and localStorageBackup(). Below are the some examples to find out.
localStorage.setItem('noalightMode', true);
localStorage.removeItem('noadarkPrimary')
localStorage.getItem("noaprimaryColor");
localStorageBackup();
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/ |