Customize Django Admin Panel using Django Tailwind Admin Template

In this article, we will see how to set up a brand new project using Django and Django Tailwind Admin as the backend template and how to use Tailwind CSS for front-end styling. …

11 mins
Customize Django Admin Panel using Django Tailwind Admin Template

In this article, we will see how to set up a brand new project using Django and Django Tailwind Admin as the backend template and how to use Tailwind CSS for front-end styling. We will go through each step thoroughly and in detail, you can also go through Django's official documentation, it is well-written documentation in an easy to understand language.

Let us begin with our project of starting a full-stack web application with Python's Django framework. So, this is a series of posts and this is its first part, in this series we will build a full-stack blog application with database and SEO capabilities that can be deployed in production, we will deploy our project as well on a live web server. So, let us start with a brief introduction to Django.

What is Django and Why Django?

So according to the official definition, Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design. It is built by experienced developers, it takes care of much of the hassle of web development, so you can focus on writing your app without needing to reinvent the wheel (of course, it’s free and open-source).

Now, coming to why Django, again there are more than one reasons to choose Django, first of all, it is a high-level framework that makes work easy and the level of abstraction makes workflow shorter and concise. It takes care of many features like authentication and security, RSS feeds, sitemaps, etc. out of the box to make the development process easier for the developers. Other reasons to choose Django over other frameworks are:

  1. Very good scalability.
  2. Top-class security out of the box.
  3. Incredibly versatile.
  4. Full of features.
  5. Ease of using machine learning in the backend.

The pre-requisites for starting with a Django project are: 

  1. Basic knowledge of HTML and CSS.
  2. Knowledge of JavaScript.
  3. Good hands in Python.
  4. Tailwind CSS (optional).
  5. Basic knowledge of Git (optional but recommended).

Let us see now start our brand new project on Django, but before that, you should have the latest version of Python and a code editor installed on your device. I will use VSCode in this whole tutorial. See how to set up VSCode for Python programming.

We will see two ways of starting your first Django project here, one with the Django Tailwind Admin and the other with the default way. Let us first see how to get Django Tailwind Admin.

Method 1: Start Project With Django Tailwind Admin

To start with this create a new folder in any directory and inside it run your terminal and clone the Django Tailwind repository using the command given below:

git clone [email protected]:ajaycc17/django-tailwind-admin.git .

If the Git command line is not installed on your device or you need an introduction to Git then, check out this list of most used Git commands for developers.

Step 1: Setting up a Virtual environment

Now, we are ready with our project files, we just need to set up a few things, we will begin with the virtual environment. To create a virtual environment for the project, run the following commands in the terminal:

pip install virtualenv
virtualenv env

Now, you should see a directory named env created in the root of your directory, this is the virtual environment for your project. To activate the virtual environment run the following command (in Windows):

env/Scripts/activate

for Linux systems, use the command:

source env/bin/activate

Step 2: Installing required libraries using requirements.txt

At this point, we have our virtual environment ready and now we need to install the required modules and libraries in the environment for the proper functioning of the project, to do so we will use the requirements.txt file present in the root directory of the project as follows:

pip install -r requirements.txt

Step 3: Setting up django-tailwind for Tailwind CSS

Also, we need to make the tailwind CSS work, for which we need to install the tailwind CSS library via npm. If you do not have the NodeJS installed on your device kindly install it from here and follow the commands below to install and activate tailwind CSS in Django.

python manage.py tailwind install

It should download and install all required packages and set it up accordingly, now open another terminal in the same directory.

Step 4: Creating a Superuser

After activating the virtual environment run the following command to set up a super user for the backend:

python manage.py createsuperuser

fill in the required details to activate the super user.

Step 5: Start the development server

After the user is created, start using the Tailwind CSS using:

python manage.py tailwind start

and in the previous terminal, start the development server for Django using:

python manage.py runserver

The project should run now and the home screen should look as shown below in the image.

Django Tailwind Admin Homepage

Now, you can go to the admin interface by clicking on the "Go to Admin" button and sign in using the same credentials you entered while creating the super user above. The admin panel initially should look like this:

New admin panel

That is it, for the project set up using Django Tailwind Admin.

Method 2: Create your first Django project: The default way

This method does not include the customized Django Tailwind Admin, but the interesting part is you can add it later as well, so no worries if you want to set up a fresh project from scratch, choose this method. First of all, we will create a new directory or folder for our project let us say djangoCore and we will move inside it using the commands below:

mkdir djangoCore
cd djangoCore

Inside the directory, we will create a new virtual environment named env and activate it at the same time using the commands given below:

pip install virtualenv
virtualenv env
env/Scripts/activate

We will now, install Django in our environment and then we will create a project named core in the same directory using the commands below:

pip install django
django-admin startproject core

Now, we need to apply all the migrations i.e. changes into an SQLite database using the commands below:

python manage.py makemigrations
python manage.py migrate

Now, we are ready with our default Django project, start the development server using the command:

python manage.py runserver

Here, we are done with our first Django project in its default way. You can create a superuser using the commands given in step 4 of method 1. Let us see how we can integrate the Django Tailwind Admin template into an existing project.

