Django 管理页面的颜色设置

Question

Django管理页面默认使用不同的蓝色色调。我应该在哪里找到控制这些颜色的设置？我想将它们全部改为绿色而不是蓝色。

有什么建议吗？

- JohnnyCash

Answer 1

您可以覆盖管理模板。您可能希望使用admin/base_site.html模板，并提供一个名为extrastyle的块，其中包含您要注入到模板中的任何CSS。您需要知道要覆盖哪些样式（有相当多），当我这样做时，我只是找到我想要更改的元素，并添加样式，直到一切看起来正确。

因此，假设您在某个地方有一个模板目录（在TEMPLATE_DIRS中设置），请创建一个名为admin/base_site.html的文件，这可能是django/contrib/admin/templates/admin/base_site.html的副本。

例如，我的base_site.html模板中有如下部分：

{% block extrastyle %}
<link href="{{ STATIC_URL }}css/adminextra.css" rel="stylesheet" type="text/css" media="screen,projection" />
{% endblock %}

在你的 yourcssfile.css 文件中，你只需要：

a:link, a:visited { color: awesome; text-decoration: underline; }

- Dominic Rodger

---

你介意给一个快速的例子吗？我不确定我是否理解了。 假设我想要覆盖这个代码块： a:link，a:visited {color:＃5b80b2; text-decoration: none;} 你会怎么做？ - JohnnyCash

你可以像Dominic所描述的那样创建一个自定义的CSS文件，然后将上述CSS类放入该文件中并进行修改以符合你的喜好。但是你的第二个问题实际上与CSS有关，而不是Django相关的。 - dan-klasson

@JohnnyCash - 看到我的编辑了吗？如果有任何问题，请告诉我 :) - Dominic Rodger

Answer 2

更新: 从Django 3.2开始，Django管理员现在支持主题化！

您可以在这里找到有关此主题的信息。支持的所有变量列表可以在这里找到。

- Rafael

Answer 3

请参考：

还可以看看这个：在Django中覆盖管理界面的css

http://lincolnloop.com/static/slides/2010-djangocon/customizing-the-admin.html#slide37

- vikingosegundo

Answer 4

@Dominic Rodger 是被接受的答案。但是在这里，我使用了内联CSS并覆盖了Django基础CSS。

Django基础CSS

根据您的需要使用Django官方基础CSS自定义您的AdminSite。

您可以覆盖Django官方基础CSS

body {
    margin: 0;
    padding: 0;
    font-size: 14px; # change default color
    font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
    color: #333;
    background: #fff; # Change color
}

---

扩展 base_site 模板以为 AdminSite 添加额外的样式。

创建目录和 base_site.html 文件。

your_project_root_directory/templates/admin/base_site.html

base_site.html

将这些复制到您的base_site.html中。在style标签中，您可以为您的AdminSite添加样式。

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

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

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

{% block extrastyle %} # Here you can add your CSS

<style>

.module h2, .module caption, .inline-group h2,#header
{   
    margin: 0;
    padding: 2px 5px 3px 5px;
    font-size: 11px;
    text-align: left;
    font-weight: bold;
    background: #7CA0C7 url(../img/default-bg.gif) top left repeat-x;
    color: #fff;
}

</style>

{% endblock %}



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

- Muhammad Faizan Fareed