Make beautiful Wagtail Admin views

Published: 30 Oct 2021

This post contains examples of HTML Markup that you can use in your Wagtail Admin view templates.

Admin view with header

Use the `titletag` block to alter the HTML `<title>`.

With the Wagtail shared header include, you can pass values for icon, title, subtitle and many more. See the template for documentation to see all options.

Use a wrapper div with the `nice-padding` class so all of your text doesn't touch the sidebar.

{% extends "wagtailadmin/base.html" %}

{% block titletag %}Page title{% endblock %}

{% block content %}
    {% include "wagtailadmin/shared/header.html" with title="Page title" icon="pick" %}
    <div class="nice-padding">
        <p>Page content</p>
    </div>
{% endblock %}

Listing Table

You can create a table with standard HTML markup, but to make it look pretty you should do the following:

1. Add the `listing` class to the `<table>` tag.
2. Add the `name` class to the `<th>` tag for the capitalised "name" styling.
3. Add the `title` class to the `<td>` tag for the bold "title" styling.

{% extends "wagtailadmin/base.html" %}

{% block titletag %}Page title{% endblock %}

{% block content %}
    {% include "wagtailadmin/shared/header.html" with title="Admin view" icon="pick" %}
    <div class="nice-padding">
        <table class="listing">
            <thead>
                <tr>
                    <th class="name">
                        Row name 1
                    </th>
                    <th class="name">
                        Row name 2
                    </th>
                    <th class="name">
                        Row name 3
                    </th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td class="title">
                            <div class="title-wrapper">Entry 1</div>
                        </td>
                        <td>Some more information</td>
                        <td>Even more information</td>
                    </tr>
                    <tr>
                        <td class="title">
                            <div class="title-wrapper">Entry 2</div>
                        </td>
                        <td>Some more information</td>
                        <td>Even more information</td>
                    </tr>
                    <tr>
                        <td class="title">
                            <div class="title-wrapper">Entry 3</div>
                        </td>
                        <td>Some more information</td>
                        <td>Even more information</td>
                    </tr>
            </tbody>
        </table>
    </div>
{% endblock %}