Admin Template

Color Admin

“Django Version” Documentation by “Sean Ngu” v5.4.1

Updated on: 27/July/2024
By: Sean Ngu

If you have any inquiries or require further assistance beyond what is covered in this help file, please do not hesitate to send us a message through Wrapbootstrap. We are more than happy to help.

Thank you very much!

A) Installation - top

Follow the following step to install the django in your localhost
You may refer to their official documentation for how to setup the development environment.
Setup Guide 

<!-- run the following command --> 
cd /your-path-url/template_django/ColorAdminApp/gulp
npm install
gulp plugins 
gulp

cd /your-path-url/template_django
python manage.py runserver

<!-- browse the url --> 
http://127.0.0.1:8000/

Make sure python >= 3.10 & node.js has been installed on your localhost / server

B) File Structure - top

File structure overview for Django Version

template_django/                    
  ├── db.sqlite3                     // SQLite database file
  ├── manage.py                      // Django management script
  ├── ColorAdmin/                     // Django project directory
  │   ├── asgi.py                    // ASGI configuration
  │   ├── settings.py                // Django settings
  │   ├── urls.py                    // URL routing
  │   ├── wsgi.py                    // WSGI configuration
  │   ├── __init__.py                // Package initialization
  │   ├── __pycache__/               // Cached Python files
  │   └── templates/                 // HTML templates
  └── ColorAdminApp/                  // Django app directory
      ├── admin.py                   // Admin configuration
      ├── apps.py                    // App configuration
      ├── models.py                  // Database models
      ├── tests.py                   // Unit tests
      ├── urls.py                    // App-specific URL routing
      ├── views.py                   // View functions
      ├── __init__.py                // Package initialization
      ├── __pycache__/               // Cached Python files
      ├── gulp/                      // Gulp build system
      │   ├── gulpfile.js            // Gulp configuration
      │   ├── package.json           // Node.js package file
      │   └── src/                   // Source files for Gulp tasks
      ├── migrations/                // Database migration files
      ├── static/                    // Static files (CSS, JS, images)
      │   ├── css
      │   ├── data
      │   ├── img
      │   ├── js
      │   ├── plugins
      │   └── webfonts
      ├── utils/                     // Utility functions
      │   ├── __pycache__/           // Cached Python files
      │   └── context_processors.py  // Context processors for sidebar array
      └── templates/                 // App-specific HTML templates
          ├── base.html              // Base template
          ├── pages/                 // Demo pages
          └── partial/               // Reusable partial templates
              ├── header.html
              ├── header-mega-menu.html
              ├── scroll-top-btn.html
              ├── sidebar.html
              ├── sidebar-right.html
              ├── theme-panel.html
              └── top-menu.html

C) Layout Structure - top

We split the header, sidebar, footer and etc into few other part and include it in the base file. Base file has been located in /template_django/ColorAdminApp/templates/base.html.

<!DOCTYPE html>
<html lang="en" {% block htmlAttr %}{% endblock %}>
<head>
  <meta charset="utf-8">
  <title>Color Admin | {% block title %}{% endblock %}</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  
  <!-- ================== BEGIN core-css ================== -->
  {% load static %}
  <link href="{% static 'css/vendor.min.css' %}" rel="stylesheet" />
  <link href="{% static 'css/default/app.min.css' %}" rel="stylesheet" />
  <!-- ================== END core-css ================== -->
  
  {% block css %}{% endblock %}
