Überschreiben von Admin-CSS in Django

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?

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',)
        }

• 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 %}

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.

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

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.

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.

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