3

I am new to Wagtail and Django development. How can I change the colors of the admin page in Wagtail? According to some Q&A, I can change the colors through core.css but scanning through the code takes a lot of time.

Sidnetopia
  • 97
  • 8
  • Changing colours isn't really supported or easily implemented I'm afraid - Wagtail's CSS is defined using SCSS and built using a node.js based workflow, so you'd probably need to recreate that workflow, effectively creating a custom build of Wagtail. – gasman May 01 '18 at 11:31
  • 1
    Don't do the 'scanning through the code' method. Use your browser developer tools and inspect an element. If you know what classname is responsible for the styling, you can do a search in your editor. Let the tools do the work for you ;) – allcaps May 03 '18 at 18:45

1 Answers1

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
  • 1,817
  • 17
  • 22
  • 1
    I found I had to add `!important` to all my css rules for them to show, is that expected? – PresidentNick May 28 '20 at 18:41
  • 1
    No, you'll want to set the ordering to a higher number so your CSS gets loaded below the .css files. OR you'll want to make sure you're using the same css selectors (too much css specificity can cause overwrites to not work as expected, results in !important overuse) – Kalob Taulien Jun 02 '20 at 17:55
  • 2
    "set the ordering to a higher number" how do I load my css file below the admin css files/change the ordering? – PresidentNick Jun 08 '20 at 17:43