</head>
<body class="{{ bodyClass }}{% if appHeaderHide is not None %} pace-top {% endif %}{% if appBoxedLayout %} boxed-layout {% endif %}" {{ bodyAttr }}>
  
  <div id="app" class="app 
    {% if not appHeaderHide %}app-header-fixed{% endif %}
    {% if not appSidebarHide %}app-sidebar-fixed{% endif %}
    {% if appHeaderHide is not None %}app-without-header{% endif %}
    {% if appSidebarEnd is not None %}app-with-end-sidebar{% endif %}
    {% if appSidebarEndToggled is not None %}app-sidebar-end-toggled{% endif %}
    {% if appSidebarMinified is not None %}app-sidebar-minified{% endif %}
    {% if appSidebarWide %}app-with-wide-sidebar{% endif %}
    {% if appSidebarTwo is not None %}app-with-two-sidebar{% endif %}
    {% if appSidebarHide is not None %}app-without-sidebar{% endif %}
    {% if appSidebarHover is not None %}app-with-hover-sidebar{% endif %}
    {% if appTopMenu is not None %}app-with-top-menu{% endif %}
    {% if appContentFullHeight is not None %}app-content-full-height{% endif %}
  ">
    {% if appHeaderHide is None %}
      {% include 'partial/header.html' %}
    {% endif %}
    
    {% if appSidebarHide is None %}
      {% include 'partial/sidebar.html' %}
    {% endif %}
    
    {% if appSidebarTwo %}
      {% include 'partial/sidebar-right.html' %}
    {% endif %}
    
    {% if appTopMenu %}
      {% include 'partial/top-menu.html' %}
    {% endif %}
    
    <div class="app-content {{ appContentClass }}">
      {% block content %}{% endblock %}
    </div>
    
    {% include 'partial/theme-panel.html' %}
  </div>

  {% include 'partial/scroll-top-btn.html' %} 
  
  {% block outter_content %}{% endblock %}

  <!-- ================== BEGIN core-js ================== -->
  <script src="{% static 'js/vendor.min.js' %}"></script>
  <script src="{% static 'js/app.min.js' %}"></script>
  <!-- ================== END core-js ================== -->
  
  {% block js %}{% endblock %}
</body>
</html>

D) Layout Options - top

Below is a list of supported settings that can be used as context variables in views.py.

Variable Usage
"bodyClass": "pace-top" Set the css class for <body> tag
"appHeaderHide": 1 Set to exclude the header from the page
"appHeaderInverse": 1 Set to enable the header dark mode
"appHeaderMegaMenu": 1 Set to show the header mega menu
"appHeaderLanguageBar": 1 Set to show the header language bar
"appTopMenu": 1 Set to include the top menu
"appSidebarHide": 1 Set to exclude the sidebar from the page
"appSidebarEnd": 1 Set to show the sidebar in right direction
"appSidebarTwo": 1 Set to show two sidebar in a page
"appSidebarEndToggled": 1 Set to toggle the right sidebar when page load
"appSidebarTransparent": 1 Set to enable the sidebar in transparent mode
"appSidebarWide": 1 Set to enable the sidebar in wide mode
"appSidebarMinified": 1 Set to enable the sidebar in minify mode
"appSidebarLight": 1 Set to enable the sidebar in light mode
"appSidebarHover": 1 Set to enable the sidebar in hover mode
"appSidebarSearch": 1 Set to enable the sidebar menu search function
"appBoxedLayout": 1 Set to make the page become boxed layout
"appContentFullHeight": 1 Set to make the page content full height
"appContentClass": "p-0" Set the css class for .app-content

Using blocks to add title / css / js / outter content by page level.

// example for how to add page title
{% block title %}Dashboard{% endblock %}

// example for how to add page level css
{% block css %}
  <link href="{% static 'plugins/photoswipe/dist/photoswipe.css' %}" rel="stylesheet">
  ...
{% endblock %}

// example for how to add page level js
{% block js %}
  <script src="{% static 'plugins/photoswipe/dist/photoswipe-ui-default.min.js' %}"></script>
  ...
{% endblock %}

// example of how to add content to the outer app-content div
{% block outter_content %}
  your content here
  ...
{% endblock %}

The sidebar menu is generated in /utils/context_processors.py and rendered globally through /templates/partial/sidebar.html. Below is an example of the sidebar menu array that can be defined in context_processors.py. The sidebar menu will automatically be set to active based on the URL name specified in urls.py. 

  sidebar_menu = [{
    'text': 'Navigation',
    'is_header': 1
  },{
    'url': '/',
    'icon': 'fa fa-sitemap',
    'text': 'Dashboard',
    'name': 'index'
  }, {
    'icon': 'fa fa-envelope',
    'text': 'Email',
    'children': [{
      'url': '/email/inbox',
      'action': 'Inbox',
      'text': 'Inbox',
      'name': 'emailInbox'
    }]
  }]

