Dashplex – Django Bootstrap5 Admin & Dashboard Template

Dashplex - Django Bootstrap 5 Admin & Dashboard Template

Dashboard

Welcome to Dashplex – Django Bootstrap5 Admin & Dashboard Template

Created Date: 22/03/2022
Author: Spruko
Company: Spruko Technologies Private Limited
Support: support@spruko.com

Thank you for showing interest towards our admin template. Feel free to contact us any time. We have a dedicated team to provide you the best support. If you want any queries please contact live chat or email : support@spruko.com

If You Love Our Template Design Please don't forget to rate it. Thank you so much!

Introduction

Dashplex - 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 django, HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If You Love Our Template Design Please don't forgot to rate it. Thank you so much! 😊

Template Description

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

Template Features

Vertical-menu	Horizontal Click menu	Horizontal Hover menu
RTL Ready	100+ HTML Pages	Bootstrap 5 Responsive Framework
Well Commented Code	24 * 7 Professional Company Support	50+ Plugins
Sales Dashbaord	Crypto Currency Dashboard	Ecommerce Dashboard
Gallery	5 types of Charts	Select2
About us	Blog	File Manager
Settings Page	Blog Details	Calendar
Mail Inbox	12 Types of Icons	File upload
Message Chat	Form Elements	Month & Date & Year Range Pickers
Form Advanced Elements	Data Tables	Lockscreen Page
Error Pages	Under Construction Page	User Profile
Invoice Page	Advanced Pricing Tables	Easy to Customize
More Widgets	Neat, clean and simple design	W3C Validated

Minimum Requirements

Python >= 3.10.1
Django >= 4.0.2
pip >= 22.0.3
asgiref >=3.5.0
pytz >=2021.5
sqlparse >=0.4.2
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 visit 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

Assume 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 Dashplex/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
												|   |   └── 100+ HTML files																							
												├── Dashplex/
												├── static/
												|   └── assets/
												├── db.sqlite3
												├── gulpfile.js
												├── manage.py
												├── 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 100+ 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
Navigate as shown Example: F:\project folder\app\templates\components\ Open layouts folder there you will find common files of all pages Ex: app-header, app-sidebar, styles, scripts etc.,
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 switcherpage.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 color`	In this template `gulp color` command is for what ever changes made in `color.scss` file, will be compiled and the changes will update in `color.css` file in css folder.
`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 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.
`gulp skins`	In this template `gulp skins` 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.

Software Versions Used:

python : 3.10.1
Django : 4.0.2
pip : 22.0.3
asgiref : 3.5.0
beautifulsoup4 : 4.10.0
django-htmlmin : 0.11.0
html5lib : 1.1
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.html	
					|   |   |   ├── base.html	
					|   |   |   ├── custom-base.html	
					|   |   |   └── switcher-base.html	
					|   |   └── 100+ HTML files
					|   ├── __init__.py
					|   ├── admin.py
					|   ├── apps.py
					|   ├── models.py
					|   ├── tests.py
					|   ├── urls.py
					|   └── views.py									
					├── Dashplex/
					|   ├── __pycache__
					|   ├── __init__.py
					|   ├── asgi.py
					|   ├── settings.py
					|   ├── urls.py
					|   └── wsgi.py
					├── static/
					|   └── assets/
					|        ├── css/
					|        ├── img/
					|        ├── js/
					|        ├── plugins/
					|        ├── scss/
					|        ├── switcher/
					|        └── web-fonts/
					├── db.sqlite3
					├── gulpfile
					├── manage.py
					└── package.json

Theme Styles

Primary Color

How to Change Primary Color?

Please follow the bellow steps to change Primary Color

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

Rootpath : _bootstrap-custom.scss (static/assets/scss/bootstrap/_bootstrap-custom.scss )

EXAMPLE :

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

Light Theme Style