Django admin colours

Question

The Django Admin page is different shades of blue by default. Where do I access how these colours are controlled? I want to change it all to shades of green instead of blue.

Ideas?

Dominic Rodger · Accepted Answer · 2012-02-23T08:55:35.460

13

You can override the admin templates. You probably want to the admin/base_site.html template, and provide an extrastyle block with any CSS you want to inject into the template. You'll need to know which styles to override (there's quite a few) - when I did this I just found the elements I wanted to change, and added styles until everything looked right.

So, presuming you've got a templates directory somewhere (which is set in TEMPLATE_DIRS), create a file called admin/base_site.html, which is probably going to be a copy of django/contrib/admin/templates/admin/base_site.html.

For example, my base_site.html template has a section in it like this:

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

In yourcssfile.css you just have:

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

edited Feb 23 '12 at 08:55

answered Feb 22 '12 at 22:16

Dominic Rodger

97,747
36
197
212

Would you mind a quick example? I'm not sure I'm catching on.. Say I want to overwrite this bit: a:link, a:visited { color: #5b80b2; text-decoration: none; } How would you do that? – JohnnyCash Feb 22 '12 at 22:33
You create a custom css file like Dominic described and then you put the above css classes in that file that you modify to your liking. But your second question is really CSS, and not Django related. – dan-klasson Feb 22 '12 at 23:15
@JohnnyCash - see my edit - let me know if you've got any questions :) – Dominic Rodger Feb 23 '12 at 08:55

score 3 · Answer 2 · answered May 29 '20 at 11:58

@Dominic Rodger is accepted answer. But in this I'm using Inline CSS and override Django base CSS.

Django Base CSS

Customize your AdminSite using Django Official Base CSS according to your need.

You can override Django Official Base 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
}

Extend the base_site templates to add extra style to AdminSite.

Create directories and base_site.html.

your_project_root_directory/templates/admin/base_site.html

base_site.html

Copy these into your base_site.html.In style tag you can style your 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 %}

score 3 · Answer 3 · answered Apr 16 '21 at 21:11

3

Update: Starting with Django 3.2, Django Admin now supports theming!

You can find information about this here. A list of all variables supported can be found here.

answered Apr 16 '21 at 21:11

Rafael

525
7
20

score 3 · Answer 4 · edited May 01 '19 at 09:49

3

See this too: Overriding admin css in django

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

edited May 01 '19 at 09:49

Muhammad Faizan Fareed

3,298
34
30

answered Feb 22 '12 at 22:13

vikingosegundo

52,040
14
137
178

Django admin colours

4 Answers4