How to prevent the text in Django Admin to get bigger when overriding "base.css" set in overridden "base.html"?

Question

I could change the header color to black in all admin pages with the following steps.

So, this is Django Admin as shown below:

Then, I copied base.css from django/contrib/admin/static/admin/css/base.css in my virtual environment to core/static/core/admin/css/ and copied base.html from django/contrib/admin/templates/admin/base.html to templates/admin/ as shown below:

django-project
 |-core
 |  |-settings.py
 |  └-static
 |     └-core
 |        └-admin
 |           └-css
 |              └-base.css # Here
 |-app1
 |-app2
 └-templates
    └-admin
       └-base.html # Here

Then in base.css, I replaced background: var(--header-bg); with background: black; as shown below:

/* "core/static/core/admin/css/base.css" */ 

#header {
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    /* background: var(--header-bg); */
    background: black; /* Here */
    color: var(--header-color);
    overflow: hidden;
}

Then in {% static %} in base.html, I replaced admin/css/base.css with core/admin/css/base.css as shown below to change the header color to black in all admin pages:

# "templates/admin/base.html"

# ...                                                      {# "admin/css/base.css" is replaced #}
<title>{% block title %}{% endblock %}</title>             {# ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ #}
<link rel="stylesheet" href="{% block stylesheet %}{% static "core/admin/css/base.css" %}{% endblock %}">
{% block dark-mode-vars %}
#...

Then, I could change the header color to black in all admin pages but the text gets bigger than the original one as shown below.

After:

Before(Original):

So in base.html, I added type="text/css" and media="all" to <link> as shown below but the text is still bigger than the original one:

# "templates/admin/base.html"

# ...
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" media="all" href="{% block stylesheet %}{% static "core/admin/css/base.css" %}{% endblock %}">
{% block dark-mode-vars %} {# ↑ Here #}  {# ↑ Here #}
#...

So, how can I prevent the text in Django Admin to get bigger when overriding base.css set in the overridden base.html?

Super Kai - Kazuya Ito · Answer 1 · 2023-05-12T15:25:18.960

You should add <link ... "core/admin/css/base.css" %}"> after <link ... "admin/css/base.css" %}{% endblock %}"> without replacing admin/css/base.css with core/admin/css/base.css in {% static %} in base.html as shown below to change the header color to black in all admin pages:

# "templates/admin/base.html"

# ...
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% block stylesheet %}{% static "admin/css/base.css" %}{% endblock %}">
<link rel="stylesheet" href="{% static "core/admin/css/base.css" %}"> {# Here #}
{% block dark-mode-vars %}
#...

Then, you can prevent the text in Django Admin to get bigger when overriding base.css set in the overridden base.html as shown below:

After:

Before(Original):

How to prevent the text in Django Admin to get bigger when overriding "base.css" set in overridden "base.html"?

1 Answers1