覆盖django中的admin css

Question

我想改变admin django中的某些css,比如base.css.在django库中直接更改会更好吗？如何以最佳方式覆盖它？

Answer 1

这取决于你想做的很多事情.虽然首先:不要直接在Django管理员中覆盖它.你认为有两种选择是合理的:

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

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

Answer 2

我只是扩展了admin/base.html以包含对我自己的css文件的引用 - 最后.css的美妙之处在于您不必触及现有定义,只需重新定义即可.

Answer 3

这个解决方案适用于管理站点,我认为这是最干净的方式,因为它覆盖了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 %}

而已!你完成了

Answer 4

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

Answer 5

在静态目录中,创建一个static/admin/css/base.css文件.

首先粘贴Django的默认Admin CSS,然后根据需要进行调整.

Answer 6

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

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

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

select[multiple] {
    resize: vertical;
}

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

class MyModelAdmin(admin.ModelAdmin, CSSAdminMixin):

然后您会准备就绪。

Answer 7

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