Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.
Thank you for purchasing our admin template. Feel free to contact us any time. We have a dedicated team to provide you best support. If you have any queries please reach us through live chat or email : sprukotechnologies@gmail.com
If You Love Our Template Design please don't forget to rate it, Thank you.
Dashtic - Django Bootstrap 5 Admin & Dashboard Template, with Dashtic template format, 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.
Dashtic is a Django Bootstrap Admin & Dashboard Template comes with modern and minimal design. It is fully responsive, flexible, and user-friendly. Dashtic Django admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 150+ HTML Pages, 50+ Plugins and more UI elements. User 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. Dashtic Django admin template comes with 100% premium quality design. Dashtic template designed by using HTML5, CSS3, Jquery, After Purchasing Dashtic template you will get HTML, CSS, Scss and JS files.
Dashtic has very clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with an awesome unique design also we ensure you can easily design admin template.
Dashtic comes with fully responsive layouts for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices
Once you Purchase Dashtic, you will be able to get all the future updates for free.
| Vertical-menu | Horizontal click menu | Horizontal hover menu | RTL ready |
| 150 Plus HTML Pages | Bootstrap 5 Responsive Framework | Well Commented Code | 24 * 7 Professional Company Support |
| Regular Updates | 50+ Plugins | 7 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\activateIf 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 appnamepip install -r requirements.txtNOTE: 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
| | └── 150+ HTML files
├── Dashtic/
├── static/
| └── assets/
├── db.sqlite3
├── gulpfile.js
├── manage.py
├── package-lock.json
├── package.json
Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync, optimizing images, etc... We are using gulp which allows to easily compilation of scss to css. You can read it more about it here.
Please follow below steps to install and setup all prerequisites:
Make sure to have the Node.js installed & running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,
Make sure to have the Gulp installed &
running in your computer. If you have already installed gulp on your computer, you can skip
this step. In order to install, just run command npm install -g gulp from
your terminal.
After Completion of gulp Install. open gulpfile.js And install the "Declaration of gulp variables" in your command promt. In order to install, just run command npm install gulp, const sass = require('gulp-sass')(require('sass'));,
npm install gulp-postcss, npm install autoprefixer, npm install gulp-sourcemaps,
npm install browser-sync from your terminal.
Make sure to have all above prerequisites installed & running in your computer. If you want to install more variables for your template, just declare the variables in gulpfile.js after that run in command promt
To setup, follow below mentioned steps:
Make sure to have all above prerequisites installed & running in your computer
Open your terminal, go to your folder and enter the command npm install. This
would install all required dependencies in node_modules folder.
After you finished with above steps, you can run the command to compile scss files into css:
gulp
Here we provided package.json and gulpfile.js files in your project, you just need to run npm install in your terminal in your project root path.
After compilation of download, you can compile your SCSS files into CSS files by following 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. |
├── app/
| ├── __pycache__/
| ├── migrations/
| ├── templates/
| | ├── components/
| | | ├── layouts/
| | | | ├── app-header.html
| | | | ├── app-header1.html
| | | | ├── custom-scripts.html
| | | | ├── custom-styles.html
| | | | ├── custom-switcher.html
| | | | ├── footer.html
| | | | ├── main-sidebar.html
| | | | ├── scripts.html
| | | | ├── styles.html
| | | | └── switcher.html
| | | ├── base.html
| | | ├── custom-base.html
| | | └── switcher-base.html
| | └── 150+ HTML files
| ├── __init__.py
| ├── admin.py
| ├── apps.py
| ├── models.py
| ├── tests.py
| ├── urls.py
| └── views.py
├── Dashtic/
| ├── __pycache__
| ├── __init__.py
| ├── asgi.py
| ├── settings.py
| ├── urls.py
| └── wsgi.py
├── static
| └── assets
| ├── css
| ├── images
| ├── js
| ├── plugins
| ├── scss
| └── switcher
├── db.sqlite3
├── gulpfile
├── manage.py
├── package-lock.json
└── package.json
If you want to add switcher to your template follow the below process.
Go to root path: app/templates/components/ open "base.html" in that file, below the body tag remove the Switcher Path as shown in below.
BEFORE :
AFTER :
Go to root path: app/templates/components/ open "base.html" file and remove Switcher Css as shown in below.
REMOVED SWITCHER CSS:
BEFORE :
<!-- STYLES -->
{% include 'components/layouts/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
<link href="{% static 'assets/switcher/css/switcher.css'%}" rel="stylesheet">
<link href="{% static 'assets/switcher/demo.css'%}" rel="stylesheet">
AFTER :
<!-- STYLES -->
{% include 'components/layouts/styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
(removed switcher link)
Go to root path: app/templates/components/layouts/ open "base.html" file and remove switcher js as shown in below.
REMOVED SWITCHER SCRIPTS :
Before :
<!-- Switcher-Styles js -->
<script src="{% static 'assets/js/switcher-styles.js' %}"></script>
<!-- Switcher-Styles js -->
<script src="{% static 'assets/switcher/js/switcher.js'%}"></script>
NOTE: Custom1.js file is only used when you want to use switcher for your template.
Go to root path:
app/templates/components/ open
"base.html" file and then Change app-header1.html to
app-header.html as shown in below.
Before :
<!-- APP-HEADER -->
{% include 'components/layouts/app-header1.html' %}
<!-- APP-HEADER CLOSED -->
After :
<!-- APP-HEADER -->
{% include 'components/layouts/app-header.html' %}
<!-- APP-HEADER CLOSED -->
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: app/templates/components/layouts/ open "custom-scripts.html" file and remove switcher js as shown in below.
Removed switcher js:
Before :
<!-- Switcher-Styles js -->
<script src="{% static 'assets/js/switcher-styles.js' %}"></script>
<!-- Switcher js -->
<script src="{% static 'assets/switcher/js/switcher.js'%}"></script>
Go to root path : app/templates/components/ open "custom-base.html" file and removed Switcher Css as shown in below.
REMOVED SWITCHER CSS:
BEFORE :
<!-- Styles -->
{% include 'components/layouts/custom-styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
<link href="{% static 'assets/switcher/css/switcher.css'%}" rel="stylesheet">
<link href="{% static 'assets/switcher/demo.css'%}" rel="stylesheet">
AFTER :
<!-- Styles -->
{% include 'components/layouts/custom-styles.html' %}
{% block styles %}{% endblock %}
<!-- Switcher css -->
(removed switcher link)
Go to root path: app/templates/components/ open "custom-base.html" in that file, below the body tag remove the Switcher Icon Code as shown in below.
Removed custom switcher icon code:
BEFORE :
{% block body %}{% endblock %}
Go to root path: app/templates/components/ open "custom-base.html" in that file, below the body tag remove the Switcher Path as shown in below.
Removed custom switcher path
BEFORE :
{% block body %}{% endblock %}
<!-- Switcher -->
{% include 'components/layouts/custom-switcher.html' %}
<!-- Switcher End -->
AFTER :
{% block body %}{% endblock %}
(removed switcher Path)
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).
Note: This process is only for replace your own chart in index.html page
Go to root path: static/assets/js/index1.js in that js file you will find a function named as index " function index1() ; " inside of that function replace the old chart js data with your new chart js data, in order to change your chart color according to your themecolor then add " myVarVal" (Ex:- myVarVal to that particular color field based on your requirement.
Navigate to root path: static/assets/js/ and open themeColors.js in that js file you will find a function called "(function names() )" In that function you will find
// index charts
if(document.querySelector('#leads') !== null){
index1();
}
Then change it's id name based on the id that you've used for your particular chart.
Ex: How do I modify the Id in the "themeColors.js" file?
" if(document.querySelector('#sales-status') !== null){
index1() ;
}"
" if(document.querySelector('# your chart id') !== null){
index1() ;
}"
Note : This process is only for adding your new chart to other pages.(Skip this process if this is not your requirement)
If you want to change the color of your chart with respect to the themecolor you have to follow the below steps.
If you want to add any chart to any other page then follow the below process.
Open js file of the particular chart that you wanted to add, in that js file (for example in my case: mychart.js), and inside of that js file create a new function with " unique " name (for example in my case: myFunction() ), and then place the chart js content inside of that function.
Note: If there is more than one chart then you need to create different functions for different charts respectively.
Ex-1: myFunction1() {
chart js1 content
}
myFunction2() {
chart js2 content
}
Navigate to root path: static/assets/js/themeColors.js in that js file you will find a function called "(function names() )" In that function you will find
"if(document.querySelector('#sales-status') !== null){
index1() ;
}"
Below this condition add a new condition with the "id name and function name" that you've used in your chart js (Ex: mychart.js)
Ex: " if(document.querySelector('# your chart id') !== null){
myFunction(); =>created function for the above id
}"
If you want to change your chart (Ex: mychart.js) color according to your themecolor then follow the below process
Ex : Go to root path: static/assets/js/mychart.js in that js file you've already created a function (Ex: myFunction() ) inside of that function there are different color values based on the chart. so, if you want to change the color then add " myVarVal " value (Ex:- myVarVal )to that particular color field based on your requirement.
Go To style.scss (static/assets/scss/style.scss )
if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file
Example:

