Sparic - ASP.NET Core7 & Mvc5 Multipurpose Responsive admin Template

Note:-

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

Dashboard
Welcome to Sparic – ASP.Net Core7 & Mvc5 Bootstrap5 Admin & Dashboard Template
  • Created Date: 05/04/2023
  • Author: Spruko
  • Company: Spruko Technologies Private Limited

Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you 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!

Introduction
Welcome to Sparic – ASP.Net Core7 & Mvc5 Bootstrap Responsive Flat Admin Dashboard Template

Sparic - ASP.Net Core7 & 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! 😊

Template Description

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

Template Features
Vertical-menu Horizontal click menu Horizontal hover menu RTL ready
100+ CSHTML Pages Bootstrap 5 Responsive Framework Well Commented Code 24 * 7 Professional Company Support
Regular Updates 40+ Plugins 5 types of Charts Select2
About us Blog File Manager Gallery
Mail Inbox Ecommerce Pages Services Page Blog Details
Calendar Mail Inbox 11 Types of Icon sets File upload
Message Chat Form Elements Month & Date & Year Range Pickers FormAdvanced Elements
Data Tables Lockscreen Page Error Page User Profile
Invoice Page Advanced Pricing Tables Easy to customize More Widgets
Very Easy to Create your Own Site Neat, clean and simple design W3C Validated
Minimum Requirements
  • Visual Studio Code or Visual Studio 2023
  • C# for Visual Studio Code (latest version)
  • .NET 7.0.2 SDK
Installation Process of .NET SDK.

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

Step2: Click on the Download .NET SDK. button

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

Instalation Process Of ASP.Net Core7 & Mvc5

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

If you know how to create ASP.Net Core7 & Mvc5 project you can skip this step.

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

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

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

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

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

  • Gulp

    Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync ,optimizing images, etc... We are using gulp which allows to easily compilation of scss to csss. You can read it more about it here.

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you have already installed gulp on your computer, you can skip this step. In order to install, just run command npm install -g gulp from your terminal.

  • After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command
    npm install gulp,
    const sass = require('gulp-sass')(require('sass'));,
    npm install gulp-postcss,
    npm install autoprefixer,
    npm install gulp-sourcemaps,
    npm install browser-sync from your terminal.

    Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt

Installation

To setup, follow below mentioned steps:

  • Install Prerequisites

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

  • Install Dependencies

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

After you finished with above steps, you can run the command to compile scss into css: gulp watch

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

									├── bin/
									|   └── Debug/
									|       └── net7.0/
									|           ├── appsettings.Development.json
									|           ├── appsettings.json/
									|           ├── package-lock.json
									|           ├── package.json
									|           ├── sparic.deps.json/
									|           ├── sparic.dll	
									|           ├── sparic.exe
									|           ├── sparic.pdp
									|           ├── sparic.runtimeconfig.json	
									|           └── sparic.staticwebassets.runtime.json	
									├── Controllers	
									|   └── 10 Controller.cs (files)	
									├── Modals	
									|   └── ErrorViewModel.cs	
									├── obj		
									|   ├── Debug	
									|   ├── project.assets.json
									|   ├── project.nuget.cache
									|   ├── sparic.csproj.nuget.dgspec.json	
									|   ├── sparic.csproj.nuget.g.props
									|   └── sparic.csproj.nuget.g.targets
									├── Properties
									|   └── launchSettings.json
									├── Views/
									|   ├── Shared__
									|   |   ├── _Layout.cshtml
									|   |   ├── _Layout.cshtml.css
									|   |   ├── _Layout1.cshtml
									|   |   ├── _Layout2.cshtml
									|   |   ├── _Layout3.cshtml
									|   |   ├── _ValidationScriptsPartial.cshtml
									|   |   ├── Error.cshtml
									|   |   └── layouts
									|   |       ├── _app-header.cshtml
									|   |       ├── _app-header1.cshtml
									|   |       ├── _app-sidebar.cshtml
									|   |       ├── _footer.cshtml
									|   |       ├── _sidebar-right.cshtml
									|   |       └── _switcher.cshtml
									|   ├── 11 Folders
									|   |   └── 110 + .cshtml (Files)
									|   ├── _ViewImports.cshtml
									|   └── _ViewStart.cshtml
									├── wwwroot/
									|   ├── assets/
									|   |   ├── 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
									├── sparic.csproj
									├── sparic.csproj.user
									└── sparic.sln
									
