[Django]-Wagtail customizing admin

by

8👍

✅

There’s an easier way. You can register a Wagtail Hook (read about them here: http://docs.wagtail.io/en/latest/reference/hooks.html). Hooks are ways to add additional attributes or functions to a page or action. Sometimes a hook is run before an action, or after an action. In this case, when the global admin css is being added to your admin, you’ll want to append another .css file.

Here’s a snippet of a hook I wrote a couple weeks ago for Wagtail 2.1.

"""Add custom .css hook"""
from django.contrib.staticfiles.templatetags.staticfiles import static
from django.utils.html import format_html

from wagtail.core import hooks


# Register a custom css file for the wagtail admin.
@hooks.register("insert_global_admin_css", order=100)
def global_admin_css():
    """Add /static/css/wagtail.css."""
    return format_html('<link rel="stylesheet" href="{}">', static("css/wagtail.css"))

After adding that, you’ll just need to make sure /static/css/wagtail.css exists in your static directory, and you can overwrite any CSS in the admin.

An easy way to find out how to overwrite styles in the admin is to: right click -> Inspect (Chrome, Firefox, Safari, etc. will support this). In your Elements tab is a way to see all the HTML elements, and when you click one you can see all the styles and selectors associated with each element. Simply copy the selector you want to edit and paste it into your new wagtail.css file.

👤Kalob Taulien

Leave a comment