F) CSS - top

All the css files used in Color Admin has been compiled into two files app.min.css and vendor.min.css by gulp command. You may change the color scheme from /gulp/src/scss/_variables.scss.

vendor.min.css
  1. FontAwesome
  2. jQuery UI
  3. Animate.css
  4. Pace Loader
  5. Perfect Scrollbar
app.min.css
  1. Bootstrap
  2. Color Admin Core CSS

G) Javascript - top

This theme compiles 6 javascript library into two files app.min.js and vendor.min.js by gulp command.

vendor.min.js
  1. Pace Loader
  2. jQuery
  3. jQuery UI
  4. Bootstrap
  5. Perfect Scrollbar
  6. JavaScript Cookie
app.min.js
  1. Color Admin Core Javascript

H) Page Options - top

Sidebar Minified:

def index(request):
  context = {
    "appSidebarMinified": 1
  }
  return render(request, "pages/index.html", context)

Full height:

def index(request):
  context = {
    "appContentFullHeight": 1,
    "appContentClass": "p-0"
  }
  return render(request, "pages/index.html", context)

Full width:

def index(request):
  context = {
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Boxed Layout

def index(request):
  context = {
    "appBoxedLayout": 1
  }
  return render(request, "pages/index.html", context)

Top Menu

def index(request):
  context = {
    "appTopMenu": 1,
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Without Sidebar

def index(request):
  context = {
    "appSidebarHide": 1
  }
  return render(request, "pages/index.html", context)

Without Header

def index(request):
  context = {
    "appHeaderHide": 1
  }
  return render(request, "pages/index.html", context)

Sidebar Styling

def index(request):
  context = {
    "appSidebarWide": 1,
    "appSidebarLight": 1,
    "appSidebarTransparent": 1
  }
  return render(request, "pages/index.html", context)

Header Styling

def index(request):
  context = {
    "appHeaderInverse": 1,
    "appHeaderMegaMenu": 1,
    "appHeaderLanguageBar": 1
  }
  return render(request, "pages/index.html", context)

I) Dark Mode - top

Add the data-bs-theme="dark" attribute to <html> in template_django/ColorAdminApp/templates/base.html order to enable the dark mode.

If you have pre-select the dark-mode option in theme panel, do not forget to clear the browser cookie or remove the theme panel so that it won't affect the dark-mode class while page load. 
<html lang="en" data-bs-theme="dark">

J) Switch Design - top

Apple Design

  1. Change the following code from template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'css/apple/app.min.css' %}" rel="stylesheet" />
  2. Add the following css link to template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'plugins/ionicons/css/ionicons.min.css' %}" rel="stylesheet" />
  3. Change the sidebar icon from Fontawesome to Ionicons and background color class is needed as well.
    <div class="menu-icon">
  <i class="ion-ios-pulse bg-gradient-blue"></i>
</div>

Facebook Design

  1. Change the following code from template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'css/facebook/app.min.css' %}" rel="stylesheet" />
  2. Add the attribute [data-bs-theme="dark"] to the .app-header container in template_django/ColorAdminApp/templates/partial/header.html.
    <div id="header" class="app-header" data-bs-theme="dark">
  ...
</div>

Transparent Design

  1. Change the following code from template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'css/transparent/app.min.css' %}" rel="stylesheet" />
  2. Add the .app-cover next to the <body> tag in template_django/ColorAdminApp/templates/base.html.
    <body>
  <!-- BEGIN page-cover -->
  <div class="app-cover"></div>
  <!-- END page-cover -->
  
  ...
</body>

Google Design

  1. Change the following code from template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'css/google/app.min.css' %}" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_django/ColorAdminApp/templates/base.html.
    <div id="app" class="app app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_django/ColorAdminApp/templates/partial/header.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>

