arrow_back

How : Customizing the Django Admin's CSS




Customizing the Django Admin's CSS (mostly its colors)

1 . Installing

> pip install django-admin-colors


2 . Configure your settings.py 

INSTALLED_APPS = [
    ...,
    'admincolors'
]
# Choose a base theme
# If empty or not set, the first option of ADMIN_COLORS will be chosen
ADMIN_COLORS_BASE_THEME = 'Gray'
# These are the "builtin" django-admin-colors themes
ADMIN_COLORS = [
    ('Default', []),
    ('Lite', 'admincolors/css/lite.css'),
    ('Dark Blue', 'admincolors/css/dark-blue.css'),
    ('Gray', 'admincolors/css/gray.css')
]
# TEMPLATES configuration
# PS: Don't override your current settings,
#     copy or change only what's necessary
TEMPLATES = [
    {
        ...,
        'DIRS': [
            # IMPORTANT: needed to override the django admin's base templates.
            os.path.join(BASE_DIR, 'templates')
        ],
        # IMPORTANT: needed to load admincolors' templates
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                ...,
                # IMPORTANT: needed to make the "theme" and "themes" context
                #            variables available for the templates
                'admincolors.context_processors.admin_theme'
            ],
        },
    },
]



3.Configure your admin templates ( override )

3.1 base_site ( BASE_DIR/templates/admin/base_site.html ) 

{% extends "admin/base_site.html" %}
{% load admincolors %}
{% block blockbots %}
{{ block.super }}
{% colors_styles theme themes %}
{% endblock %}
{% block footer %}
{{ block.super }}
{% colors_scripts %}
{% endblock %}


 3.2 index ( BASE_DIR/templates/admin/index.html ) 

{% extends "admin/index.html" %}
{% load admincolors %}
{% block breadcrumbs %}
{% if themes|length > 1 %}
<div class="breadcrumbs">
{% colors_breadcrumbs theme themes %}
</div>
{% endif %}
{% endblock %}

> Custom themes

To add a custom theme, simply create a .css file anywhere in your static files, then add its full path (and the theme's name) to the ADMIN_COLORS variable in settings.py:

ADMIN_COLORS = [
    ...,
    ('My Theme', 'path/to/my/theme.css')
]
You can also set multiple css files to your theme (or add a custom .css to an existing one):

ADMIN_COLORS = [
    ...,
    ('Gray', ('admincolors/css/gray.css', 'path/to/my/custom/file.css')),
    ('My Theme', ('path/to/my/theme.css', 'path/to/another/file.css'))
]



Published @ Apr 2018