Rebrand base.html

Learn to customize the base.html file which is the template for all pages in html.

We'll cover the following

Rebranding base.html

You are going to learn how to rebrand the base.html file and use the site layout of the template SB ADMIN.

First, you are going to deal with static assets such as CSS, javascript, etcetera. In your sample_app directory, you will create a static/admin folder.

mkdir sample_app/static
mkdir sample_app/static/admin

Next, you will copy all the directories from SB ADMIN of the downloaded templates in your new static/admin directory:

Then you will modify your settings.py to define STATIC_ROOT

STATIC_ROOT = 'static'

After this, you will launch a collectstatic command.

python manage.py collectstatic

At this stage, you will have two folders. Your custom sample_app/static/admin/ will contain the assets of the downloaded SB ADMIN template and your /static/ folder in your main directory which will contain the default Django admin assets.

The difficult part will begin now. You will study the structure of the Django Admin base.html file and the structure of the index.html of the SB Admin template. You will migrate piece by piece the code of the SB template to your base.html file.

You will copy/paste the content of the index.html file of the SB ADMIN into the base.html file in /sample_app/templates/admin/.

Starting with the easy part, you will change the <head> of your base.html and include the new CSS and javascript. You can see the final changes highlighted in the code widget below (lines 10 - 45).

Scroll down to the end of your base.html file and replace the default assets with the static SB Admin assets (lines 286 - 303).

After implementing the changes explained above, everything about your Django Admin page will be lost. Every UI element will now be found in the new SB ADMIN template. The models have disappeared.

Hence you will make changes to get your models back on the Admin page.

As the first step, you will replace the title of the admin with the real title (lines 60 - 64):

<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-contentcenter" href="index.html">
  <div class="sidebar-brand-text mx-3">
    {{ site_header|default:_('Django administration') }}
  </div>
</a>

Now you will remove the user information part in the SB template, to include the Django user information. Fortunately, the HTML code is commented, so you can find the <!-- Nav Item - User Information --> and make changes accordingly. You can see the updated code in lines 159 - 210 of base.html present in the code widget below.

You will also have to set the title of the Admin in place of the Dashboard message. You will locate this word (in the Page heading section) and replace it with the correct code (line 219 - 229).

After the changes stated above, your admin page will look something like this:

Get hands-on with 1200+ tech skills courses.