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.
Dayone - Django Multipurpose Admin & Dashboard Template, with Dayone 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.
Dayone is a Django Multipurpose Admin & Dashboard Template comes with modern and minimal design. It is fully responsive, flexible, and user-friendly. Dayone admin template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 240+ HTML Pages, 75+ 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. Dayone admin template comes with 100% premium quality design. Dayone template designed by using HTML5, CSS3, Jquery, After Purchasing Dayone template you will get HTML, CSS, Scss and JS files.
Dayone 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.
Dayone 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 Dayone, you will be able to get all the future updates for free.
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/
| | | ├── support-system/
| | | ├── base.html
| | | ├── client-base.html
| | | ├── custom-base.html
| | | ├── employee-base.html
| | | ├── custom-base.html
| | | ├── hr-base.html
| | | ├── job-base.html
| | | ├── project-base.html
| | | ├── superadmin-base.html
| | | ├── support-base.html
| | | ├── support-landing-base.html
| | | ├── task-base.html
| | | └── theme-base.html
| | └── 240+ HTML pages
├── dayone/
├── static/
| └── assets/
├── db.sqlite3
├── gulpfile.js
├── manage.py
├── package.json
├── package-lock
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
| | | | ├── custom-switcher.html
| | | | ├── footer.html
| | | | ├── modal.html
| | | | ├── right-sidebar.html
| | | | ├── scripts.html
| | | | ├── styles.html
| | | | └── switcher.html
| | | ├── support-system/
| | | | ├── landing-footer.html
| | | | ├── landing-header.html
| | | | ├── landing-header1.html
| | | | ├── mobile-header.html
| | | | ├── modal.html
| | | | ├── onlinesletter.html
| | | | ├── scripts.html
| | | | ├── spfooter.html
| | | | ├── styles.html
| | | | ├── switcher.html
| | | ├── base.html
| | | ├── client-base.html
| | | ├── custom-base.html
| | | ├── employee-base.html
| | | ├── hr-base.html
| | | ├── job-base.html
| | | ├── project-base.html
| | | ├── superadmin-base.html
| | | ├── support-base.html
| | | ├── support-landing-base.html
| | | ├── task-base.html
| | | └── theme-base.html
| | └── 240+ HTML pages
| ├── __init__.py
| ├── admin.py
| ├── apps.py
| ├── models.py
| ├── tests.py
| ├── urls.py
| └── views.py
├── dayone/
| ├── __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 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 link and Change custom1.js to custom.js given below.
STEP 1 : REMOVE SWITCHER.JS LINK
<!-- SWITCHER JS -->
<script src="{% static 'assets/switcher/js/switcher.js' %}"></script>
STEP 2 :CHANGE CUSTOM1.JS LINK TO CUSTOM.JS LINK
BEFORE :
AFTER :
NOTE : Here custom1.js file is used only when you are using switcher in your template.
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: Please repeat the above switcher process for the remaing base Files that are available in the path: app/templates/components/
Go to root path: app/templates/components/ open "custom-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 "custom-base.html" file and remove Switcher CSS links given below.
Remove Switcher CSS Link:
Go to root path: app/templates/components/ open "custom-base.html" file and remove switcher.js link and Change custom1.js to custom.js given below.
STEP 1 : REMOVE SWITCHER.JS LINK
<!-- SWITCHER JS -->
<script src="{% static 'assets/switcher/js/switcher.js' %}"></script>
STEP 2 :CHANGE CUSTOM1.JS LINK TO CUSTOM.JS LINK
BEFORE :
AFTER :
NOTE : Here custom1.js file is used only when you are using switcher in your template.
Go to root path: app/templates/components/ open "custom-base.html" file in the header section remove the switcher-icon code given below process.
BEFORE :
AFTER :
Go to root path: app/templates/components/ open supportlanding-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 "supportlanding-base.html" file and remove Switcher CSS link given below.
Remove Switcher CSS Link:
Go to root path: app/templates/components/ open "supportlanding-base.html" file then remove switcher.JS link and Change coustom1.js to custom.js given below.
STEP 1 : REMOVE SWITCHER.JS LINK
<!-- SWITCHER JS -->
<script src="{% static 'assets/switcher/js/switcher.js' %}"></script>
STEP 2 :CHANGE CUSTOM1.JS LINK TO CUSTOM.JS LINK
BEFORE :
AFTER :
NOTE : Here custom1.js file is used only when you are using switcher in your template.
Go to root path: app/templates/components/ open "supportlanding-base.html" file and then change landing-header to landing-header1 as shown below.
Before :
After :
NOTE: Please repeat the above switcher process for the support.base.html that is available in the path: app/templates/components/
NOTE: If you want to change your chart colors according to the themecolors, then follow the process.(Skip this process if this is not your requirement).
Go to root path: static/assets/js/index1.js in that js file you will find a function named as index2 "function sales-summary()" 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" or "any default color " (Ex:- myVarVal || "#6259ca") value 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
"if(document.querySelector('#sales-summary') !== null){ sales-summar(); }"
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-summary') !== null){ sales-summary(); }"
"if(document.querySelector('# your chart id') !== null){ sales-summary(); }"
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-summary') !== null){
sales-summary();
}"
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 " or "any default color" value (Ex:- myVarVal || "#6259ca")to that particular color field based on your requirement.
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:
body {
margin: 0;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 1.5;
color: #263871;
text-align: left;
background: #f1f4fb;
min-height: 100vh;
flex-direction: column;
justify-content: flex-start;
position: relative;
overflow-y: scroll;
}
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.
NOTE :Sidemenu & Header Icons used in Dayone are fromhttps://iconscout.com/unicons (Thin Line Icons).
You can change sidemenu icon by replacing svg code of selected icon with svg code of required icon and add class="side-menu__icon" for that svg icon
You can change Header icon by simply replacing svg code of selected icon with svg code of required icon.
Go To _bootstrap-styles.scss (static/assets/scss/bootstrap/_bootstrap-styles.scss )
You will find --primary-bg-color: #3366ff; , where you can simply change color code to change primary color
Example:

