4

I was wondering how themable the admin interface was? I ran across this doc and it seems to talk about a few options.

It's huge step up from the django admin default interface but i was wondering if anyone knew of any drop in replacement.

For example one pet peeve I have is the size of the content box.

See attached screenshot. Is the size of the body driven by the data model and I goofed up somehow? Or is there something else I missed?

csgeek
  • 270
  • 3
  • 19

1 Answers1

3

Yes, this is possible. As far as I'm aware there aren't many themes publicly available. I modify the default theme for most of our clients. It's not an extensive overhaul, but just something to make it feel like a more branded experience for our clients.

First, you'll want to install the Wagtail styleguide. 

INSTALLED_APPS = (
    ...
    'wagtail.contrib.styleguide',
)

You can read more about the style guide here: http://docs.wagtail.io/en/latest/contributing/styleguide.html

Then you'll be able to go into your admin > Settings > Styleguide (Link will look something like this: http://localhost:8000/admin/styleguide/)

Then what I do is right click on the section I want to style, click "inspect" in my browser and view the elements and styles I want to edit. This seems to be the fastest way to style what you're looking for.

Before you start styling, you'll need a CSS file for your admin. For this, we can use a 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"))

You can read more about Wagtail hooks here: http://docs.wagtail.io/en/latest/reference/hooks.html

This will add a <link /> element to the <head> of your admin pages, after the main css files are loaded.

Now all you need to do is create a new file called wagtail.css, make sure it's inside your /static/css/ directory (ie. /static/css/wagtail.css) and you can overwrite all the styles. Just remember to reference the style guide!

Edit: I've since made a video on this subject if you want to dive deeper into admin customization. https://www.youtube.com/watch?v=5flSOmcWGfk&list=PLMQHMcNi6ocsS8Bfnuy_IDgJ4bHRRrvub&index=44

Kalob Taulien
  • 1,817
  • 17
  • 22
  • Thanks, this was super helpful. Between this and the wagtail doc I linked in my original post I figured out enough on how to make things hideously ugly which is basically a win since I can modify just about everything on the page. Now, I just need someone with some taste to pick the colors/logos and such. – csgeek Jul 24 '18 at 23:17
  • 1
    One more question. The last tidbit in the doc: http://docs.wagtail.io/en/v2.0/advanced_topics/customisation/admin_templates.html references extending react components. Did anyone work with that or have any experience with it? – csgeek Jul 24 '18 at 23:18
  • I haven't needed to do anything with React (in the Wagtail Admin) yet. :/ – Kalob Taulien Jul 25 '18 at 17:20
  • Thank you for all the help and suggestions. This will get me most of the way. :D – csgeek Jul 26 '18 at 14:15