And paste Your Selected font-family in Style.scss i.e (root:-static/assets/scss/style.scss)
Example:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");
And add the Your Selected font-family in _custom.scss(static/assets/scss/custom/_custom.scss)
Example:
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: $color;
text-align: left;
background: #f2f6f9;
}
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
Go To "static/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 switcher-styles.js
path:(static/assets/js/switcher-styles.js)file .
and remove
comments for $('body').addClass('rtl') to enable RTL
version as shown in below
/***************** RTL *********************/
// $('body').addClass('rtl');
/***************** RTL *********************/
$('body').addClass('rtl') as shown below
/***************** RTL *********************/
$('body').addClass('rtl');
/***************** RTL *********************/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)file .
and remove
comments for $('body').addClass('ltr') to enable LTR
version as shown in below
/***************** LTR *********************/
// $('body').addClass('ltr');
/***************** LTR *********************/
$('body').addClass('ltr') as shown below
/***************** LTR *********************/
$('body').addClass('ltr');
/***************** LTR *********************/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for dark-mode to enable
dark-theme style as shown in below
/***************** DARK THEME *********************/
// $('body').addClass('dark-mode');
/***************** Dark THEME *********************/
dark-mode as
shown below
/***************** DARK THEME *********************/
$('body').addClass('dark-mode');
/***************** Dark THEME *********************/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for light-theme to enable
light-theme style as shown in below
/***************** Light THEME *********************/
// $('body').addClass('light-theme');
/***************** Light THEME *********************/
light-theme as
shown below
/***************** Light THEME *********************/
$('body').addClass('light-theme');
/***************** Light THEME *********************/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for color-header to enable
color-header style as shown in below
/**Color-Header**/
// $('body').addClass('color-header');
/**Color-Header**/
color-header
as shown below
/**Color-Header**/
$('body').addClass('color-header');
/**Color-Header**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for dark-header to enable
dark-header style as shown in below
/**Dark-Header**/
// $('body').addClass('dark-header');
/**Dark-Header**/
dark-header as
shown below
/**Dark-Header**/
$('body').addClass('dark-header');
/**Dark-Header**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for light-header to enable
light-header style as shown in below
/**Light-Header**/
// $('body').addClass('light-header');
/**Light-Header**/
light-header
as shown below
/**Light-Header**/
$('body').addClass('light-header');
/**Light-Header**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for light-menu to enable
light-menu style as shown in below
/**Light-menu**/
// $('body').addClass('light-menu');
/**Light-menu**/
light-menu as
shown below
/**Light-menu**/
$('body').addClass('light-menu');
/**Light-menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for color-menu to enable
color-menu style as shown in below
/**Color-menu**/
// $('body').addClass('color-menu');
/**Color-menu**/
color-menu as
shown below
/**Color-menu**/
$('body').addClass('color-menu');
/**Color-menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)file and
remove
comments for dark-menu to enable dark-menu style as shown
in below
/**Dark-menu**/
// $('body').addClass('dark-menu');
/**Dark-menu**/
dark-menu as
shown below
/**Dark-menu**/
$('body').addClass('dark-menu');
/**Dark-menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)file and
remove
comments for layout-boxed to enable layout-boxed style as
shown in below
//Boxed Layout Style
if (!localStorage.getItem('dashticfullwidth') && !localStorage.getItem('dashticboxedwidth')) {
// $('body').addClass('layout-boxed');
}
layout-boxed
as shown below
//Boxed Layout Style
if (!localStorage.getItem('dashticfullwidth') && !localStorage.getItem('dashticboxedwidth')) {
$('body').addClass('layout-boxed');
}
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for scrollable-layout to enable
scrollable-layout style as shown in below
//Scrollable-Layout Style
if (!localStorage.getItem('dashticfixed') && !localStorage.getItem('dashticscrollable')) {
// $('body').addClass('scrollable-layout');
}
scrollable-layout as shown below
//Scrollable-Layout Style
if (!localStorage.getItem('dashticfixed') && !localStorage.getItem('dashticscrollable')) {
$('body').addClass('scrollable-layout');
}
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for body-style1 to enable
body-style style as shown in below
//Body Style
if (!localStorage.getItem('dashticdefaultbody') && !localStorage.getItem('dashticbodystyle')) {
// $('body').addClass('body-style1');
}
body-style1 as
shown below
//Body Style
if (!localStorage.getItem('dashticdefaultbody') && !localStorage.getItem('dashticbodystyle')) {
$('body').addClass('body-style1');
}
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for icontext-menu to enable
icontext-menu style as shown in below
/**Icon-Text-Menu**/
// $('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
icontext-menu as shown below
/**Icon-Text-Menu**/
$('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for closed-menu to enable
closed menu style as shown in below
/**closed-Menu**/
// $('body').addClass('closed-menu');
/**closed-Menu**/
closed-menu as shown below
/**closed-Menu**/
$('body').addClass('closed-menu');
/**closed-Menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for sideicon-menu to
enable Icon Overlay style as shown in below
/**Icon-Overlay-Menu**/
// $('body').addClass('sideicon-menu');
/**Icon-Overlay-Menu**/
sideicon-menu
as shown below
/**Icon-Overlay-Menu**/
$('body').addClass('sideicon-menu');
/**Icon-Overlay-Menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for Hover Submenu to enable Hover
submenu style as shown in below
/**Hover-Sub-Menu**/
// $('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
Hover Submenu
as shown below
/**Hover-Sub-Menu**/
$('body').addClass('hover-submenu');
/**Hover-Sub-Menu**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for Hover Submenu Style1 to enable
Hover submenu style1 style as shown in below
/**Hover-Sub-Menu1**/
// $('body').addClass('hover-submenu1');
/**Hover-Sub-Menu1**/
Hover Submenu Style1 as shown below
/**Hover-Sub-Menu1**/
$('body').addClass('hover-submenu1');
/**Hover-Sub-Menu1**/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for Horizontal layout to enable
Horizontal layout style as shown in below
/***************** Horizontal THEME *********************/
// $('body').addClass('horizontal');
/***************** Horizontal THEME *********************/
Horizontal layout as shown below
/***************** Horizontal THEME *********************/
$('body').addClass('horizontal');
/***************** Horizontal THEME *********************/
open switcher-styles.js
path:(static/assets/js/switcher-styles.js)
file and remove comments for Horizontal Hover layout to
enable Horizontal Hover layout style as shown in below
/***************** Horizontal-Hover THEME *********************/
// $('body').addClass('horizontal-hover');
/***************** Horizontal-Hover THEME *********************/
Horizontal Hover layout as shown below
/***************** Horizontal-Hover THEME *********************/
$('body').addClass('horizontal-hover');
/***************** Horizontal-Hover THEME *********************/
To change Primary Color you have to open _custom.scss file and replace what color you want as shown in below
Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Light Background Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (static/assets/scss/_variables.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Light Text Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (static/assets/scss/_variables.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Light Border Color you have to open _variables.scss file and replace what color you want as shown in below
Rootpath : _variables.scss (static/assets/scss/_variables.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Dark body Color you have to open _custom.scss file and replace what color you want as shown in below
Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Dark Theme Color you have to open _custom.scss file and replace what color you want as shown in below
Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
To change Dark default Color ,border color ,and shadow color you have to open _custom.scss file in scss folder and replace what color you want as shown in below
Rootpath : _custom.scss (static/assets/scss/custom/_custom.scss )
NOTE : After changnig or modifying the content in SCSS files, you need to perform related GULP command. Otherwise the changes will not be applied to your template, for more understanding please refer GULP section in Documentation.
Refer following links for usage:
| Icons | References |
|---|---|
| Font Awesome | https://fontawesome.com/v4.7.0/icons/ |
| Material Design Icons | https://materialdesignicons.com/ |
| Simple Line Icons | https://simplelineicons.github.io/ |
| Feather Icons | https://feathericons.com/ |
| Ionic Icons | https://ionicons.com/ |
| Pe7 Icons | https://themes-pixeden.com/font-demos/7-stroke/ |
| Themify Icons | https://themify.me/themify-icons |
| Typicons Icons | https://iconify.design/icon-sets/typcn/ |
| Weather Icons | https://erikflowers.github.io/weather-icons/ |