noa – CodeIgniter Bootstrap 5 Admin & Dashboard Template

noa - CodeIgniter Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to noa - CodeIgniter Bootstrap 5 Admin & Dashboard Template

noa - CodeIgniter 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 forget to rate it. Thank you so much! 😊

Dashboard

Updated Date: 25/JULY/2022
Author: SPRUKO™
Company: Spruko Technologies Private Limited
Support: support@spruko.com

Thank you for purchasing our admin template. Feel free to contact us any time. We have The Best dedicated team to provide you the best support. If you have any queries please reach us through live chat or email:- sprukotechnologies@gmail.com

noa– is a codeigniter Bootstrap 5 Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. noa admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 110+ PHP 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 HTML 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 Our noa - Codeigniter Bootstrap 5 Admin & Dashboard Template you’ll be getting all the PHP, CSS3, Scss & JS files and you are enabled to get free downloads of all the future updates.

Vertical Menu
Horizontal Click Menu
Horizontal Hover Menu
RTL Ready
110+ php Pages
Bootstrap 5 Responsive Framework
Well Commented Code
24 * 7 Professional Company Support
Regular Updates
50+ Plugins
5 Types of Charts
About US
Blog
Flie Manager
Gallery
Project Pages
Ecommerce Pages
Settings Page
Blog Details
Calendar
Select2
Mail Inbox
10 Types of Icons
File upload
Message Chat
Tickets
Month & Date & Year Range Pickers
Form Elements
Form Editor
Form Wizard
Sweet Alerts
Data Tables
Lockscreen Page
Error Pages
Under Construction Page
User Profile
Task Pages
Invoice Pages
Advanced Pricing Tables
Easy to customize
Google Fonts
More Widgets
Very Easy to Create your Own Site
Neat, clean and simple design
W3C Validated

Installation Process of composer

In order to run CodeIgniter we need to install composer by the followingsteps

Steps to Download & Installation of Composer

Step1: Please visite the Official Web Site of the Composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 7.3 V, here we used 8.0.9 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

The Basic Structure Of CodeIgniter Project

                 
				├── app
				├── public
				├── tests 
				├── vendor 
				├── writable 
				├── .env  
				├── .gitignore 
				├── .htaccess
				├── .htaccess copy
				├── builds
				├── composer.json
				├── composer.lock
				├── env copy
				├── gulpfile.js 
				├── LICENSE
				├── package.json 
				├── package-lock.json
				├── phpunit.xml.dist
				├── README.md 
				└── spark

Step:1 Quick view of Installations

Download and Install the XAMPP from official site https://www.apachefriends.org/download.html

If you have installed XAMPP on your machine then please follow the below steps

Step:2 Run project

1. Launch Xampp and launch the Apache and MySQL servers by clicking the start buttons.

2. Extract the zip folder of the project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

3. Once the extraction is completed, type the localhost url in the browser to access the project. Example: C:\xampp\htdocs\myproject.

Note : Do not forget to start Apache server and MySQL server

1. Basicaly, Gulp is used to compile assets or styles of the project. In order to compile, please follow the below process.

2. First you need to install Node Modules in your project folder

3. And now set your project root path in terminal or command prompt Example: cd C:\xampp\htdocs\myproject\ and type the below command line.

npm install

4. Wait until all the dependencies are downloaded to your project folder.

5. Now you can see the downloaded folder with the name of node_modules in your project folder.

SCSS & CSS

Here we provided the packages.json and gulpfile.js files in your project you just need to run npm install in your terminal at your project root path.

