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.
3
votes
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
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
1 Answers
7
votes
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.
