Nowa – Django Bootstrap 5 Admin & Dashboard Template

Dashboard
Welcome to Nowa – Django Bootstrap 5 Admin & Dashboard Template
  • Created Date: 29/03/2022
  • Author: SPRUKO™
  • Company: Spruko Technologies Private Limited
  • Support: support@spruko.com

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!

Introduction

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.

Template Description

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.

Template Features
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
Minimum Requirements

  • Python >= 3.10
  • asgiref >=3.5.0
  • pytz >=2021.5
  • sqlparse >=0.4.2
  • pip >= 22.0.2
  • Django >= 4.0
  • django-htmlmin >=0.11.0
Installation Process of Python

In order to run Django you need to install Python by the following steps
This steps are based on Windows OS

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.

SET-UP DJANGO PROJECT

  • Assuming that you have already installed python in your computer.
  • First, you need to create an environment at your project location. where, you want to create your project in your computer globally or locally by setting your project path in the terminal.
  • To create Virtualenv type python -m venv env in your terminal or console
  • Now you need to activate your Virtualenv by typing env\scripts\activate
  • You must activate your Virtualenv to download any new dependencies "locally", otherwise those dependencies you install will install "globally"
INSTALLATION PROCESS OF Django

Here we are using "Python Manager" to download "Django"

If you know how to create Django project you can skip this step.

  • First open command prompt in my case Example:C:\Users\ADMIN01> and type pip install django to install Django globally.
  • To check whether Django is installed or not type python -m django --version in your terminal or console
  • Now open a new command prompt and navigate to the folder where you want to create the Django project.
  • In my case Example:C:\Users\ADMIN01\Desktop\django>.
  • Now type the following command line 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 name
  • Now you are sucessfully created Django project.
  • To create App or Application navigate to your django project folder Example:C:\Users\ADMIN01\Desktop\django\projectname> in your command prompt and type python manage.py startapp appname
  • Now you are sucessfully created App in your django project.
  • The project that you received will have a file called the requirements.txt file. Now go to that file location and then in your terminal type pip install -r requirements.txt
  • The above command will download all the required packages by using the requirements.txt file.
  • We have an improtant dependency or module called django-htmlmin it is used to minify the html content. You have already installed HTML_MINIFY with the help of requirements.txt file
  • By default we are disabling HTML_MINIFY module i.e., HTML_MINIFY= False if you want to enable HTML_MINIFY module please follow the root path Nowa/settings.py in that file you will find HTML_MINIFY= False then change it into HTML_MINIFY= True
  • NOTE: If you have any further queries in installation please refer to the official website HERE

After installation run following command to get Django development server
python manage.py runserver
The Basic Structure Of Django Project

											
												├── 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
											 
										
  • First, unzip the project folder that you received from us.
  • Navigate as shown Example: F:\project folder\app\templates in that template folder will have 119 html pages
  • Navigate as shown Example: F:\project folder\app\templates\ Open components folder there you will find base.html, custom-base.html and switcher-base.html files
  • Here base.html file is the base file for all html pages
  • Here custom-base.html file is the base file for all custom pages ex: signin.html, signup.html, etc..,
  • And switcher-base.html file is the base file for switcher-base.html page
  • By default switcher is enabled in your template so the custom styles will not work i.e., RTL, horizontal, hover and etc..,. So if you want to enable those styles, first you need to remove or disable switcher in your template as shown in switcher section in documentation.
  • Please refer FAQ'S to activate other versions and styles like RTL, horizontal, horizontal-hover, Dark-mode, Boxed-Layout, Sidemenu-Icon. etc..,
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 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.
Software Versions Used:
  • asgiref : 3.5.0
  • beautifulsoup4 : 4.10.0
  • Django : 4.0.2
  • django-htmlmin : 0.11.0
  • html5lib : 1.1
  • pip : 22.0.3
  • setuptools : 58.1.0
  • six : 1.16.0
  • soupsieve : 2.3.1
  • sqlparse : 0.4.2
  • tzdata : 2021.5
  • webencodings : 0.5.1
Over All Folder Structure
				
					├── 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
				
			
Switcher

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.

																
					

BEFORE :

AFTER :

