Admin Template Custom

Initial Setup

Install Django and Create a Project

Install Django.
Set up a new project.
Create an app within the project.

Step 1: Install Django

First, you need to install Django. You can either install it globally on your system or within a virtual environment for better project isolation.

Install Django globally using pip:

pip install django

Step 2: Set up a New Django Project

Once Django is installed, you can create a new Django project using the django-admin command.

Create a new project:
- Run the following command to create a new Django project:

django-admin startproject myproject

This will create a new directory myproject with the initial Django project structure.

Navigate to the project directory:

cd myproject

Run the development server to ensure everything is working:

Start the development server:

python manage.py runserver

- Open a web browser and go to http://127.0.0.1:8000/. You should see the Django welcome page, confirming that the project has been set up correctly.

Step 3: Create a New App

In Django, apps are the components that handle specific functionalities of the project (e.g., user authentication, blog, etc.). You can create an app within the project using the following steps:

Create an app:
- Run the following command to create a new app

python manage.py startapp myapp

Register the app in the project:

Open the settings.py file in the myproject directory.
Add 'myapp' to the INSTALLED_APPS list:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',  # Add this line
]

Check the app setup:

Run the server again to ensure everything works:

python manage.py runserver

Project Structure after Setup

After completing the steps, your project structure will look like this:

myproject/
│
├── manage.py
├── myproject/
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
│
└── myapp/
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations/
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py

myproject/: The project directory contains settings, URL configurations, and other project-level files.
myapp/: The app directory where you’ll define your models, views, templates, and other app-specific files.
manage.py: A command-line utility that lets you interact with the Django project.

This is the basic setup, and now you’re ready to start customizing the Django admin template or building other features within the app!

Configure TEMPLATES

Step 1: Configure TEMPLATES in settings.py

In your settings.py, you’ll need to configure the TEMPLATES directory so that Django can locate your custom template files.

# settings.py

import os

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],  # Add this line to point to your templates folder
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

DIRS: This points to the root templates folder where you’ll store all your custom templates. In this case, it is set to look for the templates folder inside your project’s BASE_DIR.
APP_DIRS: Setting this to True allows Django to automatically look for templates inside app directories as well, but we’re focusing on the global templates folder here.

Step 2: Organize the `templates` Folder

Recommended Template Structure for Django with Bootstrap:

myproject/
├── manage.py
├── myproject/
│   ├── __init__.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── templates/
│   ├── admin/
│   │   ├── base_site.html
│   │   ├── index.html
│   │   ├── login.html
│   │   ├── change_form.html
│   │   ├── change_list.html
│   │   ├── delete_confirmation.html
│   │   ├── password_change_form.html
│   │   └── password_change_done.html
│   ├── includes/
│   │   ├── header.html
│   │   ├── footer.html
│   │   ├── sidebar.html
│   │   └── scripts.html
│   ├── layouts/
│   │   ├── base.html
│   │   ├── base_admin.html
│   ├── cards/
│   │   ├── product_card.html
│   │   ├── user_card.html
│   ├── modals/
│   │   ├── confirmation_modal.html
│   │   └── form_modal.html
│   ├── store/
│   │   ├── product_list.html
│   │   ├── product_detail.html
│   │   └── cart.html
│   ├── errors/
│   │   ├── 403.html
│   │   ├── 404.html
│   │   └── 500.html
│   └── pages/
│       ├── dashboard.html
│       ├── user_profile.html
│       └── settings.html
├── static/
│   ├── css/
│   │   ├── bootstrap.min.css
│   │   └── custom_admin.css
│   ├── js/
│   │   ├── bootstrap.bundle.min.js
│   │   └── custom_admin.js
│   └── images/
│       └── logo.png
└── apps/
    ├── __init__.py
    ├── admin.py
    ├── models.py
    └── views.py

base.html

ধাপ ১: একটি মৌলিক HTML কাঠামো তৈরি করুন

প্রথমে, একটি মৌলিক HTML কাঠামো তৈরি করতে হবে, যা সাইটের ভিত্তি হিসেবে কাজ করবে। এটি <html>, <head>, এবং <body> ট্যাগ নিয়ে গঠিত।

