Skip to content

Customizing Admin Theme

In this video, we are going to customize the admin panel of our django project. We will set some different colors and templates and make our django admin panel look different.

Code Setup

  • But at first, lets setup the project code for this section.

  • So, you need to download the project code files the resources section: DOWNLOAD ZIP FILE

  • Now, extract the folder on the desktop.

  • Then, copy the mysite folder which is the project root directory.

  • Replace the mysite folder of your project with the copied mysite folder. So, if you made any mistake while writing the code in the previous section, then, it won't affect your learning in this section.

  • Open your project in the VS code and in the terminal, activate the virtual environment, and move to the mysite.

  • Run the migrations and create a superuser.

  • Create 5 Fake vaccine, center, storage, campaigns.

Templates

So, in this video, what we will do, we will try to modify the color of different components of our django admin panel. So, at first, open your django admin panel homepage.

Now, in this page, we will change the color of text and background colors of navbar. For that, we have to create a base.html file and override the style html tag.

So, create a folder named "admin" in the templates and create a base.html file in that admin directory.

# At first extend the base.html file
{% extends 'admin/base.html' %}

# Now, in the actual admin/base.html file there is a block name extrastyle. We have to use that block in order to add our own style.
{% block extrastyle %}{{ block.super }}
<style>
:root {
  --primary: #424B4D;
  --secondary: #1D3354;
  --link-fg: #00708F;
  --link-selected-fg: #00123D;
}
</style>
{% endblock %}

So, open your django admin panel and see the changes.

At last, lets try to change the site header of django admin panel from "Django Administration" to "Book My Vaccine".

For that, you have to open urls.py of mysite. 

admin.site.site_header = "Book My Vaccine"
admin.site.site_title = "Book My Vaccine"
admin.site.index_title = "Admin Panel"

[Run the development server and see the changes.]

In this way, we have changes the theme of our django admin panel and modified the site header and title name.