Please refer Faq's page in documentation itself for queries of customization like colors,rtl ,dark,transparent styles,etc..
Thank you for purchasing our project and being our valued customer. We hope you are happy with your purchase. Feel free to contact us at any time. We have a dedicated team to provide you with the best support. If you have any issues, please contact the Support Help Desk at https://support.spruko.com/.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much!
Valex - ASP.Net Core6 & Mvc5 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! π
Valexβ ASP.Net Core6 & Mvc5 is a Bootstrap Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Valex 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 Valex , you will be able to get free download of all future updates.
| Vertical-menu | Horizontal click menu | Horizontal hover menu | RTL ready |
| 110 Plus CSHTML Pages | Bootstrap 5 Responsive Framework | Well Commented Code | 24 * 7 Professional Company Support |
| Regular Updates | 50+ Plugins | 6 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 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 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/
| βββ net7.0
βββ Controllers/
βββ Models
βββ obj
βββ Properties
βββ Views
βββ wwwroot
βββ appsettings.Development.json
βββ appsettings.json
βββ gulpfile.js
βββ package-lock.json
βββ package.json
βββ program.cs
βββ valex.csproj
βββ valex.csproj.user
βββ valex.sln
βββ bin/
| βββ debug/
| βββ net7.0
βββ obj
βββ Pages
βββ Properties
βββ wwwroot
βββ appsettings.Development.json
βββ appsettings.json
βββ gulpfile.js
βββ package-lock.json
βββ package.json
βββ program.cs
βββ valex.csproj
βββ valex.csproj.user
βββ valex.sln
" cd /path-to-your-project ".dotnet watch run to getASP.Net Core6 & Mvc5 development server.valex.sln inside the project folder.F5 to getASP.Net Core6 & Mvc5 development server.Valex 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/
| βββ net7.0/
| βββ appsettings.Development.json
| βββ appsettings.json/
| βββ package-lock.json
| βββ package.json
| βββ valex.deps.json/
| βββ valex.dll
| βββ valex.exe
| βββ valex.pdp
| βββ valex.runtimeconfig.json
| βββ valex.staticwebassets.runtime.json
βββ Controllers
| βββ 12 Controller.cs (files)
βββ Modals
| βββ ErrorViewModel.cs
βββ obj
| βββ Debug
| βββ project.assets.json
| βββ project.nuget.cache
| βββ valex.csproj.nuget.dgspec.json
| βββ valex.csproj.nuget.g.props
| βββ valex.csproj.nuget.g.targets
βββ Properties
| βββ launchSettings.json
βββ Views/
| βββ Shared__
| | βββ _Layout.cshtml
| | βββ _Layout.cshtml.css
| | βββ _Layout1.cshtml
| | βββ _Layout2.cshtml
| | βββ _Layout3.cshtml
| | βββ _Layoutlandingpage.cshtml
| | βββ _ValidationScriptsPartial.cshtml
| | βββ Error.cshtml
| | βββ layouts
| | βββ landingpage/
| | βββ _app-header.cshtml
| | βββ _app-header1.cshtml
| | βββ _app-sidebar.cshtml
| | βββ _footer.cshtml
| | βββ _modal.cshtml
| | βββ _sidebar-right.cshtml
| | βββ _switcher.cshtml
| βββ 13 Folders
| | βββ 110 + .cshtml (Files)
| βββ _ViewImports.cshtml
| βββ _ViewStart.cshtml
βββ wwwroot/
| βββ assets/
| | βββ css/
| | βββ iconfonts/
| | βββ img/
| | βββ js/
| | βββ landing/
| | βββ 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
βββ valex.csproj
βββ valex.csproj.user
βββ valex.sln
βββ bin/
| βββ Debug
| βββ net7.0
| βββ appsettings.Development.json
| βββ appsettings.json
| βββ package-lock.json
| βββ package.json
| βββ valex.deps.json
| βββ valex.dll
| βββ valex.exe
| βββ valex.pdb
| βββ valex.runtimeconfig.json
| βββ valex.staticwebassets.runtime.json
βββ obj
| βββ Debug
| βββ project.assets.json
| βββ project.nuget.cache
| βββ valex.csproj.nuget.dgspec.json
| βββ valex.csproj.nuget.g.props
| βββ valex.csproj.nuget.g.targets
βββ Pages
| βββ Shared__
| | βββ _Layout.cshtml
| | βββ _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
| | βββ _modal.cshtml
| | βββ _sidebar-right.cshtml
| | βββ _switcher.cshtml
| βββ 122 Folders
| | βββ 12oo .cshtml (Files)
| | βββ 12 .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
| | βββ css
| | βββ iconfonts
| | βββ img
| | βββ 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
βββ valex.csproj
βββ valex.csproj.user
βββ valex.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:
<!-- switcher -->
<partial name="~/Views/Shared/layouts/_switcher.cshtml" />
<!-- End switcher -->
EX:
<body class="ltr main-body app sidebar-mini">
<!-- switcher -->
<partial name="~/Views/Shared/layouts/_switcher.cshtml" />
<!-- End switcher -->
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 -->
<partial name="~/Views/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher -->
EX:
<body class="app sidebar-mini ltr landing-page horizontalmenu">
<!-- switcher -->
<partial name="~/Views/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher -->
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">
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 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 header1 Code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-header1.cshtml" />
<!-- End app header1 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 sidebar1 Code -->
<partial name="~/Views/Shared/layouts/landingpage/_app-sidebar1.cshtml" />
<!-- End app sidebar1 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:
<!-- switcher -->
<partial name="~/Pages/Shared/layouts/_switcher.cshtml" />
<!-- End switcher -->
EX:
<body class="ltr main-body app sidebar-mini">
<!-- switcher -->
<partial name="~/Pages/Shared/layouts/_switcher.cshtml" />
<!-- End switcher -->
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: 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/landingpage/_switcher.cshtml" />
<!-- End switcher -->
EX:
<body class="app sidebar-mini ltr landing-page horizontalmenu">
<!-- switcher -->
<partial name="~/Pages/Shared/layouts/landingpage/_switcher.cshtml" />
<!-- End switcher -->
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">
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 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 header1 Code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-header1.cshtml" />
<!-- End app header1 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 sidebar1 Code -->
<partial name="~/Pages/Shared/layouts/landingpage/_app-sidebar1.cshtml" />
<!-- End app sidebar1 Code -->
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 style.scss (wwwroot/assets/scss/style.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/custom/_custom-styles.scss)
Example:
body {
font-family: "Roboto", sans-serif;
}
Go To _custom-styles.scss (wwwroot/assets/scss/custom/_custom-styles.scss )
You will find --primary-bg-color:#0162e8; , where you can
simply change color code to change primary color
Example:

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 swither-styles.js
path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for gradient-header to enable
gradient-header style as shown in below
/**Gradient-Header**/
// $('body').addClass('gradient-header');
/**Gradient-Header**/
gradient-header as shown below
/**Gradient-Header**/
$('body').addClass('gradient-header');
/**Gradient-Header**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js
path:(wwwroot/assets/js/swither-styles.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 swither-styles.js
path:(wwwroot/assets/js/swither-styles.js)file and remove
comments for gradient-menu to enable gradient-menu style as
shown in below
/**Gradient-menu**/
// $('body').addClass('gradient-menu');
/**Gradient-menu**/
gradient-menu
as shown below
/**Gradient-menu**/
$('body').addClass('gradient-menu');
/**Gradient-menu**/
open swither-styles.js
path:(wwwroot/assets/js/swither-styles.js)file and remove
comments for layout-boxed to enable layout-boxed style as
shown in below
/**Boxed Layout Style**/
// $('body').addClass('layout-boxed');
/**Boxed Layout Style**/
layout-boxed
as shown below
/**Boxed Layout Style**/
$('body').addClass('layout-boxed');
/**Boxed Layout Style**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for scrollable-layout to enable
scrollable-layout style as shown in below
/**Scrollable-Layout Style**/
// $('body').addClass('scrollable-layout');
/**Scrollable-Layout Style**/
scrollable-layout as shown below
/**Scrollable-Layout Style**/
$('body').addClass('scrollable-layout');
/**Scrollable-Layout Style**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for body-style1 to enable
body-style style as shown in below
/**Body Style**/
// $('body').addClass('body-style1');
/**Body Style**/
body-style1 as
shown below
/**Body Style**/
$('body').addClass('body-style1');
/**Body Style**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for sidemenu-icontext to enable
sidemenu-icontext style as shown in below
/**Icon-Text-Menu**/
// $('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
sidemenu-icontext as shown below
/**Icon-Text-Menu**/
$('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for Closed Sidemenu to enable
closed menu style as shown in below
/**closed-Menu**/
// $('body').addClass('closed-menu');
/**closed-Menu**/
Closed Sidemenu as shown below
/**closed-Menu**/
$('body').addClass('closed-menu');
/**closed-Menu**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.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');
/**Icon-Overlay-Menu**/
sideicon-menu
as shown below
/**Icon-Overlay-Menu**/
$('body').addClass('sideicon-menu');
/**Icon-Overlay-Menu**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for Hover Submenu to enable Hover
submenu style as shown in below
/**Hover-Sub-Menu**/
// $('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
Hover Submenu
as shown below
/**Hover-Sub-Menu**/
$('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.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');
/**Hover-Sub-Menu1**/
Hover Submenu Style1 as shown below
/**Hover-Sub-Menu1**/
$('body').addClass('hover-submenu1');
/**Hover-Sub-Menu1**/
open swither-styles.js path:(wwwroot/assets/js/switcher-styles.js)
file and remove comments for Double-menu to enable
Double-menu style as shown in below
/**Double-Menu**/
// $('body').addClass('double-menu');
/**Double-Menu**/
Double-menu as shown below
/**Double-Menu**/
$('body').addClass('double-menu');
/**Double-Menu**/
open swither-styles.js path:(wwwroot/assets/js/switcher-styles.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');
/**Double-menu-tabs**/
Double-menu-tabs as shown below
/**Double-menu-tabs**/
$('body').addClass('double-menu-tabs');
/**Double-menu-tabs**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for Horizontal layout to enable
Horizontal layout style as shown in below
/***************** Horizontal *********************/
// $('body').addClass('horizontal');
/***************** Horizontal *********************/
Horizontal layout as shown below
/***************** Horizontal *********************/
$('body').addClass('horizontal');
/***************** Horizontal *********************/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for Horizontal Hover layout to
enable Horizontal Hover layout style as shown in below
/***************** Horizontal-Hover *********************/
// $('body').addClass('horizontal-hover');
/***************** Horizontal-Hover *********************/
Horizontal Hover layout as shown below
/***************** Horizontal-Hover *********************/
$('body').addClass('horizontal-hover');
/***************** Horizontal-Hover *********************/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.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 swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for centerlogo-horizontal to
enable centerlogo-horizontal style as shown in below
/**Center-Logo**/
// $('body').addClass('centerlogo-horizontal');
/**Center-Logo**/
centerlogo-horizontal as shown below
/**Center-Logo**/
$('body').addClass('centerlogo-horizontal');
/**Center-Logo**/
open swither-styles.js path:(wwwroot/assets/js/swither-styles.js)
file and remove comments for leftbgimage1 to enable menu
with image style as shown in below
/**leftbgimage1**/
// $('body').addClass('leftbgimage1');
/**leftbgimage1**/
leftbgimage1
as shown below
/**leftbgimage1**/
$('body').addClass('leftbgimage1');
/**leftbgimage1**/
Go To "wwwroot/assets/img/backgrounds" folder and replace your image with Previous image(01) within in image size. note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place it disturbs the template design.
open themecolor.js path:(wwwroot/assets/js/themecolor.js)
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themecolor.js as shown below
function localStorageBackup() {
}
To remove complete LocalStorage saving. You need to remove all localstorage related calling functions in themecolor.js wwwroot/assets/js/themecolor.js and 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('valexlighttheme', true);
localStorage.removeItem("valexdarktheme");
localStorage.getItem("valexprimaryColor")
To clear LocalStorage loading functions you need to remove landingPageLocalstorage() function in landing.jswwwroot/assets/landing/js/landing.js as shown below
You need to remove localstorage related calling functions localStorage.removeItem,localStorage.setItem in landing.js wwwroot/assets/landing/js/landing.jsfile.
function landingPageLocalstorage() {
if (localStorage.getItem("valexrtl")) {
$("body").addClass("rtl");
}
if (localStorage.getItem("valexdarktheme")) {
$("body").addClass("dark-theme");
}
}
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 |
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com