Please refer Faq's page in documentation itself for queries and customization like Colors, RTL, Dark style..etc.
Thank you for purchasing our project and being our valued customer. We hope you are happy with your purchase. Feel free to contact us at any time. We have a dedicated team to provide you with the best support. If you have any issues, please contact the Support Help Desk at https://support.spruko.com/.
If You Love Our Template Design Please don't forgot to rate it. Thank you so much!
Sparic - Django Admin Template, With this 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 styles. So before you start working with the template please take a quick look on the documentation so that you can easily understand.
If You Love Our Template Design Please don't forgot to rate us. Thank you so much! π
Sparicβ is a Django Bootstrap5 Admin & Dashboard template using modern and minimal design. It is fully flexible user-friendly and responsive. Sparic Django 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 Sparicβ is a Django Bootstrap5 Admin & Dashboard template, you will be able to get free download of all future updates.
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 |
Regular Updates | 50+ Plugins | 5 types of Charts | Select2 |
About us | Blog | File Manager | Gallery |
Mail Inbox | Ecommerce Pages | Services Page | Blog Details |
Calendar | Mail Inbox | 11 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
and pip install django-htmlmin
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
| | βββ 100+ html pages
βββ sparic/
βββ static/
| βββ assets/
βββ db.sqlite3
βββ gulpfile.js
βββ manage.py
βββ package.json
βββ package-lock
1. Download and Install the python from official site https://python.org/
2. Install Django by using Python as mentioned in the installation process above.
1. Extract the zip folder of the Django project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.
2. Another process for accessing the Django project, open command prompt or terminal and set your project root path: Example: C:\xampp\htdocs
3. To create Virtualenv type python -m venv env
in your terminal or console
4. Now you need to activate your Virtualenv by typing env\scripts\activate
5. Now then in your terminal type pip install -r requirements.txt
6. The above command will download all the required packages by using the requirements.txt file.
7. And run the command line: python manage.py runserver
8. Django development server at started: http://127.0.0.1:8000/ now type the url in the browser to access the project.
Sparic comes with power of SCSS. The css files can be generated from scss by simply following below steps:
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. |
gulp watch
|
In Noa template gulp watch command is used for, whatever the changes made in scss files, will watch and compiled into css files.
|
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.
|
βββ app/
| βββ __pycache__/
| βββ migrations/
| βββ templates/
| | βββ components/
| | | βββ layouts/
| | | | βββ app-header.html
| | | | βββ app-header1.html
| | | | βββ app-sidebar.html
| | | | βββ custom-scripts.html
| | | | βββ custom-styles.html
| | | | βββ footer.html
| | | | βββ right-sidebar.html
| | | | βββ scripts.html
| | | | βββ styles.html
| | | | βββ switcher-scripts.html
| | | | βββ switcher-styles.html
| | | | βββ switcher.html
| | | βββ base.html
| | | βββ custom-base.html
| | | βββ switcher-base.html
| | βββ 100+ html pages
| βββ __init__.py
| βββ admin.py
| βββ apps.py
| βββ models.py
| βββ tests.py
| βββ urls.py
| βββ views.py
βββ sparic/
| βββ __pycache__
| βββ __init__.py
| βββ asgi.py
| βββ settings.py
| βββ urls.py
| βββ wsgi.py
βββ static/
| βββ assets/
βββ db.sqlite3
βββ gulpfile
βββ manage.py
βββ package-lock.json
βββ package.json
If you want to remove 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 link as shown below.
BEFORE :
AFTER :
Go to root path: app/templates/components/
open "base.html"
file and remove switcher css links given below.
Remove Switcher CSS Link:
Go to root path: app/templates/components/
open "base.html"
file and remove switcher.js given below.
REMOVE SWITCHER.JS LINK
<!-- SWITCHER JS -->
<script src="{% static 'assets/switcher/js/switcher.js'%}"></script>
Go to root path: app/templates/components/
open "base.html"
file and then change app-header to app-header1
as shown below.
Before :
After :
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).
open a js file used for that particular html page and create a new function in that js file as shown below
NOTE-1: Forindex.html
page there is index1.js
file which is used for that particular page only. You should create function and place data for your chart in that index1.js
you should create new function and place chart data in that js files only
IMPORTANT:If you want to place a new chart in any other page Please create new js file and create the below function
function chartid() { -----------
--------
----------
}
Place your new chart data in the function which you created.
open themecolor.js Path:(static/assets/js/themecolor.js)
and paste the below code in the names()
function in (// chart colors) section located at the bottom of the file.
if(document.querySelector('#Your-chart-id') !== null){
example();
}
replace (#Your-chart-id) with your new chart id & replace example(); with chartid() function which you created in step 1.
change in the color ( myVarVal )
place of your chart where you want to change accordingly to the primary color of the template for example refer below code which we used in index1.js file.
colors: [myVarVal],
Go To _fonts.scss (static/assets/scss/style.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:
body {
font-family: 'Nunito', sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: $default-color;
text-align: start;
background: $background;
}
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 swither-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 swither-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 Start --*/
// $('body').addClass('color-header');
/*--- Color Header End --*/
color-header
as shown below
/*--- Color Header Start --*/
$('body').addClass('color-header');
/*--- Color Header End --*/
open swither-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 Start --*/
// $('body').addClass('dark-header');
/*--- Dark Header End --*/
dark-header
as
shown below
/*--- Dark Header Start --*/
$('body').addClass('dark-header');
/*--- Dark Header End --*/
open swither-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 Start --*/
// $('body').addClass('light-header');
/*--- Light Header End --*/
light-header
as shown below
/*--- Light Header Start --*/
$('body').addClass('light-header');
/*--- Light Header End --*/
open swither-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 Start --*/
// $('body').addClass('light-menu');
/*--- Light Menu End --*/
light-menu
as
shown below
/*--- Light Menu Start --*/
$('body').addClass('light-menu');
/*--- Light Menu End --*/
open swither-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 Start --*/
// $('body').addClass('color-menu');
/*--- Color Menu End --*/
color-menu
as
shown below
/*--- Color Menu Start --*/
$('body').addClass('color-menu');
/*--- Color Menu End --*/
open swither-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 Start --*/
// $('body').addClass('dark-menu');
/*--- Dark Menu End --*/
dark-menu
as
shown below
/*--- Dark Menu Start --*/
$('body').addClass('dark-menu');
/*--- Dark Menu End --*/
open swither-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 Start --*/
// $('body').addClass('layout-boxed');
/*--- Boxed Layout End --*/
layout-boxed
as shown below
/*--- Boxed Layout Start --*/
$('body').addClass('layout-boxed');
/*--- Boxed Layout End --*/
open swither-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
/*--- Header-Position Styles Start --*/
// $('body').addClass('scrollable-layout');
/*--- Header-Position Styles End --*/
scrollable-layout
as shown below
/*--- Header-Position Styles Start --*/
$('body').addClass('scrollable-layout');
/*--- Header-Position Styles End --*/
open swither-styles.js path:(static/assets/js/switcher-styles.js)
file and remove comments for sidemenu-icontext
to enable
sidemenu-icontext style as shown in below
/**Icon-Text-Menu**/
// $('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
sidemenu-icontext
as shown below
/**Icon-Text-Menu**/
$('body').addClass('icontext-menu');
/**Icon-Text-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js)
file and remove comments for Closed Sidemenu
to enable
closed menu style as shown in below
/**closed-Menu**/
// $('body').addClass('closed-menu');
/**closed-Menu**/
Closed Sidemenu
as shown below
/**closed-Menu**/
$('body').addClass('closed-menu');
/**closed-Menu**/
open swither-styles.js path:(static/assets/js/switcher-styles.js)
file and remove comments for Icon Overlay Sidemenu
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 swither-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 swither-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 swither-styles.js path:(assets/js/switcher-styles.js)
file and remove comments for Double-menu
to enable
Double-menu style as shown in below
/**Double-Menu**/
// $('body').addClass('double-menu');
/**Double-Menu**/
Double-menu
as shown below
/**Double-Menu**/
$('body').addClass('double-menu');
/**Double-Menu**/
open swither-styles.js path:(assets/js/switcher-styles.js)
file and remove comments for Double-menu-tabs
to enable
Double-menu-tabs style as shown in below
/**Double-menu-tabs**/
// $('body').addClass('double-menu-tabs');
/**Double-menu-tabs**/
Double-menu-tabs
as shown below
/**Double-menu-tabs**/
$('body').addClass('double-menu-tabs');
/**Double-menu-tabs**/
open swither-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 Layout Style*/
// $('body').addClass('rtl');
/*RTL Layout Style End*/
$('body').addClass('rtl')
as shown below
/*RTL Layout Style*/
$('body').addClass('rtl');
/*RTL Layout Style End*/
open swither-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 *********************/
// $('body').addClass('horizontal-hover');
/***************** Horizontal-Hover *********************/
Horizontal Hover layout
as shown below
/***************** Horizontal-Hover *********************/
$('body').addClass('horizontal-hover');
/***************** Horizontal-Hover *********************/
open swither-styles.js path:(static/assets/js/switcher-styles.js)
file and replacenoWrap
with wrap
in
Horizontal (or) Horizontal Hover layout
to enable wrap
style for Horizantal or Horizantal Hover
document.querySelector('.horizontal .side-menu').style.flexWrap = 'nowrap'
noWrap
with wrap
as
shown below
document.querySelector('.horizontal .side-menu').style.flexWrap = 'wrap'
Example:
Simply you can change noWrap
with wrap
to change
the style of Horizontal or Horizontal Hover Menus
open swither-styles.js path:(static/assets/js/switcher-styles.js)
file and remove comments for centerlogo-horizontal
to
enable centerlogo-horizontal style as shown in below
/**Center-Logo**/
// $('body').addClass('center-logo');
/**Center-Logo**/
centerlogo-horizontal
as shown below
/**Center-Logo**/
$('body').addClass('center-logo');
/**Center-Logo**/
Open themeColors.js file public/assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below
function localStorageBackup2(){
}
To change Dark default Color ,border color ,and shadow color you have to open _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.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 _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.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 _bootstrap-styles.scss file and replace what color you want as shown in below
Rootpath : _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.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.
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com