Customize Django admin template

Question

i tried customizing navbar like this

Base_site.html

 {% block nav-global %}
 <img class = "brand_img" src = "{% static 'images/ic_launcher.png'%}" 
    width = "50" height = "50" alt = "logo">
 {%block branding%}    

  {% endblock %}
  <div class = "head">
    <h1 id = "name">Admin Dashboard</h1>
  </div>    
{% endblock %}

which looks like this

now i try to add header for login page inside {%block branding%}

but if i add inside branding block it is displayed in navbar also and if i try to add both image and header in branding block image is displayed login page header.

how to add different titles for navbar and login page header?

Answer 1

This can be achieved pretty easily.

Inside your templates folder, you should have created an admin subfolder. Inside there, you should place the files base_site.html and login.html.

Contents of base_site.html:

{% extends 'admin/base_site.html' %}

{% load static %}

{% block branding %}
    <div class="head">
        <h1 id="name">Admin Dashboard</h1>
    </div>
{% endblock %}

{% block nav-global %}
    <img class="brand_img" src="{% static 'images/ic_launcher.png'%}" width="50" height="50" alt="logo">
{% endblock %}

Contents of login.html:

{% extends 'admin/login.html' %}

{% block branding %}
    <div class="head">
        <h1 id="name">Custom header text for LOGIN screen only</h1>
    </div>
{% endblock %}

Below is the correct project structure:

project/
    myapp/
    myapp2/
    project/
    templates/
        admin/
            base_site.html
            login.html
    manage.py

Please note the extends inside each html template you want to override. It's vital. For more info take a look at the docs.

Answer 2

I found that you need to adjust DIRS in TEMPLATES in settings.py like this:

TEMPLATES = [
    {
        'BACKEND': .....,
        'DIRS': [os.path.join(BASE_DIR, 'templates')], # <-- add this line here
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                .....
            ],
        },
    },
]

This is needed to tell your application where to look for these files. This, in addition to @nik_m's solution above, did the trick for me ....