Material Design

  1. Change the following code from template_django/ColorAdminApp/templates/base.html.
    <link href="{% static 'css/material/app.min.css' %}" rel="stylesheet" />
  2. Change the sidebar icon from Fontawesome to Material Icons.
    <div class="menu-icon">
  <i class="material-icons">home</i>
</div>
  3. Add the class .app-with-wide-sidebar to the .app container in template_django/ColorAdminApp/templates/base.html.
    <div id="app" class="app app-with-wide-sidebar">
  ...
</div>
  4. Add the navbar desktop toggler to the .app-header in template_django/ColorAdminApp/templates/partial/header.html.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN navbar-header -->
  <div class="navbar-header">
    <button type="button" class="navbar-desktop-toggler" data-toggle="app-sidebar-minify">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <button type="button" class="navbar-mobile-toggler" data-toggle="app-sidebar-mobile">
      ...
    </button>
    <a href="index.html" class="navbar-brand">
      Color Admin Material
    </a>
  </div>
  <!-- END navbar-header -->
  ...
</div>
  5. Add the floating navbar form to the .app-header in template_django/ColorAdminApp/templates/partial/header.html AND REMOVE the default .navbar-form.
    <!-- BEGIN #header -->
<div id="header" class="app-header">
  <!-- BEGIN header-nav -->
  <div class="navbar-nav">
    <div class="navbar-item">
      <a href="#" data-toggle="app-header-floating-form" class="navbar-link icon">
        <i class="material-icons">search</i>
      </a>
      
      <!-- REMOVE IT -->
      <div class="navbar-item navbar-form">
        ...
      </div>
    </div>
    ...
  </div>
  <!-- END header-nav -->
  
  <div class="navbar-floating-form">
    <button class="search-btn" type="submit"><i class="material-icons">search</i></button>
    <input type="text" class="form-control" placeholder="Search Something..." />
    <a href="#" class="close" data-dismiss="app-header-floating-form">
      <i class="material-icons">close</i>
    </a>
  </div>
</div>
  6. Change the .app-loader in template_django/ColorAdminApp/templates/base.html.
    <!-- BEGIN #loader -->
<div id="loader" class="app-loader">
  <div class="material-loader">
    <svg class="circular" viewBox="25 25 50 50">
      <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
    </svg>
    <div class="message">Loading...</div>
  </div>
</div>
<!-- END #loader -->

K) SCSS - top

Global Variables

The /ColorAdminApp/gulp/src/scss/_variables.scss file contains the variables that control the styles of your application.

To edit these variables, navigate to the /ColorAdminApp/gulp/src/scss/_variables.scss file in your code editor and modify the values of the variables to suit your needs. 

<!-- global variable -->
/ColorAdminApp/gulp/src/scss/_variables.scss

Dark Mode Variables

The /ColorAdminApp/gulp/src/scss/_variables-dark.scss file contains the variables that control the styles for dark mode. These variables are used in conjunction with the variables in the /ColorAdminApp/gulp/src/scss/_variables.scss file to provide different values for light and dark modes. 

<!-- dark mode variable -->
/ColorAdminApp/gulp/src/scss/_variables-dark.scss

M) NPM Package - top

Below is the list of package that has been installed in this project. You may use the following example to find the package from their official website. https://www.npmjs.com/package/bootstrap 