Asp .Net Core7 Over All Folder Structure

									├── bin/
									|   └── Debug
									|       └── net7.0
									|           ├── appsettings.Development.json
									|           ├── appsettings.json
									|           ├── package-lock.json
									|           ├── package.json
									|           ├── sparic.deps.json
									|           ├── sparic.dll
									|           ├── sparic.exe
									|           ├── sparic.pdb	
									|           ├── sparic.runtimeconfig.json
									|           └── sparic.staticwebassets.runtime.json	
									├── obj		
									|   ├── Debug	
									|   ├── project.assets.json
									|   ├── project.nuget.cache	
									|   ├── sparic.csproj.nuget.dgspec.json	
									|   ├── sparic.csproj.nuget.g.props	
									|   └── sparic.csproj.nuget.g.targets
									├── Pages
									|   ├── Shared__
									|   |   ├── _Layout.cshtml
									|   |   ├── _Layout.cshtml.css
									|   |   ├── _Layout1.cshtml
									|   |   ├── _Layout2.cshtml
									|   |   ├── _Layout3.cshtml
									|   |   ├── _ValidationScriptsPartial.cshtml
									|   |   └── layouts
									|   |       ├── _app-header.cshtml
									|   |       ├── _app-header1.cshtml
									|   |       ├── _app-sidebar.cshtml
									|   |       ├── _footer.cshtml
									|   |       ├── _sidebar-right.cshtml
									|   |       └── _switcher.cshtml
									|   ├── 11 Folders
									|   |   ├── 110 + .cshtml (Files)
									|   |   └── 11 .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
									|   |   ├── 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
									├── sparic.csproj
									├── sparic.csproj.user
									└── sparic.sln
									
Switcher?
Asp.Net Mvc5 Switcher?

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


Asp.Net Core7 Switcher?

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


How to change any chart color according to your theme color?

By default, the chart color will change based on the theme color.

You can replace the default chart with your own chart, but in order to change the colors of your chart with respect to the theme colors you have to follow the below steps.

How to replace your own chart with existing chart and change colors of that particular chart in Dashboard Page ?

Note: This process is only for replace your own chart in index.cshtml page

Step1:

Go to root path: wwwroot/assets/js/index1.js in that js file you will find a function named as index " function index1() ; " inside of that function replace the old chart js data with your new chart js data, in order to change your chart color according to your themecolor then add " myVarVal" (Ex:- myVarVal to that particular color field based on your requirement.

Step2:

Navigate to root path: wwwroot/assets/js/ and open themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

// index charts if(document.querySelector('#timeline-chart') !== null){ index1(); }

Then change it's id name based on the id that you've used for your particular chart.

Ex: How do I modify the Id in the "themeColors.js" file?

    Before : " if(document.querySelector('#timeline-chart') !== null){ index1() ; }"

    After : " if(document.querySelector('# your chart id') !== null){ index1() ; }"

How to add your new chart and change colors of that new chart according to your themecolor in Other Pages ?

Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)

If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.

Step 1:

If you want to add any chart to any other page then follow the below process.

Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique " name (for example in my case: myFunction() ), and then place the chart js content inside of that function.

Note: If there is more than one chart then you need to create different functions for different charts respectively.

Ex-1: myFunction1() { chart js1 content }

Ex-2:myFunction2() { chart js2 content }
Step 2:

Navigate to root path: wwwroot/assets/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find

"if(document.querySelector('#timeline-chart') !== null){ index1() ; }"

Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)

Ex: " if(document.querySelector('# your chart id') !== null){ myFunction(); =>created function for the above id }"
Step 3:

If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process

Ex : Go to root path: wwwroot/assets/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " value (Ex:- myVarVal )to that particular color field based on your requirement.

FAQ'S
General Style

How to Change Font Style ?

Step 1:

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

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in Style.scss i.e (root:-wwwroot/assets/scss/style.scss)

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add 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: 13px;
																	font-weight: 400;
																	line-height: 1.5;
																	color: $color;
																	text-align: left;
																	background-color: $background;
																}
																
															

How to Change Logo ?

Go To "wwwroot/assets/images/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.
RTL Version & LTR Version

How to Enable RTL version?

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


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

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

How to Enable LTR version?

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


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

																	/***************** LTR *********************/
																	$('body').addClass('ltr');
																	/***************** LTR *********************/
																
Light Theme & Dark Theme

How to Enable Darktheme?

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


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

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

How to Enable Light theme?

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


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

																/***************** Light THEME *********************/
																$('body').addClass('light-mode');
																/***************** Light THEME *********************/
		
															
Header Styles

How to Enable Color-header?