After completion of download, you can compile your SCSS files into css files by using below 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.
`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 `public/assets/css/` folder will be watched and upon changes made to these files, the styles task will be executed.
`gulp skins`	In this template `gulp skins` command is for what ever changes are made in `skin-modes.scss` will be watched and the changes automatically updated in `skin-modes.css` file in css folder.

Upload the Project that you have purchased, based on your uploading process on server

FTP Uploading Process

Access FTP:

Upload Project Files:

Once you successfully accessed your FTP server navigate to the Path: public_html/ in your FTP server.
Now upload and extract the project folder that you have received, in the Path: public_html/
Once the extraction is completed, you can access your project by visiting your domain, Example: www.example.com

cPanel Uploading Process

Access cPanel:

Upload Project Files:

Once you successfully accessed your cPanel dashboard, navigate and click on File Manager
Now open public_html and click on Upload
Here you can select your zipped project folder or you can simply drag and drop your zipped project folder, once the uploading is completed go back to the public_html folder
In the public_html folder, you will find your zipped project folder now you need to extract that project folder
Once the extraction is completed, you can access your project by visiting your domain Example: www.example.com

PHP : "^8.0.9",
Composer : "^2.3.3",
CodeIgniter/Framework : "^4.1.9",

        
							├── app
							|   ├── Config
							|   ├── Controllers
							|   ├── Database
							|   ├── Filters
							|   ├── Helpers
							|   ├── Language
							|   ├── Libraries
							|   ├── Models
							|   ├── ThirdParty
							|   ├── Views
							|   |   ├── errors
							|   |   ├── layouts
							|   |   |   ├── components
							|   |   |   |   ├── app-header.php
							|   |   |   |   ├── app-header1.php
							|   |   |   |   ├── app-sidebar.php
							|   |   |   |   ├── custom-scripts.php
							|   |   |   |   ├── custom-styles.php
							|   |   |   |   ├── custom-switcher.php
							|   |   |   |   ├── footer.php
							|   |   |   |   ├── modal.php
							|   |   |   |   ├── scripts.php
							|   |   |   |   ├── styles.php
							|   |   |   |   ├── switcher.php
							|   |   |   |   ├── switcher-scripts.php
							|   |   |   |   └── switcher-styles.php
							|   |   |   ├── landing
							|   |   |   |   ├── footer.php
							|   |   |   |   ├── header.php
							|   |   |   |   ├── main.php
							|   |   |   |   ├── scripts.php
							|   |   |   |   ├── sidebar.php
							|   |   |   |   ├── styles.php
							|   |   |   |   └── switcher.php
							|   |   |   ├── custom-main.php
							|   |   |   ├── main.php
							|   |   |   └── swicher-main.php
							|   |   └── pages
							|   |       └── 110+ .php (files)
							|   ├── Common.php
							|   └── index.html
							├── public
							|   ├── assets
							|   ├── .htaccess
							|   ├── favicon
							|   ├── index.php
							|   └── robots.txt
							├── tests
							|   ├── _support
							|   ├── database
							|   ├── session
							|   ├── unit
							|   └── README.md 
							├── writable
							|   ├── cache
							|   ├── debugbar
							|   ├── logs
							|   ├── session
							|   ├── uploads
							|   └── .htaccess
							├── .env
							├── .gitignore
							├── .htaccess
							├── .htaccess Copy
							├── builds
							├── composer.json
							├── composer.lock
							├── env copy
							├── gulpfile.js
							├── LICENCE
							├── package.json
							├── package-lock.json
							├── phpunit.xml.dist
							├── README.md
							└── spark

SWITCHER?

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

How to add switcher to the template?

Go to root path: app/views/layouts/components/styles.php open "styles.php" file and add switcher css links given below.

     
			Add switcher css:

				
			<!-- INTERNAL SWITCHER CSS -->
			<link href="<?php echo base_url('assets/switcher/css/switcher.css'); ?>" rel="stylesheet"/>
			<link href="<?php echo base_url('assets/switcher/demo.css'); ?>" rel="stylesheet"/>

Go to root path: app/views/layouts/components/scripts.php open "scripts.php" file and add switcher.js links given below.

     
			Add switcher js:

			<!-- INTERNAL SWITCHER JS -->
			<script src="<?php echo base_url('assets/switcher/js/switcher.js'); ?>"></script>

Go to root path: app/views/layouts/components/scripts.php open "scripts.php" file and then change custom.js link to custom1.js link given below.

     
				change custom js link

				Before :
				<!-- CUSTOM JS -->
				<script src="<?php echo base_url('assets/js/custom.js'); ?>"></script>
				
				After :
				<!-- CUSTOM1 JS -->
				<script src="<?php echo base_url('assets/js/custom1.js'); ?>"></script>

NOTE: Custom1.js file is only used when you want to use switcher for your template.

Go to root path: app/views/layouts/main.php open "main.php" file and then Replace app-header.php to app-header1.php given below.

     	
		Before :
		

		After :

Go to root path: app/views/layouts/main.php open main.php in that file, below the body tag switcher path given below.

     
		Switcher path:

How to add switcher for Landing page?

Go to root path: app/views/layouts/landing/styles.php open "styles.php" file and add switcher css links given below.

     
		Add switcher css:
		
		<!-- INTERNAL SWITCHER CSS -->
		<link href="<?php echo base_url('assets/switcher/css/switcher.css'); ?>" rel="stylesheet"/>
		<link href="<?php echo base_url('assets/switcher/demo.css'); ?>" rel="stylesheet"/>

Go to root path: app/views/layouts/landing/main.php open "main.php" file and then Replace header.php to app-header1.php given below.

     	
		Before :
		

		After :

Go to root path: app/views/layouts/landing/main.php open "main.php"file and then Replace sidebar.php to sidebar1.php given below.

     	
		Before :
		

		After :

Go to root path: app/views/layouts/landing/main.php open main.php in that file, below the body tag switcher path given below.

     
		Switcher path:

NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).

How to add switcher for custom pages?

Go to root path: app/views/layouts/components/custom-styles.php open "custom-styles.php" file and add switcher css links given below.

     
		Add switcher css:
		
		<!-- INTERNAL SWITCHER CSS -->
		<link href="<?php echo base_url('assets/switcher/css/switcher.css'); ?>" rel="stylesheet"/>
		<link href="<?php echo base_url('assets/switcher/demo.css'); ?>" rel="stylesheet"/>

Go to root path: app/views/layouts/components/custom-scripts.php open "custom-scripts.php" file then add switcher.js link given below.

     
		Add switcher js:

		<!-- SWITCHER JS -->
		<script src="<?php echo base_url('assets/switcher/js/switcher.js'); ?>"></script>

Go to root path: app/views/layouts/components/custom-scripts.php open "custom-scripts.php" file then add custom1.js link given below.

     
		change custom js link :

		Before :

		<!-- CUSTOM JS -->
		<script src="<?php echo base_url('assets/js/custom.js'); ?>"></script>
				
		After :
	
		<!-- CUSTOM1 JS -->
		<script src="<?php echo base_url('assets/js/custom1.js'); ?>"></script>

Go to root path: app/views/layouts/custom-main.php open "custom-main.php" in that file, below the "body tag" switcher icon code given below.

Go to root path apps/views/layouts/custom-main.php open custom-main.php in that file, below the "body tag" switcher path given below.

Chart color

NOTE: If you want to change your chart colors according to the theme colors, then follow the process.(Skip this process if this is not your requirement).

How to change colors of any chart according to the primary color of the template?

Assume that you want to add chart in empty.php page then create an empty.js file, which is used for that particular page only.
Place your chart data in the empty.js file in a particular function related to that chart. If you are using more than one chart in empty.php page, then please create a new function() and a new id (here id is nothing but a name that you used for your particular chart. function() name and ID name must be unique for every chart).
Here i created a new function with name (myChart()) for my new chart in empty.php page

     

		for chart 1:	function myChart1() {

				----chart1 data----
				#chartId1

						}

		for chart 2:	function myChart2() {

				----chart2 data----
				#chartId2
							}

How to apply colors to the new chart?

Open themecolor.js (root path: public/assets/js/themecolor.js) and paste the below code inside of the function names() function of (// chart colors) section.

     

	export function names() {

		Ex:
			if(document.querySelector('#chartId1') !== null){
				myChart1();
			}

			if(document.querySelector('#chartId2') !== null){
				myChart2();
			}

Here (#chartId1) is nothing but, the id that you used for your particular chart.
Here myChart1(); is nothing but a function that you used for your particular chart.
Open empty.js file and add( myVarVal ) variable in a place, where you want to change the colors of your chart according to the primary color of the template.
NOTE: For more understanding please refer below code which we used in index1.js file present in root path: "public/assets/js/index1.js".


											colors: [ myVarVal || "#38cab3","#e4e7ed"],

Here myVarVal is nothing but a variable name, if you use this variable anywhere then the color of that particular place will change according to theme color

FAQ'S

1) How to Change Font Style ?

Step 1:

Go To _fonts.scss (public/assets/scss/custom/fonts/_fonts.scss )

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

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in _fonts.scss

Example:

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

Step 3:

And add the Your Selected font-family in _bootstrap-styles.scss(public/assets/scss/bootstrap/_bootstrap-styles.scss)

Example:

           
													body {
														margin: 0;
														font-family: "Roboto", sans-serif;
														font-size: 0.8375rem;
														font-weight: 400;
														line-height: 1.5;
														color: $default-color;
														text-align: left;
														background-color: $background;
													}

2) How to Change Sidemenu and Header icon?

NOTE :Sidemenu & Header Icons used in Noa are fromhttps://iconscout.com/unicons (Thin Line Icons).

Changing Sidemenu Icon :

You can change sidemenu icon by replacing svg code of selected icon with svg code of required icon and add class="side-menu__icon" for that svg icon

Changing Header Icon :

You can change Header icon by simply replacing svg code of selected icon with svg code of required icon.

3) How to Change Primary Color ?

Step 1:

Go To _bootstrap-styles.scss (public/assets/scss/bootstrap/_bootstrap-styles.scss )

You will find --primary-bg-color: #8FBD56; , where you can simply change color code to change primary color

How to Change Primary Color

Example:

Simply you can also change color for primary-bg-hover:#5cd3b9; & --primary-bg-border:#38cab3; , where you can simply change color code to change them

4) How to Change Logo ?

Go To "public/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.

5) How to Enable RTL Version?

Changing to RTL version

open custom.js path:(public/assets/js/custom.js) file go to RTL Style. and remove comments for $('body').addClass('rtl'); to enable RTL version as shown in below

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

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

     
														$('body').addClass('rtl');

6) How to Enable Darktheme?

open custom.js path:(public/assets/js/custom.js) file go to Dark Theme Style and remove comments for $('body').addClass('dark-mode'); to enable dark-mode style as shown in below

     
													// DARK THEME START
														// $('body').addClass('dark-mode');
													// DARK THEME END

Remove the comments to enable dark-mode as shown below

     
													// DARK THEME START
														$('body').addClass('dark-mode');
													// DARK THEME END

7) How to change Dark Background Color?

Step 1:

Go To _bootstrap-styles.scss (public/assets/scss/bootstrap/_bootstrap-styles.scss )

You will find --dark-body: #2c2f3e; , where you can simply change color code to change dark background color

How to change Dark Background Color

Example:

8) How to Enable Background image?

open custom.js path:(public/assets/js/custom.js) file go to Background Image Styles and remove comments for bg-img1 & dark-mode to enablebackground image style as shown in below

     
													// Bg-Image1 Style Start
														// $('body').addClass('bg-img1');
														// $('body').addClass('dark-mode');
													// ! Bg-Image1 Style End

Remove the comments to enable bg-img1 & transparent-theme as shown below

     
													// Bg-Image1 Style Start
														$('body').addClass('bg-img1');
														$('body').addClass('dark-mode');
													// ! Bg-Image1 Style End

NOTE: Similarly you can apply bg-img2,bg-img3,bg-img4

NOTE: We can't use menu styles and header styles in Background Image

Go To "public/assets/img/media" folder and replace your image with Previous image(bg-img1) within 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.

9) How to Enable Color-header?

open custom.js path:(public/assets/js/custom.js) file go to Header Styles. and remove comments for color-header to enable color-header style as shown in below

     
													// COLOR HEADER START
														// $('body').addClass('color-header');
													// COLOR HEADER END

Remove the comments to enable color-header as shown below

     
													// COLOR HEADER START
														$('body').addClass('color-header');
													// COLOR HEADER END

10) How to Enable Dark-header?

open custom.js path:(public/assets/js/custom.js) file go to Header Styles. and remove comments for dark-header to enable dark-header style as shown in below

     
													// DARK HEADER START
														// $('body').addClass('dark-header');
													// DARK HEADER END

Remove the comments to enable dark-header as shown below

     
													// DARK HEADER START
														$('body').addClass('dark-header');
													// DARK HEADER END

11) How to Enable Light-header?

open custom.js path:(public/assets/js/custom.js) file go to Header Styles. and remove comments for header-light to enable light-header style as shown in below

     
													// LIGHT HEADER START
														// $('body').addClass('header-light');
													// LIGHT HEADER END

Remove the comments to enable light-header as shown below

     
													// LIGHT HEADER START
														$('body').addClass('header-light');
													// LIGHT HEADER END

12) How to Enable Gradient-header?

open custom.js path:(public/assets/js/custom.js) file go to Header Styles. and remove comments for gradient-header to enable gradient-header style as shown in below

     
													// GRADIENT HEADER START
														// $('body').addClass('gradient-header');
													// GRADIENT HEADER END

Remove the comments to enable gradient-header as shown below

     
													// GRADIENT HEADER START
														$('body').addClass('gradient-header');
													// GRADIENT HEADER END

13) How to Enable Light Menu?

open custom.js path:(public/assets/js/custom.js) file go to Menu Styles. and remove comments for light-menu to enable light-menu style as shown in below

     
													// LIGHT LEFTMENU START
														// $('body').addClass('light-menu');
													// LIGHT LEFTMENU END

Remove the comments to enable light-menu as shown below

     
													// LIGHT LEFTMENU START
														$('body').addClass('light-menu');
													// LIGHT LEFTMENU END

14) How to Enable Color Menu?

open custom.js path:(public/assets/js/custom.js) file go to Menu Styles. and remove comments for color-menu to enable color-menu style as shown in below

     
													// COLOR LEFTMENU START
														// $('body').addClass('color-menu');
													// COLOR LEFTMENU END

Remove the comments to enable color-menu as shown below


													// COLOR LEFTMENU START
														$('body').addClass('color-menu');
													// COLOR LEFTMENU END

15) How to Enable Dark Menu?

open custom.js path:(public/assets/js/custom.js)file go to Menu Styles. and remove comments for dark-menu to enable dark-menu style as shown in below

     
													// DARK LEFTMENU START
														// $('body').addClass('dark-menu');
													// DARK LEFTMENU END

Remove the comments to enable dark-menu as shown below

     
													// DARK LEFTMENU START
														$('body').addClass('dark-menu');
													// DARK LEFTMENU END

16) How to Enable Gradient Menu?

open custom.js path:(public/assets/js/custom.js)file go to Menu Styles. and remove comments for gradient-menu to enable gradient-menu style as shown in below

     
													// GRADIENT LEFTMENU START
														// $('body').addClass('gradient-menu');
													// GRADIENT LEFTMENU END

Remove the comments to enable gradient-menu as shown below

     
													// GRADIENT LEFTMENU START
														$('body').addClass('gradient-menu');
													// GRADIENT LEFTMENU END

17) How to Enable Boxed-Layout?

open custom.js path:(public/assets/js/custom.js)file go to Layout Styles. and remove comments for layout-boxed to enable layout-boxed style as shown in below

     
													// BOXED LAYOUT START
														// $('body').addClass('layout-boxed');
													// BOXED LAYOUT END

Remove the comments to enable layout-boxed as shown below

     
													// BOXED LAYOUT START
														$('body').addClass('layout-boxed');
													// BOXED LAYOUT END

18) How to Enable Scrollable-Layout?

open custom.js path:(public/assets/js/custom.js) file go to HEADER POSITION STYLES START. and remove comments for scrollable-layout to enable scrollable-layout style as shown in below

     
													// HEADER POSITION STYLES START
														// $('body').addClass('scrollable-layout');
													// HEADER POSITION STYLES END

Remove the comments to enable scrollable-layout as shown below

     
													// HEADER POSITION STYLES START
														$('body').addClass('scrollable-layout');
													// HEADER POSITION STYLES END

19) How to Enable Sidemenu-Icon-with Text?

open custom.js path:(public/assets/js/custom.js) file and remove comments for ICONTEXT SIDEMENU START to enable sidemenu-icontext style as shown in below

     
													// ICONTEXT SIDEMENU START
													// $('body').addClass('icontext-menu');
													// $('body').addClass('sidenav-toggled');
													// if((document.querySelector('body').classList.contains('login-img')) ){
													//     return;
													// }       
													// else if((document.querySelector('body').classList.contains('error-bg'))){
													//     return;
													// }
													// else{
													//     icontext();
													// }
													// ICONTEXT SIDEMENU END

Remove the comments to enable sidemenu-icontext as shown below

     
													// ICONTEXT SIDEMENU START
														$('body').addClass('icontext-menu');
														$('body').addClass('sidenav-toggled');
														if((document.querySelector('body').classList.contains('login-img')) ){
															return;
														}       
														else if((document.querySelector('body').classList.contains('error-bg'))){
															return;
														}
														else{
															icontext();
														}
													// ICONTEXT SIDEMENU END

20) How to Enable Closed-Menu?

open custom.js path:(public/assets/js/custom.js) file and remove comments for CLOSED SIDEMENU START to enable closed menu style as shown in below

     
													// CLOSED SIDEMENU START
														// $('body').addClass('closed-leftmenu');
														// $('body').addClass('sidenav-toggled');
													// CLOSED SIDEMENU END

Remove the comments to enable Closed Sidemenu as shown below

     
													// CLOSED SIDEMENU START
														$('body').addClass('closed-leftmenu');
														$('body').addClass('sidenav-toggled');
													// CLOSED SIDEMENU END

21) How to Enable Icon Overlay

open custom.js path:(public/assets/js/custom.js) file and remove comments for ICON OVERLAY SIDEMENU START to enable Icon Overlay style as shown in below

     
													// ICON OVERLAY SIDEMENU START
													// $('body').addClass('icon-overlay');
													// $('body').addClass('sidenav-toggled');
													// if((document.querySelector('body').classList.contains('login-img')) ){
													//     return;
													// }       
													// else if((document.querySelector('body').classList.contains('error-bg'))){
													//     return;
													// }
													// else{
													//     hovermenu();
													// }
													// ICON OVERLAY SIDEMENU END

Remove the comments to enable sideicon-menu as shown below

     
													// ICON OVERLAY SIDEMENU START
														$('body').addClass('icon-overlay');
														$('body').addClass('sidenav-toggled');
														if((document.querySelector('body').classList.contains('login-img')) ){
															return;
														}       
														else if((document.querySelector('body').classList.contains('error-bg'))){
															return;
														}
														else{
															hovermenu();
														}
													// ICON OVERLAY SIDEMENU END

22) How to Enable Hover Submenu

open custom.js path:(public/assets/js/custom.js) file and remove comments for HOVER SUBMENU START to enable Hover submenu style as shown in below

     
													// HOVER SUBMENU START
													// $('body').addClass('hover-submenu');
													// $('body').addClass('sidenav-toggled');
													// if((document.querySelector('body').classList.contains('login-img')) ){
													//     return;
													// }       
													// else if((document.querySelector('body').classList.contains('error-bg'))){
													//     return;
													// }
													// else{
													//     hovermenu();
													// }
													// HOVER SUBMENU END

Remove the comments to enable Hover Submenu as shown below

     
													// HOVER SUBMENU START
														$('body').addClass('hover-submenu');
														$('body').addClass('sidenav-toggled');
														if((document.querySelector('body').classList.contains('login-img')) ){
															return;
														}       
														else if((document.querySelector('body').classList.contains('error-bg'))){
															return;
														}
														else{
															hovermenu();
														}
													// HOVER SUBMENU END

23) How to Enable Hover Submenu style1

open custom.js path:(public/assets/js/custom.js) file and remove comments for HOVER SUBMENU STYLE-1 START to enable Hover submenu style1 style as shown in below

     
													// HOVER SUBMENU STYLE-1 START
													// $('body').addClass('hover-submenu1');
													// $('body').addClass('sidenav-toggled');
													// if((document.querySelector('body').classList.contains('login-img')) ){
													//     return;
													// }       
													// else if((document.querySelector('body').classList.contains('error-bg'))){
													//     return;
													// }
													// else{
													//     hovermenu();
													// }
													// HOVER SUBMENU STYLE-1 END

Remove the comments to enable Hover Submenu Style1 as shown below

     
													// HOVER SUBMENU STYLE-1 START
														$('body').addClass('hover-submenu1');
														$('body').addClass('sidenav-toggled');
														if((document.querySelector('body').classList.contains('login-img')) ){
															return;
														}       
														else if((document.querySelector('body').classList.contains('error-bg'))){
															return;
														}
														else{
															hovermenu();
														}
													// HOVER SUBMENU STYLE-1 END

24) How to Enable Horizontal layout

open custom.js path:(public/assets/js/custom.js) file and remove comments for horizontal to enable Horizontal layout style as shown in below

     
													// $('body').addClass('horizontal');

Remove the comments to enable Horizontal layout as shown below

     
													$('body').addClass('horizontal');

25) How to Enable Horizontal Hover layout

open custom.js path:(public/assets/js/custom.js) file and remove comments for horizontal-hover to enable Horizontal Hover layout style as shown in below

     
													// $('body').addClass('horizontal-hover');

Remove the comments to enable Horizontal Hover layout as shown below

     
													$('body').addClass('horizontal-hover');

26) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

open custom.js path:(public/assets/js/custom.js) file nowrap is enabled by default,If you want wrap style uncomment wrap style code and comment nowrap style as shown below.

     
													// To enable no-wrap horizontal style
													$('#slide-left').removeClass('d-none');
													$('#slide-right').removeClass('d-none');
													document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'
													// To enable wrap horizontal style
													// $('#slide-left').addClass('d-none');
													// $('#slide-right').addClass('d-none');
													// document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'

uncomment wrap horizontal style and comment no-wrap horizontal style as shown below

     
														// To enable no-wrap horizontal style
														// $('#slide-left').removeClass('d-none');
														// $('#slide-right').removeClass('d-none');
														document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'
														// To enable wrap horizontal style
														$('#slide-left').addClass('d-none');
														$('#slide-right').addClass('d-none');
														// document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'

Below Image Shows How Wrap and Nowrap Styles Looks like.

Example:

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus

To clear LocalStorage(cookie)

How to clear LocalStorage (cookie)?

Step1:

Open themeColors.js file public/assets/js/themeColors.js

To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below


function localStorageBackup() {

}

Step2:

To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js public/assets/js/themeColors.js , custom.js public/assets/js/custom.js and custom1.js public/assets/js/custom1.js files.

LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear and localStorageBackup(). Below are the some examples to find out.


	localStorage.setItem('noalightMode', true);
	localStorage.removeItem('noadarkPrimary')
	localStorage.getItem("noaprimaryColor");
	localStorageBackup();

Landing Page FAQ's

1) How to Enable LANDING Page RTL Version?

Changing to RTL Version

open custom.js path:(public/assets/js/landing.js) file go to RTL Style. and remove comments for $('body').addClass('rtl'); to enable RTL version as shown in below

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

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

     
														$('body').addClass('rtl');

2) How to Enable LANDING Page Darktheme?

open landing.js path:(public/assets/js/landing.js) file go to Dark Theme Style and remove comments for $("body").addClass("dark-mode"); to enable dark-mode style as shown in below

     
													// DARK THEME START
														// $('body').addClass('dark-mode');
													// DARK THEME END

Remove the comments to enable dark-mode as shown below

     
													// DARK THEME START
														$('body').addClass('dark-mode');
													// DARK THEME END

Bootstrap
https://getbootstrap.com/
Jquery
https://jquery.com/
Jquery Datepicker
https://jqueryui.com/datepicker/
Jquery Timepicker
https://jonthornton.github.io/jquery-timepicker/
Perfect-scrollbar
https://github.com/mdbootstrap/perfect-scrollbar
Full Calendar
https://fullcalendar.io/
File Uploads
https://www.jqueryscript.net/demo/jQuery-Plugin-To-Beautify-File-Inputs-with-Custom-Styles-Dropify/
Select2
https://select2.org/
Datatable
https://datatables.net/
Font Awesome Icons
https://fontawesome.com/
Material Design Icons
https://materialdesignicons.com/
Simpleline Icons
https://iconify.design/icon-sets/simple-line-icons/
Ionicons
https://ionicons.com/
ion.rangeSlider
http://ionden.com/a/plugins/ion.rangeSlider/index.html
jquery-countdown
http://keith-wood.name/countdown.html
jquery-inputmask
https://robinherbots.github.io/Inputmask/
jquery-sparkline
https://omnipotent.net/jquery.sparkline/#s-about
jQuery StarRatingSvg
http://github.com/nashio/star-rating-svg
Sweet-alert
https://lipis.github.io/bootstrap-sweetalert/
Sparkline Charts
https://omnipotent.net/jquery.sparkline/#s-about
Chartjs
https://www.chartjs.org/
Flotcharts
https://www.flotcharts.org/plugins/
Echarts
https://echarts.apache.org/en/index.html
Morris Chart
https://morrisjs.github.io/morris.js/
Wysiwyag
https://www.jqueryscript.net/demo/Rich-Text-Editor-jQuery-RichText/
Summernote Editor
https://summernote.org/

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

All Images are used: Pexels.com

noa - CodeIgniter Bootstrap 5 Admin & Dashboard Template

Introduction

Welcome to noa - CodeIgniter Bootstrap 5 Admin & Dashboard Template

Dashboard

Template Description

Main Features

Installation Process of composer

In order to run CodeIgniter we need to install composer by the followingsteps

Steps to Download & Installation of Composer

The Basic Structure Of CodeIgniter Project

How to Run CodeIgniter Project in localhost

Step:1 Quick view of Installations

Step:2 Run project

How to use GULP

SCSS & CSS

Installation Instructions For both CPANEL’S and FTP

FTP Uploading Process

cPanel Uploading Process

Version

Over All Folder Structure

SWITCHER?

How to add switcher to the template?

How to add switcher for Landing page?

How to add switcher for custom pages?

Chart color

How to change colors of any chart according to the primary color of the template?

How to apply colors to the new chart?

FAQ'S

1) How to Change Font Style ?

Step 1:

How to Select font Family

Step 2:

Step 3:

2) How to Change Sidemenu and Header icon?

Changing Sidemenu Icon :

Changing Header Icon :

3) How to Change Primary Color ?

Step 1:

How to Change Primary Color

4) How to Change Logo ?

5) How to Enable RTL Version?

Changing to RTL version

6) How to Enable Darktheme?

7) How to change Dark Background Color?

Step 1:

How to change Dark Background Color

8) How to Enable Background image?

9) How to Enable Color-header?

10) How to Enable Dark-header?

11) How to Enable Light-header?

12) How to Enable Gradient-header?

13) How to Enable Light Menu?

14) How to Enable Color Menu?

15) How to Enable Dark Menu?

16) How to Enable Gradient Menu?

17) How to Enable Boxed-Layout?

18) How to Enable Scrollable-Layout?

19) How to Enable Sidemenu-Icon-with Text?

20) How to Enable Closed-Menu?

21) How to Enable Icon Overlay

22) How to Enable Hover Submenu

23) How to Enable Hover Submenu style1

24) How to Enable Horizontal layout

25) How to Enable Horizontal Hover layout

26) How to Enable Horizontal or Horizantal Hover layout With Wrap Style

Below Image Shows How Wrap and Nowrap Styles Looks like.

To clear LocalStorage(cookie)

How to clear LocalStorage (cookie)?

Step1:

Step2:

Landing Page FAQ's

1) How to Enable LANDING Page RTL Version?

Changing to RTL Version

2) How to Enable LANDING Page Darktheme?

Sources

Font Used

THANK YOU!