Using Django Tailwind Admin in an Existing/New Project

The steps are the same for any existing project or the project created in the default way by the method 2 given above, if you have followed method 1, you should skip this part, you are ready with your project, but follow the steps given below carefully if you have not followed the method 1. Let us start with the steps, I am considering you are having a project and in the terminal, you are inside your virtual environment.

Step 1: Installing and activating required packages

Following the commands given below install the required packages i.e. django-tailwind and django-widget-tweaks. You can follow the documentation for django-tailwind and django-widget-tweaks as well for a better understanding of their working mechanism.

pip install django-tailwind django-widget-tweaks

Step 2: Setting up django-tailwind for Tailwind CSS

Add the downloaded packages to the installed apps in the settings.py file:

INSTALLED_APPS = [
  # other apps already present
  'tailwind',
  'widget_tweaks',
]

Now, we need to create a Tailwind CSS compatible Django app called theme by the following command:

python manage.py tailwind init

Again, we need to add the newly created app to the INSTALLED_APPS in the settings.py file and it should look like this in the end:

INSTALLED_APPS = [
  # other Django apps
  'tailwind',
  'widget_tweaks',
  'theme',
]

Now, register the generated 'theme' app. Also, make sure that the INTERNAL_IPS list is present in the settings.py file and contains the 127.0.0.1 IP address by adding the following line to settings.py file. With the above two, add the NPM_BIN_PATH as well, if you do not have the NodeJS installed on your device kindly install it from here.

# for tailwind css
TAILWIND_APP_NAME = 'theme'
INTERNAL_IPS = [
    "127.0.0.1",
]
NPM_BIN_PATH = r"C:\Program Files\nodejs\npm.cmd"

Now, instal the Tailwind CSS dependencies, by running the following command and start the tailwind development server using the subsequent commands:

python manage.py tailwind install

It should download and install all required packages and set them up accordingly.

Step 3: Adding Static and Template Files

To support the static files, create two directories named static and templates in the root directory of your project i.e. at the same position where your manage.py file exists. Now, inside the templates directory create your HTML templates for e.g. base.html and also create two directories named css and images inside the static folder/directory, inside the css directory, create a CSS file called stylesheet.css and paste the following content in the CSS stylesheet:

/* scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 3px;
}
::-webkit-scrollbar-thumb {
    background: var(--cust-gray-600);
    border-radius: 0;
    background: var(--cust-gray-600);
    border-radius: 16px;
    box-shadow: inset 2px 2px 2px hsl(0deg 0% 100% / 25%),
        inset -2px -2px 2px rgb(0 0 0 / 25%);
}
::-webkit-scrollbar-track {
    background: var(--cust-gray-800);
}
/* hide scrollbar in navbar menu - chrome, opera, safari */
#nav-sidebar::-webkit-scrollbar {
    display: none;
}
#nav-sidebar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
/* admin */
.modelsView .modelsList + .modelsList {
    border-top: 1px solid #334155;
    padding-top: 0.5rem;
}
.actionlist .activityLink {
    padding: 8px 0 8px 25px;
    position: relative;
    word-wrap: break-word;
    counter-increment: steps;
}
.actionlist .activityLink:before {
    display: inline-block;
    content: "\F4FA";
    color: #0ac000;
    font-family: "bootstrap-icons";
    font-style: normal;
    font-weight: 800;
    padding-right: 10px;
    font-display: block;
    position: absolute;
    left: 0;
    font-variant: normal;
    text-transform: none;
    line-height: 1.5;
    vertical-align: -0.125em !important;
    -webkit-font-smoothing: antialiased;
}
.actionlist .changelink:before {
    content: "\F3FF";
    color: var(--cust-yellow-400);
}
.actionlist .deletelink:before {
    content: "\F623";
    color: #ff0000;
}
.actionTable:nth-child(even),
.resultsRow:nth-child(even) {
    background-color: #334155;
}
.actionTable:nth-child(odd),
.resultsRow:nth-child(odd) {
    background-color: #475569;
}
.resultsRow td,
.resultsRow th,
.actionTable td,
.actionTable th,
.modelsList td,
.modelsList th {
    padding: 0.5rem;
    border: 1px solid #1e293b;
}
label.required {
    font-size: 14px;
    font-family: "Space Grotesk", sans-serif;
    color: #c084fc;
    line-height: 1.5;
    font-weight: 600;
}
.tox-tinymce {
    border: none;
    margin: 0.5rem 0 1.5rem;
}
#fieldContainer p {
    font-size: 12px;
    font-family: "Space Grotesk", sans-serif;
    color: #4ade80;
    line-height: 1.5;
    font-weight: 600;
    margin-top: 0.5rem;
}
#fieldContainer p a {
    color: #fff;
    padding: 2px 8px;
    text-align: center;
    background-color: #6366f1;
    border-radius: 8px;
}
.related-widget-wrapper {
    display: flex;
    align-items: center;
}
.related-widget-wrapper a {
    display: flex;
    align-items: center;
    margin: 0.5rem 0 1.5rem 0.5rem;
    padding: 12px 10px;
    background: #312e81;
    border-radius: 8px;
}
.datetimeshortcuts {
    display: block;
}
#id_timeStamp_0,
#id_timeStamp_1 {
    margin-bottom: 10px;
}
.datetimeshortcuts:last-child {
    margin-bottom: 1.5rem;
}
.datetimeshortcuts .date-icon:before {
    content: "\F1EF";
    color: #ffffff;
    font-family: "bootstrap-icons";
    font-weight: 800;
    font-display: block;
    vertical-align: -0.125em !important;
    -webkit-font-smoothing: antialiased;
}
.datetimeshortcuts .clock-icon:before {
    content: "\F102";
    color: #ffffff;
    font-family: "bootstrap-icons";
    font-weight: 800;
    font-display: block;
    vertical-align: -0.125em !important;
    -webkit-font-smoothing: antialiased;
}
/* end of admin */

