Introduction

Modern & Responsive Asp.Net Core10 & Mvc5 Bootstrap 5 Admin Template for All Your Web Projects

Vexa - Premium Asp.Net Mvc5 & Core10 Bootstrap-5 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.

Support and Updates:

When you purchase Vexa , you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

Dependencies for Vexa

What Do You Get with the Vexa :

Vexa provides all necessary CSHTML, CSS, SCSS, JS files, along with detailed Documentation to help you easily customize and implement the template.

  • All CSHTML Files
  • CSS Files
  • SCSS Files
  • JS Files
  • Documentation
  • Starterkit

Vexa Compatibility with Popular Browsers:

Vexa is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

  • Firefox
  • Safari
  • Opera
  • Chrome
  • Edge

Mvc Folder Structure

Core Folder Structure

Main Base file Structure

Use for Asp.Net Mvc5

Main Base file structure of the Vexa template. Root:Views/Shared/_Layout.cshtml

The _Layout.cshtml file serves as the base file for all CSHTML pages in the Vexa template.

html

    <!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">

    <head>

        <!-- Meta Data -->
		<meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="Description" content="ASP.NET MVC 5 Bootstrap 5 Responsive Admin Web Dashboard Template">
        <meta name="Author" content="Spruko Technologies Private Limited">
        <meta name="keywords" content="admin bootstrap dashboard, admin dashboard bootstrap, admin dashboard template, admin panel bootstrap, asp net admin template, asp net core admin panel, asp net core template, bootstrap 5 admin template, bootstrap dashboard design, bootstrap dashboard ui, bootstrap simple dashboard, bootstrap template dashboard, dotnet core admin template, dotnet framework, asp net core admin template">

        <!-- Title -->
		<title>@ViewData["Title"]Vexa - ASP.NET MVC 5 Bootstrap 5 Premium Admin & Dashboard Template </title>

        <!-- Favicon -->
        <link rel="icon" href="@Url.Content("~/assets/images/brand-logos/favicon.ico")" type="image/x-icon">

        <!-- Bootstrap Css -->
	    <link  id="style" href="@Url.Content("~/assets/libs/bootstrap/css/bootstrap.min.css")" rel="stylesheet">

        <!-- Style Css  -->
        <link href="@Url.Content("~/assets/css/styles.css")" rel="stylesheet">

        <!-- Icons Css -->
        <link href="@Url.Content("~/assets/CSS/icons.css")" rel="stylesheet">
        
        <partial name="~/Views/Shared/Layouts/_styles.cshtml">

        <!-- Main JS -->
        <script src="@Url.Content("~/assets/js/main.js")"></script>

        @await RenderSectionAsync("Styles", required: false)

	</head>

	<body>

        <!-- Start::main-switcher -->
        <partial name="~/Views/Shared/Layouts/_switcher.cshtml">
        <!-- End::main-switcher -->

        <!-- Loader -->
		<div id="loader">
			<img src="@Url.Content("~/assets/images/media/loader.svg")" alt="">
		</div>
		<!-- Loader -->

        <!-- Page Open -->
		<div class="page">

            <!-- Start::main-header -->
            <partial name="~/Views/Shared/Layouts/_main-header.cshtml">
            <!-- End::main-header -->

            <!-- Start::main-sidebar -->
            <partial name="~/Views/Shared/Layouts/_main-sidebar.cshtml">
            <!-- End::main-sidebar -->

            <!-- main-content -->
            <div class="main-content app-content">

                @RenderBody()

            </div> 
            <!-- main-content closed-->

            <!-- Start::Search-modal -->
            <partial name="~/Views/Shared/Layouts/_search-modal.cshtml">
            <!-- End::Search-modal -->

            <!-- Start::footer -->            
            <partial name="~/Views/Shared/Layouts/_footer.cshtml">
            <!-- End::footer -->

		</div>
        <!-- Page Closed-->

        <!-- Start::Scripts -->
        <partial name="~/Views/Shared/Layouts/_scripts.cshtml">

        @await RenderSectionAsync("Scripts", required: false)

        <!-- Sticky JS -->
		<script src="@Url.Content("~/assets/js/sticky.js")"></script>

        <!-- Custom JS -->
        <script src="@Url.Content("~/assets/js/custom.js")"></script>

        <!-- Custom-Switcher JS -->
        <script src="@Url.Content("~/assets/js/custom-switcher.js")"></script>
        <!-- End::Scripts -->

	</body>
