Integrate Django Jazzmin theme to Django Admin | AdminLTE Dashboard

Hello Geeks,
First of all, I would like to thank you for reaching here. No doubt you're gonna be a successful Django developer ahead.

• Introduction
• Instructions
  • Setup Virtual Environment (Optional)
  • Installing libraries
  • Create Django Project
  • Register Apps
  • Create Model and ModelAdmin
  • Make Migrations and Migrate Models
  • Enjoy the output

Introduction

In this blog, I am guiding to integrate django-jazzmin theme to the Django project.
According to their documentation :

Django Jazzmin is intended as a drop-in app to jazz up your Django admin site, with plenty of things you can easily customise, including a built-in UI customizer.

The default admin dashboard provided by Django isn't best fitted for our need every time and we need to customize a lot to match the theme with our need. And some of us may not prefer to go with the default theme which looks like this :

For the developers who want to get the customized and better-looking admin dashboard for Django, django-jazzmin is the one which has better UI components with features like :

• Drop-in admin skin, all configuration optional
• Select2 drop-downs
• Bootstrap 4 & AdminLTE UI components
• Search bar for any given model admin
• Modal windows instead of popups
• Customisable side menu
• Customisable top menu
• Customisable user menu
• Responsive
• Customisable UI (via Live UI changes, or custom CSS/JS)
• Based on the latest adminlte + bootstrap

which looks like this:

To achieve a good looking AdminLTE dashboard on our Django project, we need to follow a sequence of instructions.

Instructions

Navigate to your workspace:

# Terminal
# =========

$ mkdir - ~/workspace/integrate-django-jazzmin
$ cd ~/workspace/integrate-django-jazzmin

Setup Virtual Environment (Optional)

# Terminal
# =========

$ python -m virtualenv venv

created virtual environment CPython3.8.6.final.0-64 in 116ms
  creator CPython3Posix(dest=/home/ubuntu/workspace/integrate-django-jazzmin/venv, clear=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/home/ubuntu/.local/share/virtualenv)
    added seed packages: pip==20.2.4, setuptools==50.3.2, wheel==0.35.1
  activators BashActivator,CShellActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator

This will set up a virtualenv named venv which isolates libraries and dependencies from the global installation.
Now, activate the virtual environment.

$ source venv/bin/activate

Installing libraries

Now, we are good to install the libraries we need to set up the Django project.

$ pip install django django-jazzmin

This will install the django and django-jazzmin library.

Create Django Project

It's time to create a Django project.

$ django-admin startproject dj_jazzmin_demo .

For a better demonstration of the theme, I'm going to create a Django app named blog.

$ python manage.py startapp blog

which created directory structure like this:

# Directory Structure
# ====================
.
├── blog
│   ├── admin.py
│   ├── apps.py
│   ├── __init__.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   └── views.py
├── dj_jazzmin_demo
│   ├── asgi.py
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
└── manage.py

Register Apps

Now, let's register the blog app inside INSTALLED_APPS in settings.py.
Add blog.apps.BlogConfig after the pre-registered django apps.
Also, we are good to add our theme to the django project. For that, register jazzmin theme to INSTALLED_APPS.
But, we're registering jazzmin on the top of other pre-registered apps because we want the theme to load earlier than other apps.

# dj_jazzmin_demo/settings.py
# =============================

INSTALLED_APPS = [
    # Pre-loading Third Party apps
    'jazzmin', 

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # Local Apps
    'blog.apps.BlogConfig',

]

Create Model and ModelAdmin

Now, we have our app and theme registered in our project. Then, we can write models for the app blog.
Let's write a model named Post in models.py inside blog app.

# blog/models.py
# ================

from django.db import models
from django.utils.translation import ugettext_lazy as _

class Post(models.Model):
    '''Model definition for Post.'''

    title = models.CharField(_('Post'), max_length=50)
    content = models.TextField(_('Content'))
    is_publishable = models.BooleanField(_('Is Publishable ?'), default=False)
    created_at = models.DateTimeField(_('Created at '),auto_now_add=True)
    updated_at = models.DateTimeField(_('Updated at '),auto_now=True)

    class Meta:
        '''Meta definition for Post.'''

        verbose_name = 'Post'
        verbose_name_plural = 'Posts'

    def __str__(self):
        '''Unicode representation of Post.'''
        return self.title

For making our app accessible via the admin dashboard, we're going to register the model Post in admin.py.

# blog/admin.py
# ==============

from django.contrib import admin
from .models import Post


@admin.register(Post)
class PostAdmin(admin.ModelAdmin):
    '''Admin View for Post'''

    list_display = (
        'title',
        'is_publishable',
        'created_at',
        'updated_at',
    )
    list_filter = (
        'is_publishable',
        'created_at',
        'updated_at',
    )

Make Migrations and Migrate Models

Now, we're good to make migrations and migrate the model we created.

# Terminal
# =========

$ python manage.py makemigrations blog
Migrations for 'blog':
  blog/migrations/0001_initial.py
    - Create model Post

# Terminal
# =========

$ python manage.py migrate
Operations to perform:
  Apply all migrations: admin, auth, blog, contenttypes, sessions
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying auth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying blog.0001_initial... OK
  Applying sessions.0001_initial... OK

For accessing the admin panel, we need to create a superuser which has the privilege to access the admin dashboard and perform operations over there.

# Terminal
# =========

$ python manage.py createsuperuser
Username (leave blank to use 'ubuntu'): ubuntu
Email address: 
Password: 
Password (again): 
Superuser created successfully.

Enjoy the output

Finally, we've completed the procedure to create a basic Django project and integrate django-jazzmin theme.
Now, we can run our django project.

# Terminal
# =========

$ python manage.py runserver

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
November 13, 2020 - 19:46:51
Django version 3.1.3, using settings 'dj_jazzmin_demo.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C

We have our Django project running. To access it through a web browser, visit the URL http://127.0.0.1:8000/admin/ on a web browser. It loads to a different login interface than default login UI provided by Django.

After entering credentials, we're navigated to a jazzy looking admin interface provided by django-jazzmin.

Let's surf through beautiful interfaces provided by django-jazzmin.

1. Add Post UI
   

2. List Display UI
   

3. Delete Post UI
   

4. Filtering through fields
   

For now, we've successfully integrated django-jazzmin theme to our django_project. In the next part of the blog, we will be customizing admin dashboard through API provided by django-jazzmin.

Thanks for reading.

Comments

[Saifeddine Mabrouk]

"user_avatar": "profile.get_photo_url", it s not working

class Profile(models.Model):
account = models.OneToOneField(User, on_delete=models.CASCADE)
phone=models.CharField(max_length=16)
photo = models.ImageField(upload_to='user_photos/', null=True, blank=True)

def __str__(self) -> str:
    return self.account.username

def get_photo_url(self):
    if self.photo:
        return self.photo.url
    return '/path/to/default/avatar.jpg'

[Omid]

thanks a lottttttttt

[Kaiza Ilomo]

Thanks a lot Arjun Adhikari for this note. It saved my final year project presentation.

[Victor]

Hi good day I've been trying to customise the django the way you did it but it's giving me error is not working

[Nikhil Thakur]

All the date time fields displays as input[type=text] , how to solve this .