Customize the Django admin screen. The default Django admin screen doesn't look very cool, but you can customize the design to your liking. As a first step to that, ** which file should I mess with? ** Organize.

Install Django and create a project

I'm sure few people reading this article have Django installed, If you are, please refer to this article.

Check the location of the admin application template

It depends on how you create the environment, but please find the installation location in the library from the Python execution environment. There should be a directory called django.contrib.admin.templates. The template of the admin application is stored in this. ** * Do not directly modify this file. ** </ font>

Copy the templates directory

Copy the django.contrib.admin.templates directory from your project under your own project.

$ cp django/contrib/admin/templates -r path/to/project/

Check the templates settings

Django looks for the template file to use for rendering in the application's directory listed in INSTALLED_APPS. However, you can also specify a directory to search in preference to the directory of each application. Nothing is set by default, so it is recommended to set as follows.

`settings.py`



TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # <--You can specify the directory to search preferentially here!!
        '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',
            ],
            'builtins': [
                'bootstrap4.templatetags.bootstrap4',
            ]
        },
    },
]

Let's play with the template as a trial

There is a template file called templates / admin / login.html. Let's play around with it a little and customize it.

`templates/admin/login.html`


{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "admin/css/login.css" %}">
{{ form.media }}
{% endblock %}

{% block bodyclass %}{{ block.super }} login{% endblock %}

{% block usertools %}{% endblock %}

{% block nav-global %}{% endblock %}

{% block content_title %}{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
{% if form.errors and not form.non_field_errors %}
<p class="errornote">
{% if form.errors.items|length == 1 %}{% trans "Please correct the error below." %}{% else %}{% trans "Please correct the errors below." %}{% endif %}
</p>
{% endif %}

{% if form.non_field_errors %}
{% for error in form.non_field_errors %}
<p class="errornote">
    {{ error }}
</p>
{% endfor %}
{% endif %}

<div id="content-main">

{% if user.is_authenticated %}
<p class="errornote">
{% blocktrans trimmed %}
    You are authenticated as {{ username }}, but are not authorized to
    access this page. Would you like to login to a different account?
{% endblocktrans %}
</p>
{% endif %}

<form action="{{ app_path }}" method="post" id="login-form">{% csrf_token %}
  <h1>TEST</h1> <<<--* Try to thrust it into this area.
  <div class="form-row">
    {{ form.username.errors }}
    {{ form.username.label_tag }} {{ form.username }}
  </div>
  <div class="form-row">
    {{ form.password.errors }}
    {{ form.password.label_tag }} {{ form.password }}
    <input type="hidden" name="next" value="{{ next }}">
  </div>
  {% url 'admin_password_reset' as password_reset_url %}
  {% if password_reset_url %}
  <div class="password-reset-link">
    <a href="{{ password_reset_url }}">{% trans 'Forgotten your password or username?' %}</a>
  </div>
  {% endif %}
  <div class="submit-row">
    <label>&nbsp;</label><input type="submit" value="{% trans 'Log in' %}">
  </div>
</form>

</div>
{% endblock %}

Run and check

Let's start the development server and access http: // localhost: 8000 / admin /.

$ python manage.py runserver

If it is displayed as below, it is successful.

Django admin screen customization first step