Replacing my logo (image) with 'Django Administration'

[ghost]

Hi,

What is the best practice for replacing my company's logo file with the 'Django Administration' title?

Thx!

[SalahAdDin]

In the upper right corner?

[rcotrina94]

There are site_header and site_title attributes of Site so I set an ADMIN_SITE_HEADER in settings, and this in the urls.py file:

if hasattr(settings, 'ADMIN_SITE_HEADER'):
    admin.site.site_header = settings.ADMIN_SITE_HEADER
    admin.site.site_title = settings.ADMIN_SITE_HEADER

This will change both, the visible title in the right top corner and the one in <title> of the site's HTML.

[Ismael-VC]

@rcotrina94 could you please give me an example of what to put in ADMIN_SITE_HEADER?

I have ADMIN_SITE_HEADER = '<img src="logo_bg.png" alt="BE Group logo">' but I can't see the logo, just the normal title.

Edit: site_header and site_title are both of type django.utils.functional.lazy.<locals>.__proxy__. I'm not sure how to put there the logo.

[SalahAdDin]

@rcotrina94, your solution doesn't work for logo, i think.

[Ismael-VC]

@cownaf the correct way is documented here:

• https://github.com/geex-arts/django-jet-demo/blob/1a71b6f6ff327f39a0873902988979eb7163cc3f/templates/admin/base_site.html#L6-L10

You can create a your_app/templates/admin/base_site.html template, something like:

{# Template: your_app/templates/admin/base_site.html #}
{% extends "admin/base_site.html" %}
{% load static i18n %}

{# Setup favicon #}
{% block extrahead %}<link rel="shortcut icon" type="image/png" href="{{MEDIA_URL}}your_logo.png"/>{% endblock %}

{# Setup browser tab label #}
{% block title %}{{ title }} |  {% trans "Your title" %}{% endblock %}

{# Setup branding #}
{% block branding %}
    <h1 id="site-name">
        <a href="{% url 'admin:index' %}">
            {# Your logo here #}
            <img style="background-color: white" src="{{MEDIA_URL}}your_logo.png" alt="Your Company Name" height="50%" width="50%">
            <br><br>
            </span> {% trans "Your Branding" %}
        </a>
    </h1>
{% endblock %}

It is in the branding block where you can add your logo with an <img ...> tag:

Should I make a PR to add this instructions to the documentation?

[SalahAdDin]

@Ismael-VC, yes please! With images also.

[Ismael-VC]

I've found a problem recently, same code as above, but now the logo is out of place, I'm using the latest dev branch:

[SalahAdDin]

I think in the dev branch developers didn't take in account all possible uses for these block of code, in concecuence they create global styles for this menu icon only, and not for all block.

Can you try to review this? I want review also my issue.

[Ismael-VC]

@SalahAdDin yes I feel the same similarly with the footer that said Powered by Django-JET. Since this block was not inside an extra block tag, in order to change it, one would have to change the template itself, instead of inheriting from it.

Now this footer has been deleted in dev, but it would be nice to bring it back and make it editable, so the users can decide what to do with this extra branding blocks be it edit it, remove it or leave as is.

The weird thing is that the logo and the code I used was still working correctly, even after the update of the pin for the side menu was introduced, but after the last pip install -r git+git://github.com/geex-arts/django-jet@dev --upgrade the image gets moved downwards and I can't figure out why.

[SalahAdDin]

@Ismael-VC Did you review the code inspecting it in the browser?

[Ismael-VC]

Yes I did, I have reverted back to django-jet master for now, I want to test more things, but when I tested dev, and got this error, If I inspected it, it would tell me that the logo place is right between the two icons, even when you use the mouse selector, but the logo is moved downward non the less, I'll take a screenshot later today.

[SalahAdDin]

@Ismael-VC I tested the new release version, effectively, the problem exist yet:

[SalahAdDin]

I partially solved with this:

Implemented here.

[Ismael-VC]

Please come to the django-jet Discord server so we can organize if you like:

• https://discord.gg/3yr5yeH

Welcome! 😄

[mnislam01]

@SalahAdDin If I want to customize This template by inheriting in my app how can I do it?

I guess this template shows models of an app in a list, the page we see after clicking on an app from the menu. I want to group some models for my application. May be different list for different group like that.

[sagata1999]

@SalchiPapa well, I tried, but after that default Dashboard died, it just dissappeared.