django.contrib 如何修改背景颜色,系统中header div框中的颜色
时间: 2024-03-26 13:36:25 浏览: 22
要修改 Django Admin 后台页面的背景颜色和 header div 框中的颜色,可以通过自定义 CSS 样式来实现。具体操作步骤如下:
1. 创建一个新的 CSS 文件,例如 `admin.css`,并将其放置在 Django 项目的 `static` 目录下。
2. 在 `settings.py` 文件中添加以下配置:
```
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
STATIC_URL = '/static/'
```
这样 Django 就能够找到 `static` 目录下的静态文件。
3. 在 `admin/base_site.html` 模板文件中添加以下内容:
```
{% extends "admin/base.html" %}
{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static 'admin.css' %}">
{% endblock %}
```
这样就可以将 `admin.css` 文件引入到 Django Admin 后台页面中。
4. 在 `admin.css` 文件中添加以下 CSS 样式:
```
/* 修改页面背景颜色 */
body {
background-color: #f0f0f0;
}
/* 修改 header div 框中的颜色 */
#header {
background-color: #333;
color: #fff;
}
```
这样就可以将 Django Admin 后台页面的背景颜色和 header div 框中的颜色修改为自定义颜色了。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
{% extends "admin/base.html" %} {% block content %} 药品列表 ID 药品名称 操作 {% for drug in drugs %} {{ drug.id }} {{ drug.drug_name }} 编辑 <form action="{% url 'admin:drug_db_drug_list_delete' drug.id %}" method="post" class="d-inline"> {% csrf_token %} <button class="btn btn-danger btn-sm">删除</button> </form> {% empty %} 暂无药品 {% endfor %} 添加新药品 药品相互作用 ID 药品1 药品2 相互作用 操作 {% for interaction in interactions %} {{ interaction.id }} {{ interaction.drug1 }} {{ interaction.drug2 }} {{ interaction.interaction }} 编辑 <form action="{% url 'admin:drug_db_drug_interaction_delete' interaction.id %}" method="post" class="d-inline"> {% csrf_token %} <button class="btn btn-danger btn-sm">删除</button> </form> {% empty %} 暂无药品相互作用 {% endfor %} 添加新药品相互作用 {% endblock %} 为上述代码设置相应的视图和URL配置,并将这些视图和操作注册到Django admin页面中。
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)