</html>
    
Use for Asp.Net Core10

Main Base file structure of the Vexa template. Root:Pages/Shared/_Layout.cshtml

The _Layout.cshtml file serves as the base file for all CSHTML pages in the Vexa template.

html

<!DOCTYPE html>
<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">

    <head>

        <!-- Meta Data -->
		<meta charset="UTF-8">
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="Description" content="ASP.NET CORE10 Bootstrap 5 Responsive Admin Web Dashboard Template">
        <meta name="Author" content="Spruko Technologies Private Limited">
        <meta name="keywords" content="admin bootstrap dashboard, admin dashboard bootstrap, admin dashboard template, admin panel bootstrap, asp net admin template, asp net core admin panel, asp net core template, bootstrap 5 admin template, bootstrap dashboard design, bootstrap dashboard ui, bootstrap simple dashboard, bootstrap template dashboard, dotnet core admin template, dotnet framework, asp net core admin template">

        <!-- Title  -->
		<title>@ViewData["Title"]VEXA - ASP.NET CORE10 Bootstrap 5 Premium Admin & Dashboard Template </title>

        <!-- Favicon -->
        <link rel="icon" href="@Url.Content("~/assets/images/brand-logos/favicon.ico")" type="image/x-icon">

        <!-- Bootstrap Css -->
	    <link  id="style" href="@Url.Content("~/assets/libs/bootstrap/css/bootstrap.min.css")" rel="stylesheet">

        <!-- Style Css -->
        <link href="@Url.Content("~/assets/css/styles.css")" rel="stylesheet">

        <!-- Icons Css -->
        <link href="@Url.Content("~/assets/CSS/icons.css")" rel="stylesheet">
        
        <partial name="~/Pages/Shared/Layouts/_styles.cshtml" >

        <!--  Main Js -->
        <script src="@Url.Content("~/assets/js/main.js")"></script>

        @await RenderSectionAsync("Styles", required: false)

	</head>

	<body>

        <!-- Start::main-switcher -->
        <partial name="~/Pages/Shared/Layouts/_switcher.cshtml" >
        <!-- End::main-switcher -->

        <!-- Loader -->
		<div id="loader">
			<img src="@Url.Content("~/assets/images/media/loader.svg")" alt="">
		</div>
		<!-- Loader -->

        <!-- Page -->
		<div class="page">

            <!-- Start::main-header -->
            <partial name="~/Pages/Shared/Layouts/_main-header.cshtml" >
            <!-- End::main-header -->

            <!-- Start::main-sidebar -->
            <partial name="~/Pages/Shared/Layouts/_main-sidebar.cshtml" >
            <!-- End::main-sidebar -->

            <!-- Start::Main-content -->
            <div class="main-content app-content">

                @RenderBody()

            </div> 
            <!-- End Main Content-->  

            <!-- Start::Search-modal -->
            <partial name="~/Pages/Shared/Layouts/_search-modal.cshtml "> 
            <!-- End::Search-modal -->

            <!-- Start::main-footer -->            
            <partial name="~/Pages/Shared/Layouts/_footer.cshtml" >
            <!-- End::main-footer -->

		</div>
         <!-- Page closed-->

        <!-- Start::Scripts -->
        <partial name="~/Pages/Shared/Layouts/_scripts.cshtml" >

        @await RenderSectionAsync("Scripts", required: false)

        <!-- Sticky JS -->
		<script src="@Url.Content("~/assets/js/sticky.js")"></script>

        <!-- Custom JS -->
        <script src="@Url.Content("~/assets/js/custom.js")"></script>

        <!-- Custom-Switcher JS -->
        <script src="@Url.Content("~/assets/js/custom-switcher.js")"></script>
        <!-- End::Scripts -->

	</body>
</html>
    

CSHTML Page View Code

