How to customise the UI

[chrisdao93]

Hi, thank you for all the hard works.

For the UI, is there a way I can change the current red colour when selected to another colour? Or how to change the icon? Thank you.

[yarin-zhang]

Before official support is provided, I want to share a temporary solution for overriding some of the default styles of wagtail-autocomplete.

This method involves extending the Wagtail admin_base.html template and adding a custom CSS file to it. In this way, we can adjust the styles of the Wagtail content editing interface without directly modifying the source code or package of wagtail-autocomplete.

The steps are as follows:

1. In the static files (/static) directory of your Django application, create a custom CSS file, for example, named custom-wagtailadmin.css. In this file, you can add any style rules you need to override. For example, I wanted to support dark mode, so I simply modified the background color to be transparent.

.c-wagtailautocomplete__suggestions__item {
    background-color: transparent !important;
}
.c-wagtailautocomplete__suggestions__item--active {
    background-color: #ff7f77 !important;
}

2. Create a new HTML file to extend the Wagtail admin_base.html template. Suppose we name this file custom_admin_base.html and place it in the template directory (/templates) of your Django application. In this extended template file, include your previously created custom CSS file.

{% extends "wagtailadmin/admin_base.html" %}

{% load static %}

{% block extra_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'your-path/custom-wagtailadmin.css' %}" type="text/css">
{% endblock %}

Make sure to replace 'your-path/custom-wagtailadmin.css' with the actual path to your CSS file.

I know this is not a best practice, but I do have a hard time modifying the packaged dist.js and dist.css, and this method is simple enough to solve the problem for me.