Django — Step 9

Custom Styling The Admin Panel

This is a continuation from step 8

Django — Step 8

Admin Theme Customization

The default admin page Django provides is functionally great, but we want to be able to match a front-end theme of a project with the styling of the admin panel, using the same logos and colors.

To do this we need to create a new directory inside the templates folder named admin. Inside the new admin directory, we need to create a file that has to be named base_site.html for the customization to work.

Lets first rename the title of the admin portal from ‘Django Administration’ to our projects name, ‘djDemo’.

Inside the base_site.html we need to

• Extend the admin base HTML file
• Load in the static files so we can use our logo
• Create a extrastyle block to load custom css
• Create a branding content block that .

The branding block is where our customized HTML markup will go to customize the navigation bar of the admin panel:

{% extends 'admin/base.html' %}
{% load static %}
{% block branding %}
{% block extrastyle %}
  <link rel='stylesheet' href='{% static 'css/admin.css' %}'>
{% endblock %}
<h1 = 'head'>
<img src="{% static 'img/logo.png' %}" alt="  djDemo" class="brand_img" height="50" width="80">
djDemo Admin Area
  </h1>
{% endblock %}

Underneath the branding block is an extrastyle block. Inside the extrastyle block we added a stylesheet link to the admin.css file we will create next

Create an admin.css file in the css folder inside of a static directory.

Then if you are using the Chrome browser, you can left click and inspect the administration page using the Chrome development tools to get the CSS class names of each section you want to customize:

Let’s start with

• changing the height of the navigation bar
• changing the color of the text
• changing the colors of the navigation background
• changing the color of the links

In the newly created admin.css just use the class tags already assigned to each element and put in your custom changes.

The admin.css file will automatically override the default CSS:

#header{
  height: 50px;
  background: #aabbdd;
  color: #000;
}
#header a:link, #header a:visited {
    color: #2b6471;
}
#branding h1{
  color: #000;
}

Save everything and reload the admin panel to see the changes.

Above each section are light blue title bars for the Display_1 and Authentication/Administration sections

Same as before, right-click the bars and select Inspect.

We find that the multiple class names for the bars: .module h2, .module caption, .inline-group h2 and the text is a.section:link.

The options of each of these sections are under the class a:link and a:visited class tag:.

We can also update the style of the Site Administration title at the top of the page by using the h1 class tag.

We can add these styles to the admin.css file and customize its style:

h1{
  color: #000;
}
.module h2, .module caption, .inline-group h2{
  background: #aabbdd;
  color: #000;
  height: 40px;
}
a.section:link{
  color: #000;
}
a:link{
  color: #000;
}

Save admin.css and refresh your browser:

When you enter a section like Users or Items a bar with navigation links appears under the top header bar. let’s style that.

Click on Items, then right-click the bar and select Inspect. The class name for the bar is div.breadcrumbs. We can add that to admin.css and customize its style.

div.breadcrumbs {
  background: #aabbdd;
  color:#10284e;
}
div.breadcrumbs a {
  color: #333;
}

Save and refresh your browser:

Now click on Item 3 and let’s style the save buttons at the bottom of the page.

Inspect the save button and copy the two button classes:

.button, input[type=submit], input[type=button], .submit-row input, a.button {
  background: #10287e;
  color: #fff;
  border-radius: 14px;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover, input[type=button]:hover, .submit-row input:hover, a.button:hover{
  background: #30caa0;
  color: #333;
}
.button.default, input[type=submit].default, .submit-row input.default{
  background: #30caa0;
  color: #333;
}
.button.default:hover, input[type=submit].default:hover, .submit-row input.default:hover{
  background: #10287e;
  color: #fff;
}

Save and refresh your browser:

Editing The Displayed Information In The Admin Panel

We can also add some code to the admin.py files in each app to customize the information that is displayed in the admin panel.

Default admin page

The first step is to import the item model from models.py

from .models import item

Now with the item model imported, we can define a new class. I will call it ItemAdmin.

from django.contrib import admin
from .models import item
class ItemAdmin(admin.ModelAdmin):
    list_display = ('id', 'title', 'description_1', 'list_date', 'is_published')
    list_display_links = ('id', 'title')
    list_filter = ('title',)
    list_editable = ('is_published',)
    list_per_page = 25
    search_fields = ('title', 'description_1', 'description_2', 'description_3', 'list_date')
admin.site.register(item, ItemAdmin)

Within this new class, we define list_display, naming the fields taken from the item model we want to be displayed in the items list when viewing it in the admin panel. ‘id’, ‘title’, ‘description_1’, ‘list_date’, and ‘is_published’ are the fields I chose.

list_display = ('id', 'title', 'description_1', 'list_date', 'is_published')

Defining list_display_links decides which of the list_display items will become links to the specific listing they represent.

list_display_links = ('id', 'title')

list_filter creates a sidebar that allows you to filter the items based on a specific element of the items.

list_filter = ('title',)

list_editable allows you to make changes to the specific listing from the admin panel without clicking on the specific item. In this example, is_published is a boolean checkbox that can be selected or deselected.

list_editable = ('is_published',)

If our database has many many listings we want Django to paginate the results, the list_per_page element does this, just set the number of items per page you want to be displayed.

list_per_page = 25

We also added search_fields, This will create a search box in the admin panel. The items from the model under this setting is what will be searched.

search_fields = ('title', 'description_1', 'description_2', 'description_3', 'list_date')

Finish by adding the ItemAdmin class to the admin.site.register function:

admin.site.register(item, ItemAdmin)

Save and refresh your browser:

Custom information displayed

You can find more information on the methods() used for customization here:

The Django admin site | Django documentation | Django

In the next step, we will focus on displaying the items in our database and admin panel in the frontend of our application.

Django — Step 10