1. To ensure consistency across all pages, use the base file as the base layout for each CSHTML page. This allows for central management of shared elements like headers, footers, and navigation. To achieve this, include the following code at the top of each CSHTML file:

    
    
@section styles{

}


@section scripts{
	
}
    
Use for Asp.Net MVC5
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: F:\project folder\templates\ Open Views folder will have 174 cshtml pages
  • Navigate as shown Example: C:\projectname\Views\shared\layouts Open folder there you will find _main-header.cshtml, _main-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.
  • Navigate as shown Example: C:\projectname\Views\shared Open folder there you will find _Layout.cshtml, _main-_CustomLayout.cshtml, _JobsLandingLayout.cshtml and _LandingLayout.cshtml.
Use for Asp.Net Core10
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: F:\project folder\templates\ Open pages folder will have 174 cshtml pages
  • Navigate as shown Example: C:\projectname\Pages\shared\layouts Open folder there you will find _main-header.cshtml, _main-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.
  • Navigate as shown Example: C:\projectname\Pages\shared Open folder there you will find _Layout.cshtml, _main-_CustomLayout.cshtml, _JobsLandingLayout.cshtml and _LandingLayout.cshtml.
  • Here _Layout.cshtml file is the base file for all the cshtml pages.
  • Here _CustomLayout.cshtml file is the base file for all custom pages ex: error401.cshtml, error404.cshtml, error500.cshtml, create_password_basic.cshtml, reset_password_basic.cshtml, coming_soon.cshtml, sign_up_basic.cshtml and under_maintenance.cshtml etc..,
  • Here _LandingLayout.cshtml file is the base file for all landing cshtml page.
  • Here _JobsLandingLayout.cshtml file is the base file for all jobs landing cshtml page.

Installation Process of .NET SDK.

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

Step2: Click on the Download .NET SDK. button

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

How to run Asp.Net Mvc5 & Core10 development server

Visual studio code
  • First, unzip the project folder that you received from us.
  • Go to your root project location path, then open the project file in your editor.
  • Open the command prompt, then use.
  • code

     cd /path-to-your-project
  • Now execute the command to getAsp.Net Mvc5 & Core10 development server.
  • code

     dotnet watch run
Visual studio
  • First, unzip the project folder that you received from us.
  • Go to your root project location path, then open the project file.
  • Just double click on the file Vexa .sln inside the project folder.
  • Now, press the key F5 to getAsp.Net Mvc5 & Core10 development server.

Purpose of a Starter Kit

Introduction to the Asp.Net Mvc5 & Core10 Starter Kit:

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

Purpose of the Asp.Net Mvc5 & Core10 Starter Kit:

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

Benefits of Using the Asp.Net Mvc5 & Core10 Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.

Starterkit Overview

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

We have provided all the pre-build layouts like Sidemenu, Header, footer and blank pages etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link: https://support.spruko.com/

  • Take a quick look at the folder structure of the "Starterkit."
  • Integration of your customized cshtml pages becomes easy when using the "Starterkit."
  • The "Starterkit" provides all the layout components, related assets, and plugins.
  • To explore the contents of the "Starterkit," unzip the project folder received after purchase.
  • Navigate to the following paths:
    Use for Asp.Net MVC5
  • Example: C:/projectname/Views/Home/- This folder contains files such as Index.cshtml file.
  • Example: C:/projectname/Controllers/- This folder contains files such as HomeController.cs file.
  • Example: C:/projectname/Views/Shared/layouts /- This folder contains files such as _main-header.cshtml, _main-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.
  • Use for Asp.Net Core10
  • Example: C:/projectname/Pages/- This folder contains files such as Index.cshtml and Index.cshtml.cs files.
  • Example: C:/projectname/Pages/shared/layouts /- This folder contains files such as _main-header.cshtml, _main-sidebar.cshtml and _footer.cshtml, and _switcher.cshtml, files and etc..,.

Vexa comes with power of Gulp

Gulp is a popular JavaScript task runner that automates common development tasks, such as compiling Sass to CSS, minifying JavaScript and CSS files, optimizing images, and more. Gulp allows developers to define tasks that process files in a project, and then run those tasks automatically when files are changed or when specific commands are issued.for more information about gulp Check here.

