1

In my django admin pages, I would like to override the navbar (top ribbon) to be the same as the one in my "base.html" template. For different reasons:

  • Users can navigate through the website even when they are in the admin views.
  • To keep same style across pages, even in admin pages.

I am using django 2.2.6.

I don't really know how to start and what would be the best approach.

Any advices of how you would do this ?

EDIT1:

I was thinking about creating a base_site.html file within "templates/admin/" folder and just copy paste my base.html.

The problem I am facing is styling. Please see below for more details:

# Content of admin/base_site.html:
{% extends "admin/base_site.html" %}
{% load static %}

{% block extrastyle %}
<!--<link href="{% static 'css/bootstrap.css' %}" rel="stylesheet"/>--> # Uncommenting this line will "fix" style on my navbar but break style of all admin pages ...

<script src="{% static 'js/jquery-1.12.3.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
{% endblock %}

{% block usertools %}
<div class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/">
    Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
        <li><a href="#">Some action</a></li>
        <li><a href="#">Some other action</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
            <a tabindex="-1" href="#">Group</a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">Second level</a></li>
            </ul>
        </li>
    </ul>
</div>
{% endblock %}

As you may have understood, the navbar in my base.html is using bootstrap which for reason I ignored, when trying to importing boostrap in my admin/base_site.html template is breaking style in general.

Am I missing an important style for admin pages to be working? I was thinking admin page were already using bootstrap.

In that case, how style can be broken just by importing it in base_site.html?

If not, any idea how can I combine bootstrap with the missing css style ?

WilliamW
  • 438
  • 7
  • 18

1 Answers1

2

All admin pages inherit from admin/base_site.html. In order override, you can override this template with your custom code.

Also this template should be loaded before admin app is loaded. Here are a couple of sample app templates that are overriding the base template.

django-admin-env-notice, django-admin-ribbon

Chillar Anand
  • 27,936
  • 9
  • 119
  • 136
  • Thank you for your answer and examples. Unfortunately, the problem I am facing is styling in django admin. (I have edited my post for more details). This is a weird one. Any luck you could help on this ? – WilliamW Feb 19 '20 at 11:19