Simply you can also change color for primary-bg-hover:#255bfb; & --primary-bg-border:#255bfb; , where you can simply change color code to change them
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 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.
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 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
// $('body').addClass('rtl');
rtl version as shown below
$('body').addClass('rtl');
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 START
// $('body').addClass('dark-mode');
// DARK THEME END
dark-theme as shown below
// DARK THEME START
$('body').addClass('dark-mode');
// DARK THEME END
Go To _bootstrap-styles.scss (static/assets/scss/_variables.scss )
You will find --dark-body: #151636; , where you can simply change color code to change dark background color
Example:

To enable Transparent Background Image you have to open custom.jsfile present in (static/assets/js/custom.js) file and remove comments for bg-img1 in Transparent Bg-Image Stylesection as shown in below
// Bg-Image1 Style
// $('body').addClass('bg-img1');
// $('body').addClass('transparent-mode');
bg-img1 as shown below
// Bg-Image1 Style
$('body').addClass('bg-img1');
$('body').addClass('transparent-mode');
Go To "static/assets/images/photos" folder and replace your image with Previous image(bg-img1) within in image size.
Note: Please don't increase image size. Replace your image within given image size. otherwise the image will not fit in particular place 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 START
// $('body').addClass('color-header');
// COLOR HEADER END
color-header as shown below
// COLOR HEADER START
$('body').addClass('color-header');
// COLOR HEADER END
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 START
// $('body').addClass('dark-header');
// DARK HEADER END
dark-header as shown below
// DARK HEADER START
$('body').addClass('dark-header');
// DARK HEADER END
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 START
// $('body').addClass('light-header');
// LIGHT HEADER END
light-header as shown below
// LIGHT HEADER START
$('body').addClass('light-header');
// LIGHT HEADER END
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 START
// $('body').addClass('gradient-header');
// GRADIENT HEADER END
gradient-header as shown below
// GRADIENT HEADER START
$('body').addClass('gradient-header');
// GRADIENT HEADER END
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 LEFTMENU START
// $('body').addClass('light-menu');
// LIGHT LEFTMENU END
light-menu as shown below
// LIGHT LEFTMENU START
$('body').addClass('light-menu');
// LIGHT LEFTMENU END
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 LEFTMENU START
// $('body').addClass('color-menu');
// COLOR LEFTMENU END
color-menu as shown below
// COLOR LEFTMENU START
$('body').addClass('color-menu');
// COLOR LEFTMENU END
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 LEFTMENU START
// $('body').addClass('dark-menu');
// DARK LEFTMENU END
dark-menu as shown below
// DARK LEFTMENU START
$('body').addClass('dark-menu');
// DARK LEFTMENU END
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 LEFTMENU START
// $('body').addClass('gradient-menu');
// GRADIENT LEFTMENU END
gradient-menu as shown below
// GRADIENT LEFTMENU START
$('body').addClass('gradient-menu');
// GRADIENT LEFTMENU END
To enable layout-boxed you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for boxed as shown in below
// Boxed Layout Start //
// $('body').addClass('boxed');
// Boxed Layout Start //
boxed as shown below
// Boxed Layout Start //
$('body').addClass('boxed');
// Boxed Layout Start //
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 icon-text as shown in below
// ***** Icon with Text *****//
// $('body').addClass('icon-text');
// $('body').addClass('sidenav-toggled');
// if(document.querySelector('.icon-text').firstElementChild.classList.contains('responsive-log') !== true){
// icontext();
// }
sidemenu-icontext as shown below
// ***** Icon with Text *****//
$('body').addClass('icon-text');
$('body').addClass('sidenav-toggled');
if(document.querySelector('.icon-text').firstElementChild.classList.contains('responsive-log') !== true){
icontext();
// }
To enable Closed-Menu you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for closed as shown in below
/// ***** closed menu *****//
// $('body').addClass('closed');
// $('body').addClass('sidenav-toggled');
Closed Sidemenu as shown below
// ***** closed menu *****//
$('body').addClass('closed');
$('body').addClass('sidenav-toggled');
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 as shown in below
// ***** Icon-overlay *****//
// $('body').addClass('icon-overlay');
// $('body').addClass('sidenav-toggled');
sideicon-menu as shown below
// ***** Icon-overlay *****//
$('body').addClass('icon-overlay');
$('body').addClass('sidenav-toggled');
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 *****//
// $('body').addClass('hover-submenu');
// $('body').addClass('sidenav-toggled');
// if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('responsive-log') !== true){
// hovermenu();
// }
Hover Submenu as shown below
// ***** Hover submenu *****//
$('body').addClass('hover-submenu');
$('body').addClass('sidenav-toggled');
if(document.querySelector('.hover-submenu').firstElementChild.classList.contains('responsive-log') !== true){
hovermenu();
}
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-submenu1 as shown in below
// ***** Hover submenu1 *****//
// $('body').addClass('hover-submenu1');
// $('body').addClass('sidenav-toggled');
// if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('responsive-log') !== true){
// hovermenu();
// }
Hover Submenu Style1 as shown below
// ***** Hover submenu1 *****//
$('body').addClass('hover-submenu1');
$('body').addClass('sidenav-toggled');
if(document.querySelector('.hover-submenu1').firstElementChild.classList.contains('responsive-log') !== true){
hovermenu();
}
To enable Horizontal layout you have to open custom.js file present in (static/assets/js/custom.js) file and remove comments for horizontal as shown in below
// ***** Horizontal Click Menu ***** //
// $('body').addClass('horizontal');
Horizontal layout as shown below
// ***** Horizontal Click Menu ***** //
$('body').addClass('horizontal');
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 as shown in below
// ***** Horizontal Hover Menu ***** //
// $('body').addClass('horizontal-hover');
Horizontal Hover layout as shown below
// ***** Horizontal Hover Menu ***** //
$('body').addClass('horizontal-hover');
Open custom.js file present in static/assets/js/custom.js in that file you will find below js, Horizontal (or) Horizontal Hover layout to enable wrap
style for Horizontal or Horizontal Hover
noWrap style is given as default horizontal menu style,if you want to change it to wrap style please follow below process.
$('#slide-left').addClass('d-none');
$('#slide-right').addClass('d-none');
// $('#slide-left').removeClass('d-none');
// $('#slide-right').removeClass('d-none');
if (!document.querySelector('body').classList.contains('login-img') && !$('body').hasClass('main-content')) {
document.querySelector('.horizontal .side-menu')?.classList.add('flex-nowrap');

noWrap with wrap as
shown below and remove comments for $('#slide-left').addClass('d-none'); & $('#slide-right').addClass('d-none');
and add comments to $('#slide-left').removeClass('d-none'); & $('#slide-right').removeClass('d-none'); as shown below.
//$('#slide-left').addClass('d-none');
//$('#slide-right').addClass('d-none');
$('#slide-left').removeClass('d-none');
$('#slide-right').removeClass('d-none');
if (!document.querySelector('body').classList.contains('login-img') && !$('body').hasClass('main-content')) {
document.querySelector('.horizontal .side-menu')?.classList.add('flex-wrap');

Simply you can change noWrap with wrapto change the style of Horizontal or Horizontal Hover Menus
Open themeColors.js file static/assets/js/themeColors.js
To clear LocalStorage loading functions you need to remove localStorageBackup() function in themeColors.js as shown below
function localStorageBackup() {
}
To remove complete LocalStorage saving you need to remove all localstorage related calling functions in themeColors.js static/assets/js/themeColors.js and custom-1.js static/assets/js/custom-1.js files.
LocalStorage related functions like localStorage.setItem, localStorage.removeItem, localStorage.getItem, localStorage.clear. Below are the some examples to find out.
localStorage.setItem('dayonelightMode', true);
localStorage.removeItem('dayonetransparentMode');
localStorage.removeItem('dayonedarkMode');
Google fonts are used in the template. They are as follows: Google Fonts
All Images are used: Pexels.com