Home | About | Contact

Changing the Django Admin

---

Yesterday I was giving a demo of Django and I got a question that I normally don't get. The question was simple enough, "How did you get the admin to look like that?". Pretty simple question, and one I never really thought to much about. I just kinda do it for each client, meaning that I brand the admin specifically to the clients needs. So what I've decided to do today is explain how I do the most simple branding of all. Change the log in screen and the website name at the top of the admin. In addition to that I'm going to change the color of the admin as well. The nice green and yellow is nice, but I've yet to be at a client where those were the chosen colors.

To start there is some simple file copying that must take place for this to work correctly. Without going into how all the template loaders work, and getting even deeper into inheritance, just trust me that the following method is the best practice for creating a look and feel all your own. First in your template directory, create a directory called "admin". This is where we are going to place our changes. Inside that directory go ahead and copy over the the "base_site.html" file from the source. Depending on where you installed Django, you can find the file you need here: /django/django/contrib/admin/templates/admin/base_site.html. Once that file has been copied you can start making some edits. You'll notice that the color of my admin matches the colors of my site. The code I used to create this can be seen below.

{% extends "admin/base.html" %}
{% load i18n %}
{% block title %}{{ title }} | {% trans 'I Can Build It Administration' %}{% endblock %}
{% block extrastyle %}
<style>
#header{ background-color: #f48123; border-bottom: solid 3px #999; }
#branding h1{ color: #fff; }
.module h2, .module caption, .inline-group h2 { background:#ccc url(/admin_media/img/admin/nav-bg.gif) bottom left repeat-x; color: #333940; }
a.section:link, a.section:visited { color: #666666; }
</style>
{% endblock %}
{% block branding %}
<h1 id="site-name">{% trans 'I Can Build Your Website administration' %}</h1>
{% endblock %}
{% block nav-global %}{% endblock %}

Basically you can see that I added the "extrastyle" block, which allowed me to override some of the default settings and colors. After that, the login screen changes and so does the branding bar across the top of the admin. This is obviously just the start to the things you can do with the admin. Next time I'll cover how I changed my model around so that the input was easier.

Current Projects

In Production