Überschreiben von Admin-CSS in Django

83

Ich möchte bestimmte CSS in Admin Django wie base.css ändern. Ist es besser, direkt in der Django-Bibliothek zu wechseln? Wie kann ich es am besten überschreiben?

Rajan Sthapit
quelle
Vielleicht erspart Ihnen Grappelli die Mühe ... grappelliproject.com Alt und veraltet ... lincolnloop.com/blog/…
John Mee

Antworten:

110

Es hängt viel davon ab, was Sie tun möchten. Zuallererst: Überschreiben Sie es nicht direkt im Django-Administrator. Sie haben zwei Möglichkeiten, die ich für vernünftig halte:

  1. Wenn Sie das Erscheinungsbild des Administrators im Allgemeinen ändern möchten, sollten Sie die Administratorvorlagen überschreiben. Dies wird hier ausführlich behandelt: Überschreiben von Administratorvorlagen . Manchmal können Sie einfach die ursprüngliche Admin-Datei erweitern und dann einen Block wie {% block extrastyle %}{% endblock %}in django/contrib/admin/templates/admin/base.htmlals Beispiel überschreiben .
  2. Wenn Ihr Stil modellspezifisch ist, können Sie zusätzliche Stile über die MediaMeta-Klasse in Ihrem hinzufügen admin.py. Sehen Sie hier ein Beispiel:
class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/my_own_admin.js',)    
        css = {
             'all': ('css/admin/my_own_admin.css',)
        }
Torsten Engelbrecht
quelle
Eigentlich ist es nicht die Modellebene, sondern die gesamte Site selbst. Um spezifische Änderungen in base.css, ie.css usw. vorzunehmen, besteht eine Option darin, die Datei admin / base.html in meine Anwendung selbst aufzunehmen und meine benutzerdefinierte Datei base.css in der Datei admin / base.html zu verwenden. Auf diese Weise muss ich einige Vorlagendateien vom Django-Administrator in meine eigene Site aufnehmen. Gibt es eine bessere Lösung als diese?
Rajan Sthapit
Keine, die mir bekannt sind. Der Django-Administrator ist am Ende nichts anderes als eine wiederverwendbare Django-App. Dies ist auch bei jeder anderen wiederverwendbaren App der Fall.
Torsten Engelbrecht
Ich stelle fest, dass hier in der js eine CSS-Datei aufgeführt ist ... funktioniert das tatsächlich? Ich kann es nicht bekommen.
Fastmultiplication
Ja, du hast recht. Ich habe einen Fehler gemacht und meine Antwort mit einem Beispiel aus den Django-Dokumenten bearbeitet.
Torsten Engelbrecht
Mit den Worten von Eli Porter: "Du hast die beste Katze gegrillt".
Rob Kwasowski
33
  • In settings.py, stellen Sie sicher , dass Ihre App vor admin in der aufgeführt ist INSTALLED_APPS.
  • Erstellen Sie (your-app)/templates/admin/base_site.htmlund setzen Sie den <style>Block in die{% block extrahead %}

Beispiel:

{% extends "admin/base_site.html" %}
{% block extrahead %}
    <style>
        .field-__str__ {
            font-family: Consolas, monospace;
        }
    </style>
{% endblock %}
tivnet
quelle
6
Beste Antwort. Wenn Sie möchten, können Sie auch vermeiden, Ihre App vor dem Administrator in INSTALLED_APPS aufzulisten, indem Sie ein "Vorlagen" -Verzeichnis in das Basisprojekt einfügen und in settings.py darauf verweisen: TEMPLATES = [... andere Dinge ..., 'DIRS': [ os.path.join (BASE_DIR, 'templates')],]
RedPelle
Großartige Idee! Funktioniert reibungslos wie ein Zauber!
ozw1z5rd
29

Ich habe gerade admin / base.html erweitert, um einen Verweis auf meine eigene CSS-Datei aufzunehmen - am Ende. Das Schöne an CSS ist, dass Sie vorhandene Definitionen nicht berühren müssen, sondern nur neu definieren müssen.

Danny W. Adair
quelle
27

Diese Lösung funktioniert für die Admin-Site. Ich denke, es ist der sauberste Weg, da sie überschreibt, base_site.htmlwas sich beim Upgrade von Django nicht ändert.

Erstellen Sie in Ihrem Vorlagenverzeichnis einen Ordner mit dem Namen " adminErstellen" und erstellen Sie eine Datei mit dem Namen base_site.html.

Erstellen Sie in Ihrem statischen Verzeichnis unter csseiner Datei namens admin-extra.css.

