Customizing admin templates¶

branding_logo¶

To replace the default logo, create a template file dashboard/templates/wagtailadmin/base.html that overrides the block branding_logo:

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

{% block branding_logo %}
    <img src="{% static 'images/custom-logo.svg' %}" alt="Custom Project" width="80" />
{% endblock %}

The logo also appears on the following pages and can be replaced with its template file:

• login page - create a template file dashboard/templates/wagtailadmin/login.html that overwrites the branding_logo block.

• 404 error page - create a template file dashboard/templates/wagtailadmin/404.html that overrides the branding_logo block.

• wagtail userbar - create a template file dashboard/templates/wagtailadmin/userbar/base.html that overwrites the branding_logo block.

branding_favicon¶

To replace the favicon displayed when viewing admin pages, create a template file dashboard/templates/wagtailadmin/admin_base.html that overrides the block branding_favicon:

{% extends "wagtailadmin/admin_base.html" %}
{% load static %}

{% block branding_favicon %}
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}" />
{% endblock %}

branding_title¶

To replace the title prefix (which is ‘Wagtail’ by default), create a template file dashboard/templates/wagtailadmin/admin_base.html that overrides the block branding_title:

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

{% block branding_title %}Frank's CMS{% endblock %}

branding_login¶

To replace the login message, create a template file dashboard/templates/wagtailadmin/login.html that overrides the block branding_login:

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

{% block branding_login %}Sign in to Frank's Site{% endblock %}

branding_welcome¶

To replace the welcome message on the dashboard, create a template file dashboard/templates/wagtailadmin/home.html that overrides the block branding_welcome:

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

{% block branding_welcome %}Welcome to Frank's Site{% endblock %}

Make sure to test any customisations against our Contrast Grid. Try out your own customisations with this interactive style editor:

Static colours

Light & dark theme colours

root_page¶

Returns the highest explorable page object for the currently logged-in user. If the user has no explore rights, this will default to None.

root_site¶

Returns the name on the site record for the above root page.

site_name¶

Returns the value of root_site, unless it evaluates to None. In that case, it will return the value of settings.WAGTAIL_SITE_NAME.

To use these variables, create a template file dashboard/templates/wagtailadmin/home.html, just as if you were overriding one of the template blocks in the dashboard, and use them as you would any other Django template variable:

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

{% block branding_welcome %}Welcome to the Admin Homepage for {{ root_site }}{% endblock %}

above_login and below_login¶

To add content above or below the login form, override these blocks:

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

{% block above_login %} If you are not Frank you should not be here! {% endblock %}

fields¶

To add extra fields to the login form, override the fields block. You will need to add {{ block.super }} somewhere in your block to include the username and password fields:

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

{% block fields %}
    {{ block.super }}
    <li>
        <div>
            <label for="id_two-factor-auth">Two factor auth token</label>
            <input type="text" name="two-factor-auth" id="id_two-factor-auth">
        </div>
    </li>
{% endblock %}

submit_buttons¶

To add extra buttons to the login form, override the submit_buttons block. You will need to add {{ block.super }} somewhere in your block to include the sign-in button:

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

{% block submit_buttons %}
    {{ block.super }}
    <a href="{% url 'signup' %}"><button type="button" class="button">{% trans 'Sign up' %}</button></a>
{% endblock %}

login_form¶

To completely customize the login form, override the login_form block. This block wraps the whole contents of the <form> element:

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

{% block login_form %}
    <p>Some extra form content</p>
    {{ block.super }}
{% endblock %}

above_form and below_form¶

To add content above or below the password reset form, override these blocks:

{% extends "wagtailadmin/account/password_reset/form.html" %}

{% block above_login %} If you have not received your email within 7 days, call us. {% endblock %}

submit_buttons¶

To add extra buttons to the password reset form, override the submit_buttons block. You will need to add {{ block.super }} somewhere in your block if you want to include the original submit button:

{% extends "wagtailadmin/account/password_reset/form.html" %}

{% block submit_buttons %}
    <a href="{% url 'helpdesk' %}">Contact the helpdesk</a>
{% endblock %}