Rebrand change_list.html

Rebranding change_list.html

If you click on a model the change_list.html page is displayed. You will learn how to rebrand it in this lesson. Starting offStarting off, you will need to adapt the HTML code of the change_list.html file located in sample_app/templates/admin/sample_app/.

Your focus will be on the top of the page and to modify the search and «Add question» options.

The «Add question» link is in the object-tools-item block .

{% block object-tools %}
<ul class="object-tools">
  {% block object-tools-items %}
  {% change_list_object_tools %}
  {% endblock %}
</ul>
{% endblock %}

Its value is derived from {% change_list_object_tools %} which comes from the content of the change_list_object_tools.html file. So you will copy this file from /venv/lib/python3.8/site-packages/django/contrib/admin/templates/admin transfer it to sample_app/templates/admin and modify the HTML code of this file to have adopt your new design. You can see the final code in the code widget below.

The search bar comes from the {% block search %} which can be found in search_form.html so you will copy it from the default Django directory to your sample_app/templates/admin directory and modify its HTML code too. The final result can be seen in the code widget below.

To view a search bar on the admin page, you must have a search_filter enabled in the admin.py file for the model you are looking at. For this purpose, you will add search_fields = ('refAuthor__name',) in the QuestionAdmin class.

The date hierarchy is configured from {% block date_hierarchy %} so you will copy the date_hierarchy.html file into your project and modify its content. The final form of date_hierarchy.html can be seen in the code widget below.

Now, youwill modify the filters which are located in the filter.html file, and we will place them in a dropdown button below the search bar which is more convenient and useful with responsive design.

First, we modify your change_list.html file to copy the {% block filters %} and put it inside the {% block search %} (line 62 75). Then you will modify the filter.html file to adapt our design (changes can be viewed in the file shown in the code widget below).

Your last step will be to modify the display of the results which come from the change_list_results.html file. This file will basically display an HTML table (changes are already present in a file inside the code widget).

If you want to adapt the pagination you can modify the pagination.html file (changes have already been made in the file).

The final result will look something like what is illustrated below for the Question model (you can also see changes in the other models change page):