{
  "name": "color-admin",
  "version": "5.4.1",
  "description": "Color Admin",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "SeanTheme",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.7.0",
    "gulp-file-include": "^2.3.0",
    "gulp-header": "^2.0.9",
    "gulp-livereload": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "gulp-uglify-es": "^3.0.0",
    "husky": "^9.1.1",
    "merge-stream": "^2.0.0",
    "sass": "1.75.0"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^42.0.1",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "@fullcalendar/bootstrap": "^6.1.15",
    "@fullcalendar/core": "^6.1.15",
    "@fullcalendar/daygrid": "^6.1.15",
    "@fullcalendar/interaction": "^6.1.15",
    "@fullcalendar/list": "^6.1.15",
    "@fullcalendar/timegrid": "^6.1.15",
    "@highlightjs/cdn-assets": "^11.10.0",
    "abpetkov-powerange": "github:npmcomponent/abpetkov-powerange",
    "angular": "^1.8.2",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.30",
    "animate.css": "^4.1.1",
    "apexcharts": "3.51",
    "blueimp-file-upload": "^10.32.0",
    "blueimp-gallery": "^3.4.0",
    "bootstrap": "^5.3.3",
    "bootstrap-datepicker": "^1.10.0",
    "bootstrap-daterangepicker": "^3.1.0",
    "bootstrap-datetime-picker": "^2.4.4",
    "bootstrap-icons": "^1.11.3",
    "bootstrap-social": "^5.1.1",
    "bootstrap-timepicker": "^0.5.2",
    "bootstrap3-wysihtml5-bower": "^0.3.3",
    "chart.js": "^4.4.3",
    "clipboard": "^2.0.11",
    "d3": "^3.5.17",
    "datatables.net": "^2.1.0",
    "datatables.net-autofill": "^2.7.0",
    "datatables.net-autofill-bs5": "^2.7.0",
    "datatables.net-bs5": "^2.1.0",
    "datatables.net-buttons": "^3.1.0",
    "datatables.net-buttons-bs5": "^3.1.0",
    "datatables.net-colreorder": "^2.0.3",
    "datatables.net-colreorder-bs5": "^2.0.3",
    "datatables.net-fixedcolumns": "^5.0.0",
    "datatables.net-fixedcolumns-bs5": "^5.0.0",
    "datatables.net-fixedheader": "^4.0.1",
    "datatables.net-fixedheader-bs5": "^4.0.1",
    "datatables.net-keytable": "^2.12.1",
    "datatables.net-keytable-bs5": "^2.12.1",
    "datatables.net-responsive": "^3.0.2",
    "datatables.net-responsive-bs5": "^3.0.2",
    "datatables.net-rowreorder": "^1.5.0",
    "datatables.net-rowreorder-bs5": "^1.5.0",
    "datatables.net-scroller": "^2.4.3",
    "datatables.net-scroller-bs5": "^2.4.3",
    "datatables.net-select": "^2.0.3",
    "datatables.net-select-bs5": "^2.0.3",
    "datepickk": "^1.4.1",
    "dropzone": "^5.9.3",
    "flag-icons": "^7.2.3",
    "flot": "^4.2.6",
    "gritter": "^1.7.4",
    "intro.js": "^7.2.0",
    "ion-rangeslider": "^2.3.1",
    "ionicons": "^7.4.0",
    "isotope-layout": "^3.0.6",
    "jquery": "^3.7.1",
    "jquery-knob": "^1.2.11",
    "jquery-migrate": "^3.5.2",
    "jquery-mockjax": "^2.6.1",
    "jquery-sparkline": "^2.4.0",
    "jquery-ui-dist": "^1.13.3",
    "jquery.maskedinput": "^1.4.1",
    "js-cookie": "^3.0.5",
    "jstree": "^3.3.16",
    "jszip": "^3.10.1",
    "jvectormap-content": "^0.1.0",
    "jvectormap-next": "^3.1.1",
    "kbw-countdown": "^2.1.1",
    "lightbox2": "^2.11.4",
    "lity": "^2.4.1",
    "masonry-layout": "^4.2.2",
    "moment": "^2.30.1",
    "nvd3": "^1.8.6",
    "oclazyload": "^1.1.0",
    "pace-js": "^1.2.4",
    "parsleyjs": "^2.9.2",
    "pdfmake": "^0.2.10",
    "perfect-scrollbar": "^1.5.5",
    "photoswipe": "^5.4.4",
    "raphael": "^2.3.0",
    "select-picker": "^0.3.2",
    "select2": "^4.0.13",
    "simple-line-icons": "^2.5.5",
    "spectrum-colorpicker2": "^2.0.10",
    "summernote": "^0.8.20",
    "sweetalert": "^2.1.2",
    "swiper": "^11.1.5",
    "switchery": "github:abpetkov/switchery",
    "tag-it": "^2.0.0",
    "x-editable-bs4": "^1.5.6"
  }
}