Contribution

Customizing the Drupal 8 backend – Solutions and tips

Published on 22 July 2020
Screenshot of a Figma file of the Claro theme
How can you simplify the Drupal back office as much as possible? The main goal is not to overwhelm contributors with features intended for webmasters and technical administrators. Here are some suggestions, tips, and solutions...

A specific theme for the back-office

One of Drupal’s unique features is its ability to have two separate themes (templates), one for the public-facing site and one for the back-office. However, the theme provided by default with Drupal 8/9 is not the one that most users prefer for everyday use.

In our view, there are three interesting alternatives and one theme to keep an eye on:

Adminimal

This is a very popular back-office theme within the community, offering an interface styled with material design. Here are a few screenshots:

Some important features:

  • Minimalist design focused on user experience;
  • Improved menu navigation through the submodule Adminimal Menu;
  • Colored buttons for common tasks to highlight important items in daily use;
  • Key textual elements emphasized through larger font size;
  • Table formatting that helps focus on the row you're currently working on;
  • Nice icons that enhance the overall look and user-friendliness, and also improve ease of use;
  • Redesigned back-office notification messages for clearer understanding of message contents;
  • Based on the original Drupal Seven administration theme (especially handy for experienced Drupal users who won't lose their bearings).

Claro

Claro is a clean, accessible, and powerful Drupal administration theme built as part of the Admin UI Modernization Initiative. This team is working on modernizing the look and feel of the back-office. Claro is set to become the default theme in Drupal 9 and can already be installed and tested.

Read: We tested Claro, the new admin theme for Drupal 8 and 9 – Saturday, April 11, 2020

Here are a few screenshots:

Gin

It’s also worth noting that an official version based on Claro is nearing completion and should be released soon: Gin. Gin goes even further with the user experience, offering an innovative and very accessible interface. This theme also offers a dark mode that can be automatically enabled according to your operating system preferences.

Here are a few screenshots:

We regularly review these types of themes to see if they are suitable.

Our opinion

At this stage, Claro seems to us a better candidate than Adminimal (though the latter will surely improve too) as it fits within a broader strategy initiated by the Drupal community to enhance the experience for site administrators and contributors. Still, adding a new theme is not a magic fix or a sufficient solution. The back-office will look less austere, but there will always be room for improvement.

Additional modules

There are a number of contributed modules that can make administrators' work easier.

Field Group

The Field Group module lets you group back-office fields into broad sections/tabs.

It can be used to avoid long-winded input forms and allows contributors to more easily access the section they are interested in.

Entity Browser

The aim of this module is to provide a generic entity browser/selector. An entity may be already existing content, a block, an image, another media item, etc. These features exist elsewhere, but this module offers a simpler, more practical interface.

Back-office customization and configuration

Beyond choosing a theme and adding modules—which are not miracle solutions in 100% of cases—simplifying the Drupal back-office ultimately comes down to customization and configuration. The “out-of-the-box” Drupal back-office can be intimidating, but the CMS is not restrictive in this area and allows for all sorts of adjustments.

Display according to permissions / user roles

The idea is that if a user does not have access to a section, they will not see it in the back-office.

A contributor will generally only see the “Content” section in the administration or contribution space, allowing them to create new pages but not “Configuration,” “Structure,” or “Appearance,” which are reserved for more technical administrators.

Similarly, if a contributor can only work on news articles, they will then only see the “Add News” menu in their back-office in the “Add Content” section.

In an add content form, for example, if the user does not have permission to edit a page’s metadata, they will not see that section in their input form.

Finally, the default WYSIWYG editor for “long” text fields is CKeditor. There, too, depending on what the contributor can or must do, the number of icons and features can be adjusted.
Example: Only bold/italic/bulleted lists for comments or a junior contributor → full set of features for a webmaster.

With permissions set up properly, a simple contributor should not feel “overwhelmed” by an excess of features they don’t need.

Configurable menus and shortcuts

Beyond filtering information based on user permissions, the structure of Drupal’s back-office is not fixed and can be changed just as easily as a menu on the public site.

Each back-office user has their own shortcuts bar where they can bookmark the backend pages they use most frequently. Modules such as shortcuts by role can even pre-fill favorites based on anticipated needs for a user profile.

Input assistance

Each content type, each list, each menu, each taxonomy vocabulary, and even each input field has at least a description field so the user can understand what they are editing.

These fields aren’t mandatory, but we think they are important for the long-term management of the site.

There’s no need to access the source code to modify or add clarifications later on as your needs and contributor feedback evolve.

Drupal also allows you to change the order of input fields for a piece of content, independently from the way it’s actually displayed, so you can group parts in a way that makes sense for administrators, even if it’s different from the display.

As with all projects, we are always looking to improve contributor comfort. These adjustments should be finalized during design workshops, just like the user experience for the public interface. They are crucial for ensuring successful onboarding for the project.

Ludovic Coullet

On bluedrop.fr: We tested Claro, the new admin theme for Drupal 8 and 9 – Saturday, April 11, 2020
On bluedrop.fr: Drupal 8, back-end improvements: Configuration, entities, cache, webservices – part 6 – Wednesday, September 30, 2015

Read more articles on Contribution