Schreiben Sie darin alle benutzerdefinierten CSS, die Sie für Ihre Formulare benötigen, wie : body{background: #000;}.

Fügen Sie dies ein in base_site.html:

{% extends "admin/base.html" %}
{% load static from staticfiles %} # This might be just {% load static %} in your ENV

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

{% block extrastyle %}{{ block.super }}<link rel="stylesheet" type="text/css" href="{% static "css/admin-extra.css" %}" />{% endblock %}

{% block branding %}
<h1 id="site-name"><a href="{% url 'admin:index' %}">{{ site_header|default:_('Django administration') }}</a></h1>
{% endblock %}

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

Wie in den Kommentaren erwähnt: Stellen Sie sicher, dass sich Ihre App vor der Admin-App in INSTALLED_APPS befindet, da Ihre Vorlage sonst Djangos nicht überschreibt

Das ist es! du bist fertig

Elad Silber
quelle
4
Danke, funktioniert super! Wenn es nicht funktioniert, stellen Sie sicher, dass sich Ihre App vor der Administrator-App INSTALLED_APPSbefindet. Andernfalls überschreibt Ihre Vorlage Djangos nicht.
Dirbaio
1
Beste Antwort und Kommentar. Es ist überraschend schwierig, die Farbe auf der Administrationsseite zu ändern. Das Durchgehen dieser Antwort und dieses Kommentars hat die Funktionsweise bestätigt.
Daniel Butler
1
Woher weißt du, dass sich base_site.htmldas beim Upgrade von Django nie ändern wird? (Ich meine ja diese Antwort ist 3 Jahre alt und immer noch funktioniert , aber das ist kein garantuee)
Marv
@marv Wenn Sie im Quellcode unter die Haube schauen, können Sie sehr leicht erkennen, dass die Admin-Architektur auf diesen spezifischen Namen basiert, insbesondere in den URLs und beim Rendern von Vorlagen. Klassen, die Klassen erben, die Klassen erben, setzen voraus, dass diese Namen gleich bleiben, es sei denn, das Django-Framework wird grundlegend überarbeitet (und selbst dann würde ich nicht darauf wetten, dass sich dies ändert) Das Überschreiben der Basisvorlage bleibt laut Django-Roadmap mindestens für die nächsten 3 Jahre gleich.
Elad Silver
1
Das ist also nur allgemeines Wissen über Django und es gibt keine konkrete Quelle, die dies bestätigt? Es ist nicht so, dass ich an dir zweifle, ich frage mich nur, wie man herausfinden soll, dass dies der Fall ist.
Marv
17

Erstellen Sie in Ihrem statischen Verzeichnis eine static/admin/css/base.cssDatei.

Fügen Sie zuerst Djangos Standard-Admin-CSS ein und fügen Sie dann unten Ihre Anpassungen hinzu.

Ryan Allen
quelle
8
Wenn Sie dies tun, stellen Sie sicher, dass Sie Ihre App VOR django.contrib.adminder Liste von INSTALLED_APPS. Wenn Sie dies nicht tun, findet collectstatic zuerst die admin base.css und Ihre angepasste Version überschreibt sie nicht.
Dave
3
Dies ist keine gute langfristige Lösung. Es kopiert / fügt eine Menge Code ein und wird bei Django-Upgrades nicht beibehalten.
mlissner
Jedes Styling für den Django-Administrator ist im Grunde eine Abzweigung des Codes. Ein Update auf Django könnte Ihre Anpassungen beschädigen. Meine Empfehlung ist, Anpassungen auf ein Minimum zu beschränken und sie am Ende von Djangos Standardstil hinzuzufügen. Anschließend können Sie das Standard-Styling manuell aktualisieren, wenn und wann Sie möchten.
Ryan Allen
@ danny-w-adair's Antwort oben ist besser; hält die Dinge "trocken", aber es ist immer noch eine Abzweigung von Djangos Code, die zu geringfügigen Upgrade-Schmerzen führen kann.
Ryan Allen
10

Wenn Sie einen globalen Bereich möchten und nicht über das Überschreiben von Vorlagen nachdenken möchten, eignet sich ein Mixin sehr gut dafür. Geben Sie diesen Code ein, wo immer Sie möchten:

class CSSAdminMixin(object):
    class Media:
        css = {
            'all': ('css/admin.css',),
        }

Erstellen Sie dann eine CSS-Datei, die admin.cssmit Ihren Überschreibungen aufgerufen wird , zum Beispiel:

select[multiple] {
    resize: vertical;
}

Dann tun Sie in jedem Modell Folgendes:

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

Und du bist fertig.

mlissner
quelle
Ich mag Ihre Antwort, aber warum nicht direkt zu MyModelAdmin
Goran
1
Sie könnten das tun, wenn es ein Modell ist, aber es wird chaotisch, wenn Sie es mit vielen Modellen tun.
mlissner
4

Haben Sie admin/css/changelists.cssin einem Ordner in STATICFILES_DIRS, und es wird Benutzer, dass changelists.css anstelle der Standard-Administrator.

Timothy Makobu
quelle