[Solved]-Django admin colours

by

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; }
👤Dominic Rodger

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

👤vikingosegundo

3👍

@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 %}
👤Muhammad Faizan Fareed

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.

👤Rafael

Leave a comment