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.