3

I am currently trying to do some customization to the skin of the django admin panel, to make it more in line with our brand. Currently we use django-jet to spruce up the admin panel. Are custom css/html possible with django-jet? All of the comments say that I should change some html files, but I think those files are hidden from my project because django-jet takes care of them? If anyone could point me in the right direction it would be appreciated.

Thank you

purplefloyd
  • 155
  • 1
  • 12

3 Answers3

6

This topic already discussed in django-jet github page

I will simply try to rephrase provided solution with my own words

  1. Create your_app/templates/admin/ folder if doesn't exist
  2. Under this folder create base_site.html file
  3. Copy one of the following code to this file and customize based on your needs

Simple code

{# 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 %}

More complex

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

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

{% block branding %}
    <h1 id="site-name">
        <span class="icon-jet"></span> {% trans "JET DEMO" %}
    </h1>
{% endblock %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "core/css/branding.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "core/css/icons/style.css" %}" />
{% endblock %}

{% block nav-global %}
    <a href="https://github.com/geex-arts/django-jet" class="sidebar-link icon">
        <span class="sidebar-link-label">
            <span class="sidebar-link-icon jet-demo-icon-github"></span>
            {% trans 'Visit GitHub page' %}
        </span>
    </a>
    <a href="https://github.com/geex-arts/django-jet-demo" class="sidebar-link icon">
        <span class="sidebar-link-label">
            <span class="sidebar-link-icon jet-demo-icon-github"></span>
            {% trans 'Demo site source code' %}
        </span>
    </a>
{% endblock %}

{% block userlinks %}
    <a href="{% url 'admin:logout' %}">{% trans 'Log out' %}</a>
{% endblock %}

{% block footer %}
    {{ block.super }}
    <!-- Yandex.Metrika counter --><script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32240214 = new Ya.Metrika({ id:32240214, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");</script><noscript><div><img src="https://mc.yandex.ru/watch/32240214" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter -->
    <!-- Google Analytics counter -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-67280038-1', 'auto');
      ga('send', 'pageview');
    </script>
    <!-- /Google Analytics counter -->
{% endblock %}
Community
  • 1
  • 1
Rovshan Musayev
  • 144
  • 3
  • 15
  • Thanks, were you able to override the "contents" block from the base template? I have been trying to have custom pages with same theme but content does not support bootstrap like grid system. Each new div goes to a new row and I am unable to have two divs side by side – lmc Apr 04 '18 at 14:53
4
#in admin.py file
from django.utils.html import format_html

logo_url= "https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.png?v=9c558ec15d8a"
admin.site.site_header = format_html("`<img src={url} height=50 width=50`>", url=logo_url)
Rohit Kumar
  • 81
  • 8
0

Create a admin directory at templates Folder then Create Html File and name it base_site.html . Add Following Content to it . 

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

{% block branding %}
<h1 id="site-name">
    <a href="{% url 'admin:index' %}">
        <img src="{% static 'img/my-logo.png' %}" alt="My Company"/>
    </a>
</h1>
{% endblock %}

That's All you are done with custom logo.

Hassan ALi
  • 1,313
  • 1
  • 23
  • 51