Now, in the root directory, inside theme/static_src, edit the tailwind.config.js file as:

// leave the existing code as it is. . .
theme: {
        extend: {
            fontFamily: {
                'heads': ["'Space Grotesk'", "sans-serif"],
              }
        },
    },
// leave the existing code as it is. . .

Inside, the images directory, you can add the images you need. In the settings.py file add the reference to the templates directory as shown below:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'], # add it here
        . . .
    },
]

Now, add the following code just before STATIC_URL in the settings.py file.

import os
STATICFILES_DIRS = [
   os.path.join(BASE_DIR, 'static')
]

Next, we will create an app inside our project and a few custom template tags as well.

Step 4: Creating a Superuser

After activating the virtual environment run the following command to set up a super user for the backend:

python manage.py createsuperuser

fill in the required details to activate the super user.

Step 5: Create an app

Inside the project, we can create different apps for different purposes, here we will create an app called home (if your project already consists of some apps, you can skip this step). Run the following command in the terminal to create an app:

python manage.py startapp home

A new directory named home should appear in the root of the project directory, inside the home directory, create a new file called urls.py and paste the following content into it:

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]

In the same directory, open the views.py file and paste the following content into it:

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, "base.html")

Next, inside the project directory core, edit the urls.py and finally, it should look like the code given below:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
]

Again, open the settings.py file and add the code inside INSTALLED_APPS as follows:

# Application definition
INSTALLED_APPS = [
    // leave other apps as it is . . .
    'home.apps.HomeConfig', # add this line
    # for tailwind css 
    'widget_tweaks',
    'tailwind',
    'theme',
]

Step 6: Creating custom template tags

Inside the home directory, create another directory called templatetags, further, inside that add two files __init__.py and extraz.py, leave the __init__.py file empty and paste the following code inside the file extraz.py.

from django import template
import hashlib
register = template.Library()

@register.filter(name='get_val')
def get_val(dict, key):
    return dict.get(key)

@register.filter(name='md5')
def md5_string(value):
    return hashlib.md5(str(value).encode('utf-8')).hexdigest()

Now, we are almost done with our aim of adding Django Tailwind Admin to our project. We just need some templates now.

Step 7: Adding templates

Inside the templates directory, your app should have some templates such that it is visible on running the development server. Now, download the Django Tailwind Admin project from GitHub as a .zip file and from the project's templates directory copy the admin and registration directories to your project's templates directory. Your project should now look like this:

.
└── project_dir/
    ├── core
    ├── env
    ├── home/
    │   ├── templatetags/
    │   │   ├── __init__.py
    │   │   └── extraz.py
    │   └── other files
    ├── static/
    │   ├── css/
    │   │   └── stylesheet.css
    │   └── images
    ├── templates/
    │   ├── admin
    │   ├── registration
    │   └── base.html
    ├── theme
    ├── db.sqlite3
    └── manage.py

Django directories

Optionally, you can freeze your packages in the requirements.txt file using the command below:

pip freeze > requirements.txt

That is it! We are done with all the steps. Now just start the development server and go to http://127.0.0.1:8000/admin to view the new Django Tailwind Admin.

Step 8: Start the development server

After the user is created, start using the tailwind CSS using:

python manage.py tailwind start

open another window of the terminal, activate the virtual environment and start the development server for Django using:

python manage.py runserver

The project should run now and the admin screen should look as shown below in the image. It won't consist of the same things but the style should be similar.

Admin panel in Django

So, that is it with this tutorial, hope you liked the article if it helped you please vote for it with 👍 and drop a comment below to inspire me to produce more such content. Also, you can contribute to this project on GitHub, it is open for all.

Was this Article Helpful?
Ajay Choudhury

Ajay Choudhury

A learner and a student of technlogy. He loves sharing experiences and learning with others through his projects and blog. Along with technology, he loves playing football and enjoys listening to music and podcasts.

0 Comments

Info

OrbitGadget — A constructive and and resourceful hub for computer science geeks. Let us achieve together.

Privacy Policy Disclosure Site Terms Atom Feed Sitemap

Made with ❤️ and Django. OrbitGadget © 2020 - 2022.