open switcher-styles.js path:(wwwroot/assets/js/switcher-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**/
		
															
Remove the comments to enable color-header as shown below

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

How to Enable Dark-header?

open switcher-styles.js path:(wwwroot/assets/js/switcher-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**/
															
Remove the comments to enable dark-header as shown below

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

How to Enable Light-header?

open switcher-styles.js path:(wwwroot/assets/js/switcher-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**/
															
Remove the comments to enable light-header as shown below

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

How to Enable Boxed-Layout?

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


																//Boxed Layout Style
																if (!localStorage.getItem('Sparicfullwidth') && !localStorage.getItem('Sparicboxedwidth')) {
																// $('body').addClass('layout-boxed');
																}
															
Remove the comments to enable layout-boxed as shown below

																//Boxed Layout Style
																if (!localStorage.getItem('Sparicfullwidth') && !localStorage.getItem('Sparicboxedwidth')) {
																$('body').addClass('layout-boxed');
																}
															

How to Enable Scrollable-Layout?

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


																//Scrollable-Layout Style
																if (!localStorage.getItem('Sparicfixed') && !localStorage.getItem('Sparicscrollable')) {
																// $('body').addClass('scrollable-layout');
																}
															
Remove the comments to enable scrollable-layout as shown below

																//Scrollable-Layout Style
																if (!localStorage.getItem('Sparicfixed') && !localStorage.getItem('Sparicscrollable')) {
																$('body').addClass('scrollable-layout');
																}
															
Vertical Menu Styles

How to Enable Sidemenu-Icon-with Text?

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


																
																/**Icon-Text-Menu**/
																// $('body').addClass('icontext-menu');
																/**Icon-Text-Menu**/
		
															
Remove the comments to enable icontext-menu as shown below

																
																/**Icon-Text-Menu**/
																$('body').addClass('icontext-menu');
																/**Icon-Text-Menu**/
		
															

How to Enable Closed-Menu?

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


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

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

How to Enable Icon Overlay

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


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

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

How to Enable Hover Submenu

open switcher-styles.js path:(wwwroot/assets/js/switcher-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**/
															
Remove the comments to enable Hover Submenu as shown below

																/**Hover-Sub-Menu**/
																$('body').addClass('hover-submenu');
																/**Hover-Sub-Menu**/
															

How to Enable Hover Submenu style1

open switcher-styles.js path:(wwwroot/assets/js/switcher-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**/
															
Remove the comments to enable Hover Submenu Style1 as shown below

																/**Hover-Sub-Menu1**/
																$('body').addClass('hover-submenu1');
																/**Hover-Sub-Menu1**/
															

How to Enable Double Menu style

open switcher-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**/
															
Remove the comments to enable Double-Menu as shown below

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

How to Enable Double Menu with Tabs style

open switcher-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**/
															
Remove the comments to enable Double-Menu-Tabs as shown below

																/**Double-Menu-Tabs**/
																$('body').addClass('double-menu-tabs');
																/**Double-Menu-Tabs**/
															
Horizontal Click & Horizontal Hover styles

How to Enable Horizontal layout

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


																/***************** Horizontal THEME *********************/
																// $('body').addClass('horizontal');
																/***************** Horizontal THEME *********************/
															
Remove the comments to enable Horizontal layout as shown below

																/***************** Horizontal THEME *********************/
																$('body').addClass('horizontal');
																/***************** Horizontal THEME *********************/
															

How to Enable Horizontal Hover layout

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


																/***************** Horizontal-Hover THEME *********************/
																// $('body').addClass('horizontal-hover');
																/***************** Horizontal-Hover THEME *********************/
															
Remove the comments to enable Horizontal Hover layout as shown below

																/***************** Horizontal-Hover THEME *********************/
																$('body').addClass('horizontal-hover');
																/***************** Horizontal-Hover THEME *********************/
															
Horizontal Layout Styles

How to Enable Horizontal Default Logo

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


																/***************** Default-Logo *********************/
																// $('body').addClass('default-logo');
																/***************** Default-Logo *********************/
															
Remove the comments to enable Default Logo as shown below

																/***************** Default-Logo *********************/
																$('body').addClass('default-logo');
																/***************** Default-Logo *********************/
															

How to Enable Horizontal Center Logo

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


																/***************** Center-Logo *********************/
																// $('body').addClass('center-logo');
																/***************** Center-Logo *********************/
															
Remove the comments to enable Center Logo as shown below

																/***************** Center-Logo *********************/
																$('body').addClass('center-logo');
																/***************** Center-Logo *********************/
															
LocalStorage clear

How to clear LocalStorage (cookie)?

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


					
															// if there is a value stored, update color picker and background color
															// Used to retrive the data from local storage
															if (localStorage.sparicprimaryColor) {
															}
														
															if (localStorage.sparicbgColor) {
															}
															...............
															...............
															
					
															
Step2:

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 Local storage in landing-page:

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() {

															}
															
Primary Color

How to Change Primary Color?

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

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

Rootpath : _bootstrap-styles.scss (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Light Theme Style

How to Change Light Background Color?

Please follow the below steps to change Light Background Color
Step 1 :

To change Light Background 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 color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Text Color?

Please follow the below steps to change Light Text Color
Step 1 :

To change Light Text 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 color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Light Border Color?

Please follow the below steps to change Light Border Color
Step 1 :

To change Light Border 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 color you must run gulp command's . Refer gulp page for more gulp commands click here.

Dark Theme Style

How to Change Dark body Color?

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

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

Rootpath : _bootstrap-styles.scss (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark Theme Color?

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

To change Dark Theme Color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below

Rootpath : _bootstrap-styles.scss (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

How to Change Dark default Color ,border color ,and shadow color?

Please follow the below steps to change Dark default Color ,border color ,and shadow color
Step 1 :

To change Dark default Color ,border color ,and shadow color you have to open _bootstrap-styles.scss file in scss folder and replace what color you want as shown in below

Rootpath : _bootstrap-styles.scss (wwwroot/assets/scss/bootstrap/_bootstrap-styles.scss )

Note : After Changing color you must run gulp command's . Refer gulp page for more gulp commands click here.

Font-use

Google fonts are used in the template. They are as follows: Google Fonts

All Images are used: Pexels.com

Thank you!