在Django中覆盖Admin CSS

我想更改admin django中的某些CSS，例如base.css。最好直接在Django库中进行更改吗？如何以最佳方式覆盖它？

这取决于您要做什么。虽然首先：不要直接在Django管理员中覆盖它。我认为您有两种选择是合理的：

1. 通常，如果您想更改管理员的外观，则应覆盖管理模板。此处详细介绍：覆盖管理模板。有时候，你可以扩展原始管理文件，然后覆盖块就像{% block extrastyle %}{% endblock %}在django/contrib/admin/templates/admin/base.html作为一个例子。
2. 如果您的样式是特定于模型的，则可以通过中的Mediameta类添加其他样式admin.py。在这里查看示例：

class MyModelAdmin(admin.ModelAdmin):
    class Media:
        js = ('js/admin/my_own_admin.js',)    
        css = {
             'all': ('css/admin/my_own_admin.css',)
        }

• 在中settings.py，请确保您的应用已在管理员之前列出INSTALLED_APPS。
• 创建(your-app)/templates/admin/base_site.html并将该<style>块放入{% block extrahead %}

例：

{% extends "admin/base_site.html" %}
{% block extrahead %}
    <style>
        .field-__str__ {
            font-family: Consolas, monospace;
        }
    </style>
{% endblock %}

我只是扩展了admin / base.html，以在其末尾包含对我自己的CSS文件的引用。CSS的优点在于您不必修改现有的定义，只需重新定义即可。

该解决方案将适用于管理站点，我认为这是最干净的方法，因为它会覆盖base_site.html升级django时不会更改的方法。

在模板目录admin中创建一个名为的文件夹，在其中创建一个名为的文件base_site.html。

在css名为的文件下的静态目录中创建admin-extra.css。

在其中写下您想要的所有自定义CSS，例如：body{background: #000;}。

将此粘贴到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 %}

如评论中所述：确保您的应用位于INSTALLED_APPS中的管理应用之​​前，否则您的模板不会覆盖django的

而已！你完成了

在您的静态目录中，创建一个static/admin/css/base.css文件。

首先粘贴Django的默认Admin CSS，然后在底部添加您的自定义设置。

如果您想要一个全局范围，并且不想考虑覆盖模板，那么mixin确实可以很好地工作。将此代码放在您想要的任何地方：

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

然后，admin.css使用覆盖来制作一个名为的CSS文件，例如：

select[multiple] {
    resize: vertical;
}

然后，在所需的任何模型中，执行以下操作：

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

然后您会准备就绪。

在中有admin/css/changelists.css一个文件夹STATICFILES_DIRS，它将使用户使用changelists.css而不是默认的admin。