Go to root path: app/templates/components/layouts/ open "styles.html" file and remove switcher css links given below.

																

REMOVE SWITCHER CSS :

Go to root path: app/templates/components/layouts/ open "scripts.html" file and remove switcher js link given below.

																

STEP 1: REMOVE SWITCHER JS

STEP 2: CHANGE CUSTOM1.JS LINK TO CUSTOM.JS LINK

BEFORE :

AFTER :

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.

																
				

REMOVE SWICTHER-ICON CODE :

After completion of this process perform python manage.py runserver in your terminal.

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.

																
				

UNCOMMENT STYLES :

UNCOMMENT SCRIPTS :

NOTE: After completing this process please perform python manage.py runserver command

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

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).

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

  • Assume that you want to add a new chart in empty.html page.
  • Then place your chart js data in exported.js file present in static/assets/js/exported.js.
  • NOTE: You have to add your new chart js data in exported.js file, otherwise your chart color will not be change as primary color of the template.
  • If you are using more than one chart in empty.html page, then, create a new function() and with 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()) and i gave it an id i.e., chartId for my new chart in empty.html page
													
				

FOR CHART-1 :

FOR CHART-2 :

How to apply colors to the new chart?

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.

													
				
													
												
  • 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.
  • Add( myVarVal ) variable in your chart js data, 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 exported.js file present in root path: "static/assets/js/exported.js".
  • colors: [ myVarVal || "#38cab3","#e4e7ed"],
  • Here myVarVal variable is used as primaryColor of the template, if you use this variable anywhere in the template then the color of that particular place will change according to theme color
FAQ'S

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.

1) How to Change Font Style ?

Step 1:

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

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(static/assets/scss/bootstrap/_bootstrap-styles.scss)

Example:


					        
				
				

2) How to Change Primary Color ?

Step 1:

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

3) How to Change Logo ?

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.

4) How to Enable RTL version?

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


					
Remove the comments to enable rtl version as shown below

					

5) How to Enable Darktheme?

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


					
Remove the comments to enable dark-theme as shown below

					

6) How to Enable Transparent theme?

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


					
Remove the comments to enable transparent-theme as shown below

					

7) How to Change Transparent body color?

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

8) How to Enable Background image in Transparent theme?

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


					
Remove the comments to enable 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.

9) How to Enable Color-header?

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


					
Remove the comments to enable color-header as shown below

					

10) How to Enable Dark-header?

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


					
Remove the comments to enable dark-header as shown below

					

11) How to Enable Light-header?

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


					
Remove the comments to enable light-header as shown below

					

12) How to Enable Gradient-header?

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


					
Remove the comments to enable gradient-header as shown below

					

13) How to Enable Light Menu?

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


					
Remove the comments to enable light-menu as shown below

					

14) How to Enable Color Menu?

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


					
Remove the comments to enable color-menu as shown below

					

15) How to Enable Dark Menu?

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


					
Remove the comments to enable dark-menu as shown below

					

16) How to Enable Gradient Menu?

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


					
Remove the comments to enable gradient-menu as shown below

					

17) How to Enable Boxed-Layout?

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


					
Remove the comments to enable layout-boxed as shown below

					

18) How to Enable Scrollable-Layout?

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


					
Remove the comments to enable scrollable-layout as shown below

					

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

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


						
Remove the comments to enable sidemenu-icontext as shown below

						

20) How to Enable Closed-Menu?

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


						
Remove the comments to enable Closed Sidemenu as shown below

						

21) How to Enable Icon Overlay

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


						
Remove the comments to enable sideicon-menu as shown below

						

22) How to Enable Hover Submenu

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


						
Remove the comments to enable Hover Submenu as shown below

						

23) How to Enable Hover Submenu style1

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


						
Remove the comments to enable Hover Submenu Style1 as shown below

						

24) How to Enable Horizontal layout

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


						
Remove the comments to enable Horizontal layout as shown below

						

25) How to Enable Horizontal Hover layout

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


						
Remove the comments to enable Horizontal Hover layout as shown below

					

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

NOTE: By default nowrapstyle 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 Styles Looks like:

Replace noWrap with wrap as shown below

			
Wrap Styles Looks like:

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

Font Used

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

All Images are used: Pexels.com

THANK YOU!