Prerequisites:

To install and set up all the prerequisites, follow these steps:

Ensure that Node.js is installed and running on your computer. If Node.js is already installed, you can skip this step. Otherwise, install it on your computer.

If you want to install and use the latest version of Node.js, you can find the necessary instructions on the official website.

To set up gulp, you need to install it globally on your system. Run one of the following commands in your terminal:

code

 npm install -g gulp
or

code

 npm install --save-dev gulp
Installation

Please follow below steps to install and setup all pre requisites:

Make sure to have all above pre requisites installed & running in your computer

Open your terminal, go to your folder and enter below command. This would install all required dependencies in node_modules folder.

code

 npm install
Build Production File

After completing the above steps, run the following command from the project root (Vexa /) in your terminal or command prompt:

code

 gulp

Note:-Ensure all required node_modules are installed to run the gulp tasks successfully.

The following command performs several tasks to streamline your development workflow below are some of the task it performs :

  1. Generates the libs/ and CSS/ Folders directory

FAQ'S

Step 1:

Go To style.scss (wwwroot/assets/scss/styles.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import in to styles.scss file

How to Select font Family

Step 2:

And paste Your Selected font-family in style.scss

Step 3:

And add the Your Selected font-family in _variables.scss(static/assets/scss/_variables.scss)

code

--default-font-family: "Space Grotesk", sans-serif;

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Use for Asp.Net MVC5

By default menu icons are phosphoricons if you want to change To change Menu icons, open main-sidebar.html page Path:Views/Shared/layouts/_main-sidebar.cshtml and go through app-sidebar section, in that section you will find phosphoricons of menu in svg tag, there you can replace previous icon with your icon. Example as shown in below

Use for Asp.Net Core10

By default menu icons are phosphoricons if you want to change To change Menu icons, open main-sidebar.html page Path:Pages/Shared/layouts/_main-sidebar.cshtml and go through app-sidebar section, in that section you will find phosphoricons of menu in svg tag, there you can replace previous icon with your icon. Example as shown in below

Before: (phosphor icons)

html

After: (bootstrap Icons)

html

Go To "wwwroot/assets/images/brand-logos" 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.

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Step1:

To clear LocalStorage loading functions you need to remove localStorageBackup2() function in custom-switcher.min.js wwwroot/assets/js/custom-switcher.min.js as shown below

javascript

function localStorageBackup2() {}
Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear in custom-switcher.min.js wwwroot/assets/js/custom-switcher.min.jsfile.Below are the some examples to find out.

javascript

localStorage.setItem( );
localStorage.removeItem( );
localStorage.getItem( )
localStorage.clear();
localStorageBackup();
Step3:
Use for Asp.Net Mvc5

To remove complete LocalStorage saving you also need to remove main.js link present in _Layout.cshtml Path:Viwe/Shared/_Layout.cshtml as shown below

Use for Asp.Net Core10

To remove complete LocalStorage saving you also need to remove main.js link present in _Layout.cshtml Path:Pages/Shared/_Layout.cshtml as shown below

html


<!-- Main Theme Js -->
<script src="@Url.Content("~/assets/js/sticky.js")"></script>
                                                                    
                                                                
Use for Asp.Net Mvc5

Step1:

To remove switcher path remove below code shown in _Layout.cshtml Views/Shared/_Layout.cshtml file

code

<!-- Start::main-switcher -->
 <partial name="~/Views/Shared/layouts/_switcher.cshtml" >
<!-- End::main-switcher -->
Step2:

After removing switcher path in _Layout.cshtml page then change main-header to main-header1 for switcher icon code shown below in _Layout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/_main-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/_main-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Go to root path: : Views/Shared/_Layout.cshtml open "_Layout.cshtml" file and then remove the"custom-switcher.min.js" link as shown below.

code

 Remove Switcher Script :
    <!-- Custom-Switcher JS -->
    <script src="@Url.Content("~/assets/js/custom-switcher.min.js")"></script>

Step1:

To remove switcher path remove below code shown in _LandingLayout.cshtml Views/Shared/_LandingLayout.cshtml file

code

<!-- Start::main-switcher -->
<partial name="~/Views/Shared/layouts/landing/_switcher.cshtml" >
<!-- End::main-switcher -->
Step2:

After removing switcher path in _LandingLayout.cshtml page then change main-header to main-header1 for switcher icon code shown below in _LandingLayout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/landing/_main-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/landing/_main-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Now then change main-sidebar to main-sidebar1 for switcher icon code shown below in _LandingLayout.cshtml page

code

 Before :
    <!-- Start::main-sidebar -->
    <partial name="~/Views/Shared/layouts/landing/_main-sidebar.cshtml" >
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    <partial name="~/Views/Shared/layouts/landing/_main-sidebar.cshtml" >
    <!-- End::main-sidebar -->

Step1:

To remove switcher path remove below code shown in _JobsLandingLayout.cshtml Views/Shared/_JobsLandingLayout.cshtml file

code

<!-- Start::main-switcher -->
<partial name="~/Views/Shared/layouts/landing/_switcher.cshtml" >
<!-- End::main-switcher -->
Step2:

After removing switcher path in _JobsLandingLayout.cshtml page then change _Jobs-header to _Jobs-header1 for switcher icon code shown below in _JobsLandingLayout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/landing/_jobs-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Views/Shared/layouts/landing/_jobs-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Now then change _Jobs-sidebar to _Jobs-sidebar1 for switcher icon code shown below in _JobsLandingLayout.cshtml page

code

 Before :
    <!-- Start::main-sidebar -->
    <partial name="~/Views/Shared/layouts/landing/_jobs-sidebar.cshtml" >
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    <partial name="~/Views/Shared/layouts/landing/_jobs-sidebar.cshtml" >
    <!-- End::main-sidebar -->
Use for Asp.Net Core10

Step1:

To remove switcher path remove below code shown in _Layout.cshtml Pages/Shared/_Layout.cshtml file

code

<!-- SWITCHER -->
 <partial name="~/Pages/Shared/layouts/_switcher.cshtml" >
<!-- END SWITCHER -->
Step2:

After removing switcher path in _Layout.cshtml page then change main-header to main-header1 for switcher icon code shown below in _Layout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/_main-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/_main-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Go to root path: Pages/Shared/_Layout.cshtml open "_Layout.cshtml" file and then remove the"custom-switcher.min.js" link as shown below.

code

 Remove Switcher Script :
    <!-- Custom-Switcher JS -->
    <script src="@Url.Content("~/assets/js/custom-switcher.min.js")"></script>

Step1:

To remove switcher path remove below code shown in _LandingLayout.cshtml Pages/Shared/_LandingLayout.cshtml file

code

<!-- Start::main-switcher -->
<partial name="~/Pages/Shared/layouts/landing/_switcher.cshtml" >
<!-- End::main-switcher -->
Step2:

After removing switcher path in _LandingLayout.cshtml page then change main-header to main-header1 for switcher icon code shown below in _LandingLayout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/landing/_main-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/landing/_main-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Now then change main-sidebar to main-sidebar1 for switcher icon code shown below in _LandingLayout.cshtml page

code

 Before :
    <!-- Start::main-sidebar -->
    <partial name="~/Pages/Shared/layouts/landing/_main-sidebar.cshtml" >
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    <partial name="~/Pages/Shared/layouts/landing/_main-sidebar1.cshtml" >
    <!-- End::main-sidebar -->

Step1:

To remove switcher path remove below code shown in _JobsLandingLayout.cshtml Pages/Shared/_JobsLandingLayout.cshtml file

code

<!-- Start::main-switcher -->
<partial name="~/Pages/Shared/layouts/landing/_switcher.cshtml" >
<!-- End::main-switcher -->
Step2:

After removing switcher path in _JobsLandingLayout.cshtml page then change _jobs-header to _jobs-header1 for switcher icon code shown below in _JobsLandingLayout.cshtml page

code

 Before :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/landing/_jobs-header.cshtml" >
    <!-- End::main-header -->

After :
    <!-- Start::main-header -->
    <partial name="~/Pages/Shared/layouts/landing/_jobs-header1.cshtml" >
    <!-- End::main-header -->
Step3:

Now then change _jobs-sidebar to _jobs-sidebar1 for switcher icon code shown below in _JobsLandingLayout.cshtml page

code

 Before :
    <!-- Start::main-sidebar -->
    <partial name="~/Pages/Shared/layouts/landing/_jobs-sidebar.cshtml" >
    <!-- End::main-sidebar -->

After :
    <!-- Start::main-sidebar -->
    <partial name="~/Pages/Shared/layouts/landing/_jobs-sidebar1.cshtml" >
    <!-- End::main-sidebar -->

Please follow the below steps to change Primary Color
Step 1 :

To change Primary Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (wwwroot/assets/scss/_variables.scss )

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Please follow the below steps to change Dark body Color
Step 1 :

Make sure the theme is set completely to dark mode by adding the following attributes to the html tag data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

Step 2 :

To change Dark body Color you have to open _variables.scss file and replace what color you want as shown in below

Rootpath : _variables.scss (wwwroot/assets/scss/_variables.scss )

Step 3 :

Also Change the following variable colors to the desired theme background accordingly in [data-theme-mode="dark"]

--light-rgb :
--form-control-bg :
--input-border :
--gray-3 :

Note : After changing the styles, you must run the gulp command "gulp" . For more gulp commands, see the gulp page click here.

Credit's

NPM Plugins & Reference Links

All plugins runs through npm.

If you want new plugins : Install new plugin from npm then run gulp command.

Plugin Version URL
@popperjs/core ^2.11.8 npmjs.com/@popperjs/core
@simonwep/pickr ^1.9.0 npmjs.com/@simonwep/pickr
@tarekraafat/autocomplete.js ^10.2.7 npmjs.com/@tarekraafat/autocomplete.js
@yaireo/dragsort ^1.3.1 npmjs.com/@yaireo/dragsort
@yaireo/tagify ^4.21.2 npmjs.com/@yaireo/tagify
animejs ^3.2.2 npmjs.com/animejs
apexcharts ^5.3.6 npmjs.com/apexcharts
autoprefixer ^10.4.19 npmjs.com/autoprefixer
bootstrap ^5.3.8 npmjs.com/bootstrap
browser-sync ^3.0.3 npmjs.com/browser-sync
chart.js ^4.5.1 npmjs.com/chart.js
choices.js ^11.1.0 npmjs.com/choices.js
clean-css ^5.3.3 npmjs.com/clean-css
cleave.js ^1.6.0 npmjs.com/cleave.js
cssnano ^7.0.4 npmjs.com/cssnano
datatables.net-bs5 ^1.13.11 npmjs.com/datatables.net-bs5
dragula ^3.7.3 npmjs.com/dragula
dropzone ^6.0.0-beta.2 npmjs.com/dropzone
dual-listbox ^2.0.0 npmjs.com/dual-listbox
echarts ^6.0.0 npmjs.com/echarts
fg-emoji-picker ^1.0.1 npmjs.com/fg-emoji-picker
filepond ^4.32.11 npmjs.com/filepond
flatpickr ^4.6.13 npmjs.com/flatpickr
fullcalendar ^6.1.20 npmjs.com/fullcalendar
glightbox ^3.3.0 npmjs.com/glightbox
gmaps ^0.4.25 npmjs.com/gmaps
gridjs ^6.2.0 npmjs.com/gridjs
intl-tel-input ^19.5.7 npmjs.com/intl-tel-input
isotope-layout ^3.0.6 npmjs.com/isotope-layout
jsvectormap ^1.7.0 npmjs.com/jsvectormap
leaflet ^1.9.4 npmjs.com/leaflet
moment 2.9.0 npmjs.com/moment
node-waves ^0.7.6 npmjs.com/node-waves
nouislider ^15.8.1 npmjs.com/nouislider
particles.js ^2.0.0 npmjs.com/particles.js
plyr ^3.7.8 npmjs.com/plyr
prismjs ^1.29.0 npmjs.com/prismjs
quill ^2.0.2 npmjs.com/quill
rater-js ^1.0.1 npmjs.com/rater-js
rename ^1.0.4 npmjs.com/rename
shepherd.js ^11.2.0 npmjs.com/shepherd.js
simplebar ^6.2.7 npmjs.com/simplebar
slick-slider ^1.8.2 npmjs.com/slick-slider
sortablejs ^1.15.2 npmjs.com/sortablejs
sweetalert ^2.1.2 npmjs.com/sweetalert
sweetalert2 ^11.26.17 npmjs.com/sweetalert2
swiper ^11.2.10 npmjs.com/swiper
toastify-js ^1.12.0 npmjs.com/toastify-js
uglify ^0.1.5 npmjs.com/uglify
vanilla-wizard ^0.0.7 npmjs.com/vanilla-wizard
wnumb ^1.2.0 npmjs.com/wnumb
Icons Credit
Icons References
Bootstrap Icons https://icons.getbootstrap.com/
Boxicons https://boxicons.com/
Remix Icons https://remixicon.com/
Feather Icons https://feathericons.com/
Tabler Icons https://tabler-icons.io/
Line Awesome Icons https://icons8.com/line-awesome
Phosphor Icons https://phosphoricons.com/
Fonts Credit
Font References
Google Fonts https://fonts.google.com/
Sidemenu Icons
Icon References
phosphor Icons https://phosphoricons.com/

Switcher styles

html

<html lang="en" dir="ltr" data-nav-layout="vertical" data-theme-mode="light" data-header-styles="light" data-menu-styles="dark" data-toggled="close">

Light:

html

data-theme-mode="light" data-header-styles="light" data-menu-styles="light"
Dark:

html

data-theme-mode="dark" data-header-styles="dark" data-menu-styles="dark"

LTR (Left to Right):

html

dir="ltr"
RTL (Right to Left):

html

dir="rtl"

Vertical:

html

data-nav-layout="vertical"
Horizontal:

html

data-nav-layout="horizontal" data-nav-style="menu-click"

Default:

Menu Click

data-nav-style="menu-click"
Menu Hover

html

data-nav-style="menu-hover"
Icon Click:

html

data-nav-style="icon-click"
Icon Hover:

html

data-nav-style="icon-hover"

Regular:

html

data-page-style="regular"
Classic:

html

data-page-style="classic"
Mordern:

html

data-page-style="modern"

Full Width:

html

data-width="full-width"
Boxed:

html

data-width="boxed"
Fixed:

html

data-menu-position="fixed"
Scrollable:

html

data-menu-position="scrollable"

Fixed:

html

data-header-position="fixed"
Scrollable:

html

data-header-position="scrollable"

Closed:

html

data-vertical-style="closed"
Icontext:

html

data-vertical-style="icontext"
Overlay:

html

data-vertical-style="overlay"
Detached:

html

data-vertical-style="detached"
Doublemenu:

html

data-vertical-style="doublemenu"

Enable:

html

loader="enable"
Disable:

html

loader="disable"

Light Style:

html

data-menu-styles="light"
Dark Style:

html

data-menu-styles="dark"
Color Style:

html

data-menu-styles="color"
Gradient Style:

html

data-menu-styles="gradient"
Transparent Style:

html

data-menu-styles="transparent"

Light Style:

html

data-header-styles="light"
Dark Style:

html

data-header-styles="dark"
Color Style:

html

data-header-styles="color"
Gradient Style:

html

data-header-styles="gradient"
Transparent Style:

html

data-header-styles="transparent"

Background Image Style-1:

html

data-bg-img="bgimg1"
Background Image Style-2:

html

data-bg-img="bgimg2"
Background Image Style-3:

html

data-bg-img="bgimg3"
Background Image Style-4:

html

data-bg-img="bgimg4"
Background Image Style-5:

html

data-bg-img="bgimg5"
Information
Need Help ?
Support Help Desk
Technical issues? Our support team is ready to help.
Pre-Sales
Have questions before purchasing? Contact our pre-sales team.
Pre-Sales Chat
Get immediate answers through our live chat support.