Thank you for showing interest towards our admin template. If you have any queries feel free to contact us at any time. We have a dedicated team to provide you the best support. live chat or email : sprukotechnologies@gmail.com.
If You Love Our Template Design Please don't forget to rate it. Thank you so much!
Nowa – Django Bootstrap 5 Admin & Dashboard Template, With this template format it is very easy to create a presence and grab someone's attention around the web Because this template is built using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please make sure that before you start working with Nowa template go through the documentation for easy understanding.
Nowa – Django Bootstrap 5 Admin & Dashboard Template built with modern and minimal design. It is fully flexible user-friendly and responsive. Nowa admin template is powered with Django, HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 100+ HTML Pages, 50+ Plugins and more UI elements. There is no need to spend more time to customize this template, we've already made it easy for you to customize as how you like. Added advanced Form-Elements like Date pickers ,Password Input, Text Area, Select Drop Down, Check Box, Radio Input, File Input etc,. After Purchasing our template you will be getting all HTML, CSS, Scss and JS files.
This template is ready for admin Backend design, easy customizable components and widgets.
It is built with fully responsive and flexible for all type of devices like Desktops, iPhone, iPad, Tablets and all other smart phone devices. Works on all major Web Browsers
Once you Purchased Nowa – Django Bootstrap 5 Admin & Dashboard Template you will be able to get all the future updates for free.
Vertical-menu | Horizontal click menu | Horizontal hover menu | RTL ready |
110 Plus HTML Pages | Bootstrap 5 Responsive Framework | Well Commented Code | 24 * 7 Professional Company Support |
Regular Updates | 50+ Plugins | 6 types of Charts | Select2 |
About us | Blog | File Manager | Gallery |
Image-Comparision | Ecommerce Pages | Settings Page | Blog Details |
Calendar | Mail Inbox | 12 Types of Icon sets | File upload |
Message Chat | Form Elements | Month & Date & Year Range Pickers | FormAdvanced Elements |
Data Tables | Lockscreen Page | Error Page | User Profile |
Invoice Page | Advanced Pricing Tables | Easy to customize | More Widgets |
Very Easy to Create your Own Site | Neat, clean and simple design | W3C Validated |
Step1: Please visite the Official Web Site of the Python python.org
Step2: Click on the Download Python button
Step3: Now your Python setup file has downloaded
Step4: Now Right click on the Python setup file and select Run as administrator click on Yes
Step5: Please click on the Check Box Add Python to PATH. And select Customize installation option
Step6: Click on Install for all users. And click on the Install button to install python on your system
Step7: To check whether Python is installed or not type python --version
in your terminal or console
Step8: The pip package is automatically installed with your python installation
Step9: To check whether pip package is installed or not type pip --version
in your terminal or console
NOTE: Please follow the official web site python.org to install on Linux/UNIX OS.
python -m venv env
in your terminal or consoleenv\scripts\activate
If you know how to create Django project you can skip this step.
C:\Users\ADMIN01>
and type pip install django
to install Django globally.python -m django --version
in your terminal or consoleC:\Users\ADMIN01\Desktop\django>
.django-admin startproject projectname
and hit enter to create Django project. Here projectname is nothing but your django project folder name that you want to keep as your project nameC:\Users\ADMIN01\Desktop\django\projectname>
in your command prompt and type python manage.py startapp appname
pip install -r requirements.txt
NOTE: If you have any further queries in installation please refer to the official website HERE
python manage.py runserver
├── app
| ├── __pycache__
| ├── migrations
| ├── templates/
| | ├── components
| | | ├── layouts
| | | ├── base.html
| | | ├── custom-base.html
| | | └── switcher-base.html
| | └── 119 HTML files
├── Nowa
├── static
| └── assets
├── db.sqlite3
├── gulpfile.js
├── manage.py
├── package-lock.json
├── package.json
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 compilation of download, you can compile your SCSS into CSS files by following the below procedure.
Command | Description |
---|---|
gulp
|
Runs the project locally, starts the development server and watches for any changes in your sass files and folders etc. The development server is accessible at http://localhost:8000. |
gulp watch
|
In this template gulp watch command is for what ever changes made in scss files, will watch and compiled into css files.
|
gulp dark
|
In this template gulp dark command is for what ever changes that are made in dark.scss file will be compiled and the changes will update in dark.css file in css folder.
|
gulp skin
|
In this template gulp skin command is for what ever changes are made in skin-modes.scss file will be compiled and the changes will update in skin-modes.css file in css folder.
|
gulp transparent
|
In this template gulp transparent command is for what ever changes are made in transparent.scss file will be compiled and the changes will update in transparent.css file in css folder.
|
├── app/
| ├── __pycache__
| ├── migrations
| ├── templates/
| | ├── components
| | | ├── layouts
| | | | ├── app-header.html
| | | | ├── app-sidebar.html
| | | | ├── custom-scripts.html
| | | | ├── custom-styles.html
| | | | ├── footer.html
| | | | ├── modal.html
| | | | ├── scripts.html
| | | | ├── styles.html
| | | | ├── sidebar-right.html
| | | | ├── switcher-header.html
| | | | └── switcher.html
| | | ├── base.html
| | | ├── custom-base.html
| | | └── switcher-base.html
| | └── 119 HTML files
| ├── __init__.py
| ├── admin.py
| ├── apps.py
| ├── models.py
| ├── tests.py
| ├── urls.py
| └── views.py
├── Nowa/
| ├── __pycache__
| ├── __init__.py
| ├── asgi.py
| ├── settings.py
| ├── urls.py
| └── wsgi.py
├── static/
| └── assets
├── db.sqlite3
├── gulpfile
├── manage.py
└── package.json
By default the switcher is enabled in your template, if you want to remove switcher from your template please follow the process
Go to root path: app/templates/components/
open "base.html"
in that file, below the body tag remove the swithcer link as shown below.
Go to root path: app/templates/components/layouts/
open "styles.html"
file and remove switcher css links given below.
Go to root path: app/templates/components/layouts/
open "scripts.html"
file and remove switcher js link given below.
Go to root path: app/templates/components/layouts/
open "app-header.html"
file and at the bottom of that page remove the "switcher-icon code" given below.
NOTE: If you remove switcher styles and scripts in your template, then switcherpage.html
page present in templates
folder root path: app/templates/
will not work properly. If you want to use switcherpage.html
then go to root path: app/templates/
open switcherpage.html
then uncomment the styles and scripts which are commented.(Skip this process if this is not your requirement).
Uncomment the styles and scripts which are commented in switcherpage.html
.
NOTE: After completing this process please perform python manage.py runserver
command
This process is only for change colors of a new chart according to the theme color.
If you want to add a new chart in any page of your template (for example in my case : "empty.html" page).
static/assets/js/exported.js
.exported.js
file, otherwise your chart color will not be change as primary color of the template. (myChart())
and i gave it an id i.e., chartId
for my new chart in empty.html page
FOR CHART-1 :
FOR CHART-2 :
Open exported.js (root path: static/assets/js/exported.js)
and add your chart id and function inside of the function names()
function of (// chart colors) section as shown below.
colors: [ myVarVal || "#38cab3","#e4e7ed"],
NOTE: By default the switcher is enabled in your template, if you want to use any of the features specified in FAQ'S
, then you must remove Switcher from your template i.e., The two styles or features will not work at a time.
Go To _fonts.scss (static/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(static/assets/scss/bootstrap/_bootstrap-styles.scss)
Example:
Go To _custom-styles.scss (static/assets/scss/custom/_custom-styles.scss )
You will find --primary-bg-color:#38cab3;
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 "static/assets/img/brand" folder and replace Previous logo with New Logo within the given image size.
NOTE: Please don't increase logo sizes, replace the logo within given image size, otherwise the logo will not fit in particular place and it disturbs the template design.
To enable RTL you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for rtl
as shown in below
rtl
version as shown below
To enable Darktheme you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Drak Theme
as shown in below
dark-theme
as shown below
To enable Transparent theme Style you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Transparent theme
as shown in below
transparent-theme
as shown below
Go To _custom-styles.scss (static/assets/scss/custom/_custom-styles.scss )
You will find --transparent-body :#30b5a1;
, where you can simply change color code to change transparent body color
Example:Below image shows Before and After changing transparent body color
NOTE: You must perform gulp watch
command after changing the content in scss
folder. For more details please refer gulp
section in Documentation
To enable Transparent image you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Transparent image
as shown in below
bg-img1 & transparent-theme
as shown below
NOTE : If you want to use Bg-Img2, Bg-Img3, and Bg-Img4, then you can just change Bg-Img1 to Bg-Img-2 or Bg-Img3 or Bg-Img4 by just renaming the previous Image.
Go To "assets/img/media" folder and replace your image with Previous image(bg-img1) within in given image size.
Please don't increase logo sizes, replace the logo within given image size, otherwise the logo will not fit in particular place and it disturbs the template design.
To enable Color-header you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for color-header
as shown in below
color-header
as shown below
To enable dark-header you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for dark-header
as shown in below
dark-header
as shown below
To enable light-header you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for light-header
as shown in below
light-header
as shown below
To enable Gradient-header you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for gradient-header
as shown in below
gradient-header
as shown below
To enable Light Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for light-menu
as shown in below
light-menu
as shown below
To enable Color Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for color-menu
as shown in below
color-menu
as shown below
To enable Dark Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for dark-menu
as shown in below
dark-menu
as shown below
To enable Gradient Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for gradient-menu
as shown in below
gradient-menu
as shown below
To enable Boxed-Layout you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for layout-boxed
as shown in below
layout-boxed
as shown below
To enable Scrollable-Layout you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for scrollable-layout
as shown in below
scrollable-layout
as shown below
To enable Sidemenu-Icon-with Text you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for sidemenu-icontext
as shown in below
sidemenu-icontext
as shown below
To enable Closed-Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Closed Sidemenu
as shown in below
Closed Sidemenu
as shown below
To enable Icon Overlay you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Icon Overlay Sidemenu
as shown in below
sideicon-menu
as shown below
To enable Hover Submenu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for hover-submenu
as shown in below
Hover Submenu
as shown below
To enable Hover Submenu style1 you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Hover Submenu style1
as shown in below
Hover Submenu Style1
as shown below
To enable Horizontal layout you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Horizontal layout
as shown in below
Horizontal layout
as shown below
To enable Horizontal Hover layout you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for Horizontal Hover layout
as shown in below
Horizontal Hover layout
as shown below
NOTE: By default nowrap
style is given for horizontal and horizontal-hover menu styles, if you want to change it to wrap
style please follow below process.
Open custom.js
file present in static/assets/js/custom.js
in that file you will find below js, in
Horizontal (or) Horizontal-Hover
style section.
noWrap
with wrap
as shown below
Simply you can change noWrap
with wrap
to change the style of Horizontal or Horizontal Hover Menus
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com