{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Django Admin{% endblock %}</title>
</head>
<body>
    <!-- এখানে আপনার কনটেন্ট যাবে -->
</body>
</html>

ধাপ ২: CSS এবং JavaScript লিংক যোগ করুন

এখন, আপনার CSS এবং JavaScript ফাইলগুলোর লিংক যোগ করুন। এটি সাইটের ডিজাইন এবং কার্যকারিতার জন্য অপরিহার্য।

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Django Admin{% endblock %}</title>

    <!-- Bootstrap CSS লোড করুন -->
    <link href="{% static 'assets/css/soft-ui-dashboard.css' %}" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">

    <!-- ডিফল্ট Django Admin CSS মুছে দিন (ঐচ্ছিক) -->
    <style>
        /* আপনি এখানে আপনার নিজস্ব CSS যোগ করতে পারেন */
    </style>

    <!-- কাস্টম স্টাইলশিট -->
    {% block stylesheet %}
    {% endblock %}
    
    {% block extrahead %}
    {% endblock %}
</head>

ধাপ ৩: সাইডনাভ এবং প্রধান কনটেন্ট

এখন, সাইডনাভ এবং প্রধান কনটেন্টের কাঠামো তৈরি করুন। এখানে ডায়নামিকলি অ্যাপ এবং মডেল লোড হবে।

<body class="g-sidenav-show bg-gray-100">
  <aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 ps ps--active-y" id="sidenav-main">
    <div class="sidenav-header">
      <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
      <a class="navbar-brand m-0" href="" target="_blank">
        <img src="{% static 'assets/img/logo-ct-dark.png' %}" class="navbar-brand-img h-100" alt="main_logo">
        <span class="ms-1 font-weight-bold">OleeTech</span>
      </a>
    </div>
    <hr class="horizontal dark mt-0">
    <div class="collapse navbar-collapse w-auto ps ps--active-y" id="sidenav-collapse-main">
      <ul class="navbar-nav">
        <!-- প্রতিটি অ্যাপের জন্য লুপ -->
        {% if app_list %}
          {% for app in app_list %}
            <li class="nav-item">
              <a class="nav-link {% if app.app_url in request.path|urlencode %}active{% endif %}" href="{{ app.app_url }}">
                <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                  <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <title>credit-card</title>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                          <g transform="translate(453.000000, 454.000000)">
                            <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
                            <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
                <span class="nav-link-text ms-1">{{ app.name }}</span>
              </a>
            </li>
            {% for model in app.models %}
            <li class="nav-item ms-3">
              <a class="nav-link {% if model.admin_url in request.path|urlencode %}active{% endif %}" href="{{ model.admin_url }}">
                <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                  <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <title>credit-card</title>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                          <g transform="translate(453.000000, 454.000000)">
                            <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
                            <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
                <span class="nav-link-text ms-1">{{ model.name }}</span>
              </a>
            </li>
            {% endfor %}
          {% endfor %}
        {% else %}
          <li class="nav-item">
            <a class="nav-link text-danger disabled" href="#">
              <span class="nav-link-text ms-1">{% translate 'No applications available' %}</span>
            </a>
          </li>
        {% endif %}
      </ul>
    </div>
  </aside>

  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur" navbar-scroll="true">
      <div class="container-fluid py-1 px-3">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb bg-transparent mb-0 pt-1 p-0">
            <li class="breadcrumb-item text-sm">
              <a class="opacity-5 text-white" href="javascript:;">Home</a>
            </li>
            <li class="breadcrumb-item text-sm text-white active" aria-current="page">{% block title %}Dashboard{% endblock %}</li>
          </ol>
        </nav>
        <div class="collapse navbar-collapse" id="navbar">
          <ul class="navbar-nav me-auto ms-0 justify-content-end">
            <li class="nav-item d-flex align-items-center">
              <a href="javascript:;" class="nav-link text-white font-weight-bold px-0">
                <i class="fa fa-user me-1"></i>
                {{ user.username }}
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          {% block content %}
          <!-- এখানে আপনার কনটেন্ট যাবে -->
          {% endblock %}
        </div>
      </div>
    </div>
  </main>
</body>

ধাপ ৪: কাস্টম স্ক্রিপ্ট যোগ করুন

সবশেষে, কাস্টম JavaScript স্ক্রিপ্ট যোগ করুন যাতে আপনার সাইটের কার্যকারিতা উন্নত হয়।

<body>
<!-- Load Bootstrap JS and other necessary JS -->
<script src="{% static 'assets/js/core/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'assets/js/core/popper.min.js' %}"></script>


<script src="{% static 'assets/js/soft-ui-dashboard.js' %}"></script>
<script src="{% static 'assets/js/plugins/perfect-scrollbar.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/smooth-scrollbar.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/chartjs.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/Chart.extension.js' %}"></script>


{% block script %}
{% endblock %}
</body>
</body>

Full Code

{% load static %}
{% load i18n %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{% block title %}Django Admin{% endblock %}</title>

    <!-- Load Bootstrap CSS -->
    <link href="{% static 'assets/css/soft-ui-dashboard.css' %}" rel="stylesheet">
    <link href=" https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css " rel="stylesheet">

    <!-- Remove Default Django Admin CSS (optional) -->
    <style>
        /* You can add your own custom CSS to override any admin styles */
    </style>

    <!-- Custom Stylesheets -->
    {% block stylesheet %}
    {% endblock %}
    
    {% block extrahead %}
    {% endblock %}
</head>
<body class="g-sidenav-show  bg-gray-100" >
  <aside class="sidenav navbar navbar-vertical navbar-expand-xs border-0 border-radius-xl my-3 fixed-start ms-3 ps ps--active-y" id="sidenav-main">
    <div class="sidenav-header">
      <i class="fas fa-times p-3 cursor-pointer text-secondary opacity-5 position-absolute end-0 top-0 d-none d-xl-none" aria-hidden="true" id="iconSidenav"></i>
      <a class="navbar-brand m-0" href="{% url 'admin:index' %}" target="_blank">
        <img src="{% static 'assets/img/logo-ct-dark.png'  %}" class="navbar-brand-img h-100" alt="main_logo">
        <span class="ms-1 font-weight-bold">OleeTech</span>
      </a>
    </div>
    <hr class="horizontal dark mt-0">
    <div class="collapse navbar-collapse w-auto ps ps--active-y" id="sidenav-collapse-main">
      <ul class="navbar-nav">
        <!-- Loop through each app in the app list -->
        {% if app_list %}
          {% for app in app_list %}
            <!-- Application Menu Item -->
            <li class="nav-item">
              <a class="nav-link {% if app.app_url in request.path|urlencode %}active{% endif %}" href="{{ app.app_url }}">
                <!-- Icon Placeholder (you can dynamically set the icon per app if you like) -->
                <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                  <!-- You can add an icon here based on app or use a default icon -->
                  <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>credit-card</title>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                          <g transform="translate(453.000000, 454.000000)">
                            <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
                            <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
                <span class="nav-link-text ms-1">{{ app.name }}</span>
              </a>
            </li>
      
            <!-- Loop through each model in the current app -->
            {% for model in app.models %}
            <li class="nav-item ms-3">
              <a class="nav-link {% if model.admin_url in request.path|urlencode %}active{% endif %}" href="{{ model.admin_url }}">
                <!-- Icon for Model -->
                <div class="icon icon-shape icon-sm shadow border-radius-md bg-white text-center me-2 d-flex align-items-center justify-content-center">
                  <svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                    <title>credit-card</title>
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                      <g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
                        <g transform="translate(1716.000000, 291.000000)">
                          <g transform="translate(453.000000, 454.000000)">
                            <path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
                            <path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
                          </g>
                        </g>
                      </g>
                    </g>
                  </svg>
                </div>
                <span class="nav-link-text ms-1">{{ model.name }}</span>
              </a>
            </li>
            {% endfor %}
          {% endfor %}
        {% else %}
          <!-- Fallback message if no apps are available -->
          <li class="nav-item">
            <a class="nav-link text-danger disabled" href="#">
              <span class="nav-link-text ms-1">{% translate 'No applications available' %}</span>
            </a>
          </li>
        {% endif %}
      </ul>
      
    <div class="ps__rail-x" style="left: 0px; bottom: -200px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 200px; right: 0px; height: 161px;"><div class="ps__thumb-y" tabindex="0" style="top: 66px; height: 53px;"></div></div></div>

  <div class="ps__rail-x" style="left: 0px; bottom: -110px;"><div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__rail-y" style="top: 110px; height: 489px; right: 0px;"><div class="ps__thumb-y" tabindex="0" style="top: 90px; height: 399px;"></div></div>
  
  </aside>

  <main class="main-content position-relative max-height-vh-100 h-100 border-radius-lg ">
    <!-- Navbar -->
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur" navbar-scroll="true">
      <div class="container-fluid py-1 px-3">
        <!-- Breadcrumb Section -->
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb bg-transparent mb-0 pb-0 pt-1 px-0 me-sm-6 me-5">
            <li class="breadcrumb-item text-sm">
              <a class="opacity-5 text-dark" href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
            </li>
    
            <!-- Automatically generated breadcrumbs -->
            {% block breadcrumbs %}
            <li class="breadcrumb-item text-sm text-dark active" aria-current="page">
              {{ view_title|default:"Dashboard" }}
            </li>
            {% endblock %}
          </ol>
          <!-- Page Title -->
          <h6 class="font-weight-bolder mb-0">{{ view_title|default:"Dashboard" }}</h6>
        </nav>
        <div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
          <div class="ms-md-auto pe-md-3 d-flex align-items-center">

          </div>
          <ul class="navbar-nav  justify-content-end">

            <li class="nav-item d-flex align-items-center">
              <a href="javascript:;" class="nav-link text-body font-weight-bold px-0">
                <i class="fa fa-user me-sm-1"></i>
                <span class="d-sm-inline d-none">Sign In</span>
              </a>
            </li>



          </ul>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->
    <div class="container-fluid py-4">


      <footer class="footer pt-3  ">
        <div class="container-fluid">
          <div class="row align-items-center justify-content-lg-between">

          </div>
        </div>
      </footer>
    </div>
  </main>



<!-- Load Bootstrap JS and other necessary JS -->
<script src="{% static 'assets/js/core/bootstrap.bundle.min.js' %}"></script>
<script src="{% static 'assets/js/core/popper.min.js' %}"></script>


<script src="{% static 'assets/js/soft-ui-dashboard.js' %}"></script>
<script src="{% static 'assets/js/plugins/perfect-scrollbar.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/smooth-scrollbar.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/chartjs.min.js' %}"></script>
<script src="{% static 'assets/js/plugins/Chart.extension.js' %}"></script>


{% block script %}
{% endblock %}
</body>
</html>

Bootstrap Admin Template Integration

Download the Bootstrap Admin Template

Choose a Bootstrap admin template (e.g., AdminLTE, SB Admin, etc.).
Download and extract the template files.

Organize Template Files

Organize CSS, JavaScript, and asset files within the static directory of your Django project.

Configure Django Static and Media Files

Link Bootstrap CSS, JS, and fonts in the base template.

Configure Static and Media Settings

Update settings.py for static file serving.

Configure static and media URL settings.

Link Bootstrap Assets

Customizing Django Admin Base Template

Locate the Default Admin Template

Explore Django’s default admin templates.
Understand the structure of base_site.html for customization.

Override Default Django Admin Template

Extend the default Django admin base template.

Create a custom admin/base_site.html.

Styling the Admin Dashboard

Replace Default Admin CSS with Bootstrap

Remove Django’s default CSS styles.
Add Bootstrap-specific classes to customize the look and feel.

Customize Admin Header and Sidebar

Customize the sidebar to integrate with Bootstrap.

Replace default header with Bootstrap-styled navigation.

Customizing Django Admin Forms

Override Form Templates

Replace default form templates to use Bootstrap form styles.
Update input fields, checkboxes, buttons with Bootstrap classes.

Customize Model and Inline Form Views

Style form errors and validation messages using Bootstrap.

Customize formsets, inlines, and detail views.

Integrating JavaScript

Add Interactive Elements

Integrate Bootstrap’s JavaScript components (modals, dropdowns, tooltips).
Add JavaScript interactivity (e.g., collapsible sidebar, dynamic widgets).

Use Django’s Template Context in JavaScript

Pass dynamic data from Django templates to Bootstrap JS components.

Modifying Django Admin Pages

List and Detail View Customization

Customize the list and detail views for your models.
Add search, filters, and action buttons using Bootstrap UI.

Pagination Customization

Customize pagination styles using Bootstrap.

Adding Dashboard Widgets

Add Admin Dashboard Widgets

Display dynamic data such as statistics, charts, or notifications.

Create custom dashboard widgets using Bootstrap cards.

User Authentication Customization

Customize Login/Logout Pages

Override Django’s admin login template.
Style login, logout, and password reset forms with Bootstrap.

Add Custom User Profile in Admin Panel

Add avatars or user settings using Bootstrap components.

Customize user profile management pages in the admin.

Enhancing the Admin with Third-Party Packages

Install Django Admin Extensions

Explore third-party packages to enhance functionality (e.g., Django Grappelli).
Integrate Bootstrap with these extensions if needed.

Add Django-Admin-Interface

Use this package to add Bootstrap themes directly without much customization.

Optimizing for Mobile

Make Admin Panel Responsive

Ensure Bootstrap’s responsive grid system is applied to all admin pages.
Test the admin interface on mobile and tablet devices.

Add Mobile-Specific Interactions

Optimize collapsible menus, touch interactions, and mobile navigation.

Testing and Debugging

Test Cross-Browser Compatibility

Ensure the customized admin panel works across major browsers.

Debug Template Issues

Optimize performance by minimizing asset files.

Use Django’s template debugging tools to resolve issues.

Deploying the Custom Admin

Prepare the Project for Production

Collect static files for deployment.
Optimize settings for production.

Deploy to a Server

Deploy the project using services like Heroku, DigitalOcean, or AWS.

Django