new contrib.admin userstyle template block in base.html

[miked@…]

It is necessary to add user css styles after all the admin styles if a Django programmer wishes to override admin styles without editing Django css files.

For example, it is necessary to darken help text to make it readable by older users. However, you cannot negotiate with young web designers. Hence, if you want to change what the Django designers did or you have employed an equally rabid designer of your own with a different opinion, there must be a non-violent way forward.

Trying to use {% block extrastyle %}{% endblock %} with or without {{ block.super }} in a local base_site.html fails because (it appears) that block is used to insert forms.css at a later stage.

The solution is a new {% block userstyle %}{% endblock %} line positioned immediately after {% block extrastyle %}{% endblock %} and ahead of the hard-coded <!--[if lte IE 7]> line.

This succeeds because it positions user css correctly after admin styles so they may be overridden if required.

This lets a programmer use a local base_site.html to insert for example:

{% block userstyle %}<link rel="stylesheet" type="text/css" href="/static/css/darker.css" />{% endblock %}

Tests are moot (I think) because I have no idea how to write a unit test for the template side of things. I came to this by viewing page source to discover the only way to achieve the required outcome is to have a new block.

{% block userstyle %} is obviously my choice but a rose by any other name would smell as sweet!

For documentation ​Customizing the Django admin interface is no longer maintained so it is probably a waste of time writing up a method for overriding the admin css. But anyway ... here is a proposed new section after Text Styles and ahead of Object Tools. By the way, I have read the documentation guidelines but have never used Sphinx so I haven't had time to do anything more than the following:

Overriding CSS

Not recommended unless you are a web designer confident with CSS. If there is something you really want to change then it is possible. You need to create an admin directory in your project's templates directory and then copy into it admin/base-site.html.

Near the top of that file put in a {% block userstyle %}{% endblock %} line like this:

{% extends "admin/base.html" %}
{% load i18n %}
{% block userstyle %}<link rel="stylesheet" type="text/css" href="/static/css/mystyles.css" />{% endblock %}
{% block title %}{{ title }} | {% trans 'Django site admin' %}{% endblock %}

The styles in mystyles.css will override any admin styles with the same names.

The best approach in mystyle.css is to copy only the styles you wish to change from admin base.css and forms.css into mystyles.css and edit them carefully, testing as you go. Here is an example mystyles.css for darkening the help text and field labels just slightly.

/* overrides /static/admin/css/base.css */

.help, p.help {
    font-size: 10px !important;
    color: #444444;
}

/* overrides /static/admin/css/forms.css */

label {
    color: #555555;
    font-size: 12px;
    font-weight: normal !important;
}

[miked@…]

proposed change to admin template base.html

[Julien Phalip]

Thank you for the suggestion, however I think it would be confusing to have multiple blocks in the admin's built-in templates for appending CSS rules. If you really need to do that, then you should already be able to achieve this by providing a custom base_site.htmltemplate and adding extra blocks to it.