🐥 Overriding the admin CSS in Wagtail

When I created this blog, I wanted to be able to use Markdown for writing the blog posts.

I used the package wagtail-markdown for getting the editor up-and-running. It's working great for me, but some of the CSS used in the editor wasn't really what I liked. The font wasn't my preferred code font and the colors lacked contrast.

To fix this, I figured out that the best option would be to override the admin CSS instead of tinkering inside the wagtail-markdown module itself. This makes it easier to update the package in the future and keeps the customisations nicely separated. Again, Wagtail surprised me again in how flexible it is to allow customisations like these.

The trick is to use a Wagtail hook to inject a custom CSS into the admin which allows you to define the overrides. The hook we are going to use is called insert_global_admin_css.

We first start with creating a file called wagtail_hooks.py in one our apps. In my setup, I've made this part of the blog app as it is the only app using Markdown. In there, we can define which hooks should be registered and what they are supposed to be doing:

blog/wagtail_hooks.py

from django.utils.html import format_html
from django.templatetags.static import static

from wagtail.core import hooks

@hooks.register("insert_global_admin_css")
def insert_global_admin_css():
    return format_html(
        '<link rel="stylesheet" type="text/css" href="{}">',
        static("css/admin.css"),
    )

This hook is telling Wagtail to load the css/admin.css file in addition to the stock admin CSS file.

In there, after some fiddling around, I defined the following overrides:

mysite/static/css/admin.css

.CodeMirror {
    font-family: Menlo, monospace !important;
    font-size: 1.0em !important;
}

.CodeMirror .CodeMirror-code .cm-url, .CodeMirror .CodeMirror-code .cm-link {
    color: #00676a !important;
}

.CodeMirror .CodeMirror-code .cm-comment {
    background: rgba(0, 103, 106, .15) !important;
}

.editor-toolbar.fullscreen, .CodeMirror-fullscreen {
    left: 200px !important;
    bottom: 40px !important;
}

@media screen and (min-width: 50em) {
    .markdown_textarea .field-content {
        width: 100% !important;
    }
}

The selector .CodeMirror changes the font of the editor to a monospaced font which I find easier to read.

The cm.-url and .cm-link selector change the color of the hyperlinks to the green used in the Wagtail admin. I found that to be easier to read and to have a lot more contrast than the default gray.

The .cm-comment adds a greenish backgroud to the code snippets, making them more visible. This is especially handy when you forget to close a code block. If you do so, a big part of your post will now show up in green making it really visible.

.CodeMirror-fullscreen fixes a bug where the fullscreen mode of the editor was a bit too enthousiastic. It didn't take into account that on bigger screens, the sidebar is always visible. Without the customization, the left 200 pixels of the editor would be covered by the sidebar. It also changed the bottom so that the text wouldn't go underneath the actions, "Publish" and "Preview".

Last but not least, the .markdown_textarea .field-content was made slightly bigger to make it align with the default fields. We're doing this only for markdown textarea instances so that we don't resize the other fields.