noa - PHP 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 it will be easy for you to understand.
If You Love Our Template Design Please don't forget to rate it. Thank you so much! 😊
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 PHP 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 by 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 noa-PHP Admin & Dashboard Template, you will be able to get free download of all future updates.
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── plugins
| ├── scss
| └── switcher
├── layouts
| ├── landing
| | ├── footer.php
| | ├── header.php
| | ├── header1.php
| | ├── scripts.php
| | ├── sidebar.php
| | ├── sidebar1.php
| | ├── styles.php
| | └── switcher.php
| ├── app-header.php
| ├── app-header1.php
| ├── app-sidebar.php
| ├── custom-scripts.php
| ├── custom-styles.php
| ├── custom-switcher.php
| ├── footer.php
| ├── main-scripts.php
| ├── modal.php
| ├── scripts.php
| ├── styles.php
| └── switcher.php
└── pages
└── (110+ .php pages)
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
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.
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 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.
|
1. In the assets folder you will see colors, css, iconfonts, images, js, plugins and switcher folders
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── plugins
| ├── scss
| └── switcher
2. Now you can compile or customize your styles in scss files that are present in the assets folder.
3. Once the changes made in the files in order to apply those changes to your template you need to run the gulp commands in the same terminal or command prompt that you have set your project root path.
4. After Compilation, all your .scss files are converted into .css.
Upload the Project that you have purchased, based on your uploading process on server
├── assets
| ├── css
| ├── iconfonts
| ├── images
| ├── js
| ├── plugins
| ├── scss
| └── switcher
├── layouts
| ├── landing
| | ├── footer.php
| | ├── header.php
| | ├── header1.php
| | ├── scripts.php
| | ├── sidebar.php
| | ├── sidebar1.php
| | ├── styles.php
| | └── switcher.php
| ├── app-header.php
| ├── app-header1.php
| ├── app-sidebar.php
| ├── custom-scripts.php
| ├── custom-styles.php
| ├── custom-switcher.php
| ├── footer.php
| ├── main-scripts.php
| ├── modal.php
| ├── scripts.php
| ├── styles.php
| └── switcher.php
├── pages
| └── (110+ .php pages)
├── gulpfile.js
├── package.json
└── package-lock.json
If you want to add switcher to your template follow the below process.
Go to root path:
layouts/styles.php
open "styles.php"
file and add
switcher css links given below.
Go to root path:
layouts/main-scripts
open
"main-scripts.php"
file and add switcher.js
links
given below.
Go to root path:
layouts/main-scripts.php
open
"main-scripts.php"
file and then change custom.js link to
custom1.js
link given below.
Go to root path:
pages
open
"All php pages"
file and then Replace app-header.php
to
app-header1.php
given below.
Go to root
path: pages
open
All php pages
in that file, below the
body tag
switcher path given below.
Go to root path:
layouts/landing/styes
open
"styles.php"
file and add
switcher css links given below.
Go to root path:
pages
open
"Landing php page"
file and then Replace header.php
to
header1.php
given below.
Go to root path:
pages
open
"Landing php page"
file and then Replace sidebar.php
to
sidebar1.php
given below.
Go to root
path: pages
open
Landing php page
in that file, below the
body tag
switcher path given below.
NOTE:The switcher is different for custom pages, if you want to add switcher to the custom pages then follow the process.(Skip this process if this is not your requirement).
Go to root path:
layouts/custom-styles
open
"custom-styles.php"
file and add
switcher css links given below.
Go to root
path: layouts/custom-scripts
open
"custom-scripts.php"
file then add
switcher.js
link given below.
Go to root path:
layouts/custom-scripts
open
"custom-scripts.php"
file and then change custom.js link to
custom1.js
link given below.
Go to root
path: pages
open
"Custom php pages"
in the body section add
the "custom switcher icon code"
given below.
Go to root path
pages
open Custom php pages
in the
body
section add the custom switcher path
given below.
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).
(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
}
Open themecolor.js (root path: 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();
}
colors: [ myVarVal || "#38cab3","#e4e7ed"],
Go To _fonts.scss (assets/scss/custom/fonts/_fonts.scss )
if you want to change another font-family Go to the site Google Fonts And Slect One font Family and import In to style.css file
Example:
And paste Your Selected font-family in _fonts.scss
Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");And add the Your Selected font-family in _bootstrap-styles.scss(assets/scss/bootstrap/_bootstrap-styles.scss)
Example:
NOTE :Sidemenu & Header Icons used in Noa are
fromhttps://iconscout.com/unicons
(Thin Line Icons).
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
You can change Header icon by simply replacing svg code of selected icon with svg code of required icon.
Go To _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )
You will find --primary-bg-color: #8FBD56;
, where you can
simply change color code 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
Go To "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.
open custom.js
path:(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')
as shown below
open custom.js path:(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-mode
as
shown below
Go To _bootstrap-styles.scss (assets/scss/bootstrap/_bootstrap-styles.scss )
You will find --dark-body: #2c2f3e;
, where you can simply
change color code to change dark background color
Example:
open custom.js path:(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-img1 & transparent-theme
as shown below
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 "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.
open custom.js path:(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
as shown below
open custom.js path:(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
as
shown below
open custom.js path:(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
as shown below
open custom.js path:(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
as shown below
open custom.js path:(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-menu
as
shown below
open custom.js path:(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-menu
as
shown below
open custom.js
path:(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-menu
as
shown below
open custom.js
path:(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-menu
as shown below
open custom.js
path:(assets/js/custom.js)
file go to Layout
Styles. and remove comments for layout-boxed
to enable
layout-boxed style as shown in below
layout-boxed
as shown below
open custom.js path:(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
scrollable-layout
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for ICONTEXT SIDEMENU START
to
enable sidemenu-icontext style as shown in below
sidemenu-icontext
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for CLOSED SIDEMENU START
to
enable closed menu style as shown in below
Closed Sidemenu
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for ICON OVERLAY SIDEMENU START
to
enable Icon Overlay style as shown in below
sideicon-menu
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for HOVER SUBMENU START
to enable
Hover submenu style as shown in below
Hover Submenu
as shown below
open custom.js path:(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 Style1
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for horizontal
to enable
Horizontal layout style as shown in below
Horizontal layout
as shown below
open custom.js path:(assets/js/custom.js)
file and remove comments for horizontal-hover
to enable
Horizontal Hover layout style as shown in below
Horizontal Hover layout
as shown below
open custom.js Example: Simply you can change path:(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.
uncomment wrap horizontal style and comment no-wrap
horizontal style as shown below
Below Image Shows How Wrap and Nowrap Styles Looks like.
noWrap
with wrap
to
change the style of Horizontal or Horizontal Hover Menus
Open themeColors.js file assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below
To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js assets/js/themeColors.js
, custom.js assets/js/custom.js
and custom1.js 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.
open custom.js
path:(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')
as shown below
open landing.js path:(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-mode
as
shown below
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com