1

I have generated a django-admin for my app and I can access the dashboard. But it contains a logo that says "django admin". I want to change it to my own custom logo. How can I do that?

I have tried adding a base.html file to admin directory and tried to override but for some reason it's not working. It's code is as follows:

{% extends "admin/base.html" %}
{% load theming_tags %}
{% load staticfiles %}
{% block blockbots %}
    {{ block.super }}
    {# Using blockbots ensures theming css comes after any form media and other css #}
    {% render_theming_css %}
    <style type="text/css">
    #header #branding h1 {
        background-image: url("bootstrap_admin/img/logo-140x60.png");
    }
    </style>
{% endblock %}

{% block branding %}
<a href="{% url 'admin:index' %}" class="django-admin-logo">
    <!-- Django Administration -->
    <img src="{% static "bootstrap_admin/img/logo-140x60.png" %}" alt="{{ site_header|default:_('Django Admin') }}">
</a>
{% endblock branding %}

screenshot

I want to change the logo in the top-left corner. How can I achieve what I'm trying to?

Farhat Nawaz
  • 202
  • 5
  • 20

2 Answers2

2

your question is answered here

"{% static "bootstrap_admin/img/logo-140x60.png" %}" this comes from here

django-admin-bootstrap/bootstrap_admin/static/bootstrap_admi‌​n/img/logo-140x60.pn‌​g

after replacing you need to run command python manage.py collectstaticthen this will work

Kalariya_M
  • 1,357
  • 12
  • 20
  • I have already visited that post. It works fine for title but I'm not sure how to change it to work for logo. Any suggestion? – Farhat Nawaz Sep 13 '17 at 13:37
  • if so, then you can always use the third-party packages for django-admin. they also provide many cool features to use – Kalariya_M Sep 13 '17 at 13:41
  • I have searched a lot but found nothing. Could you point me to something? – Farhat Nawaz Sep 14 '17 at 06:37
  • did you use django-admin-tool ? – Kalariya_M Sep 14 '17 at 06:52
  • if this answer helped you then you can always accept the answer or upvote. – Kalariya_M Sep 14 '17 at 18:05
  • I know that but I'm still stuck where I was. I have read docs for django-admin-tool but couldn't figure out how to change the logo. Can you direct me a little more? As you can see in the code I shared in the question, I had already used those `theming-tags` that you called `django-admin-tool-theming` but it doesn't work. – Farhat Nawaz Sep 15 '17 at 05:54
  • so basically you want to change header 'Django Administration' right ? can you upload the picture of which specific part you want to change? – Kalariya_M Sep 15 '17 at 06:45
  • Just copy /django/contrib/admin/templates/admin/base_site.html from django source [link](https://github.com/django/django/blob/master/django/contrib/admin/templates/admin/base_site.html) and paste it under your templates directory. _yourproject/templates/admin/basesite.html_ Now you can change whatever you like in this template. Hope this helps. – Kalariya_M Sep 15 '17 at 06:48
  • I have edited the question with the screenshot. I want to change the logo in the top-left corner, namely `django-admin` – Farhat Nawaz Sep 15 '17 at 07:32
  • this is not default Django admin can you tell which third party app are you using? – Kalariya_M Sep 15 '17 at 08:45
  • I’m using django-admin-bootstrap. It can be found at https://github.com/django-admin-bootstrap/django-admin-bootstrap – Farhat Nawaz Sep 15 '17 at 08:49
  • you need to change base_site.html this file. you can found wherever you installed it `django-admin-bootstrapped/django_admin_bootstrapped/templates/admin/base_site.htm`l you can create admin/admin_title.html then it will automatically replaced by admi_title.html – Kalariya_M Sep 15 '17 at 09:03
  • Alright. Lemme try it and then I’ll get back to you. And just so you know, I have even tried to replace the .png file of the logo in the installed directory of the django-admin-bootstrap package (the directory where this package is actually installed), but that didn’t work either. And this is extremely confusing because I have no idea where else is it loading that png file from. – Farhat Nawaz Sep 15 '17 at 09:12
  • Are you talking about this "{% static "bootstrap_admin/img/logo-140x60.png" %}" this comes from here django-admin-bootstrap/bootstrap_admin/static/bootstrap_admin/img/logo-140x60.png after replacing you need to run command collectstatic then this will work. – Kalariya_M Sep 15 '17 at 09:18
  • It worked man. I wasn't running `collectstatic` after replacing the logo file. Thanks. Marking your answer as `ACCEPTED`. – Farhat Nawaz Sep 15 '17 at 09:41
  • glad could help you :) – Kalariya_M Sep 15 '17 at 09:45
1

The official way to achieve that is:
You need to override the default templates provided by Django. In your Django settings, your code:: TEMPLATES setting looks like this.

TEMPLATES = [
{
    'BACKEND': 'django.template.backends.django.DjangoTemplates',
    'DIRS': [],
    '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',
        ],
    },
},
]

This means that Django will look for templates in a directory called templates inside each app, but you can override that by setting a value for TEMPLATES.DIRS.

We change the 'DIRS': [], to 'DIRS': [os.path.join(BASE_DIR, 'templates/')], and create the templates folder. If your STATICFILES_DIRS is empty set it to:

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

Now create a file called base_site.html from the admin app to templates\admin folder you just created. Add the code in it:

{% extends "admin/base.html" %}

{% load staticfiles %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% 
endblock %}

{% block branding %}
<h1 id="site-name">
<a href="{% url 'admin:index' %}">
    <img src="{% static 'Your image.png' %}" height="40px" />
</a>
 </h1>
 {% endblock %}

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