Jafacak.es

Make beautiful Wagtail Admin views

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

Admin view with header

Wagtail Admin with green 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.

Wagtail Admin with table
        
{% 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 %}