olivero drupal theme

Olivero: New default front-end theme for Drupal 10

Since Drupal 10 has been released recently, we decided to cover ins and outs of the new Drupal core version. You might have already read our blog post on the advantages of the Claro admin theme, which is available to administrators and content managers of Drupal 10 websites.

We have good news for those who develop user interfaces in Drupal, too: you will get a new default front-end theme. Drupal 9.1 brought the Olivero theme in as an experiment, and it is to stay in the latest version of Drupal. In this post, we are explaining the philosophy at the heart of Olivero and why it makes Drupal even more attractive.

Olivero

What Was Wrong With the Old Theme?

The front-end theme available in Drupal core has been updated for the first time in 11 years — this is the time CMS users spent with the Bartik theme. During DrupalCon Amsterdam 2019, the team working on Olivero gave credit to the old theme but rightfully mentioned that it no longer spoke to web design trends and Drupal’s improvements.

For instance, graphical elements, gradients, and drop shadows in Bartik lost their novelty, while the interface did not support the Layout Builder, secondary dropdown menus, embedded media, and other features added to CMS since Drupal 7.

Drupal devotees, including our web studio, talk a lot about flexible contemporary modules for any task as well as other benefits of the CMS. But imagine someone who sees Drupal for the first time and judges it by its outdated theme. Will they share our enthusiasm in 2023? We don’t think so.

The first discussion of Olivero took place in the lobby of the hotel hosting DrupalCon Seattle 2019. This casual conversation among Drupal enthusiasts turned into a strategic initiative. Three main requirements for the new out-of-the-box front-end theme were defined:

  • Drupal theme design should feel modern and age well in the next several years.
  • The theme should be able to support new Drupal features.    
  • It should comply with the design accessibility standards described in WCAG AA.

Feel free to thank all contributors who helped Olivero come to life. These are the participants of the conversation in the hotel, stakeholders, and the most prominent contributors to the project: Putra Bonaccorsi (proeung), Mike Herchel (mherchel), Angie Byron (webchick), Lauri Eskola (lauriii), Dries Buytaert (dries), Cristina Chumillas (ckrina), Gábor Hojtsy (gábor-hojtsy), Jen Witkowski (jwitkowski79), Jared Ponchot (jponch), Kat Shaw (katannshaw), and Matthew Tift (mtift).

olivero

How Olivero Got Its Name

Though Rachel Olivero was not an old-timer in the Drupal Community, she left her mark. As a member of the National Federation of the Blind and a blind person, Rachel was probably more aware of Internet resources accessibility issues than those who create these resources.

She became involved in the Drupal Community for the first time at DrupalCon Baltimore 2017, and for the next two years until she passed in 2019, she was doing her best to engage with the Drupal Diversity and Inclusion Team and provide feedback on accessibility issues. The work Rachel Olivero did to bring Drupal closer to disabled people turned out to be invaluable for the authors of the new Drupal front-end development theme. Rachel deserved at least to be honored by naming the new product after her.

Having reviewed the theme, the National Federation of the Blind gave its approval finding no issues with the contrast, focus, and scale, and spoke highly of the forms and content navigation.

Features of the Olivero Theme

Now let us move to the benefits of the new theme. As Bartik's heir, it aims to take the best from its predecessor and eliminate its drawbacks to become closer to the new generations of Drupal developers. Its creators concentrated primarily on color selection, readability, users’ focus on the content, and compliance with the design accessibility principles.

Design System

Adaptive Grid. In the future, the grid will allow theme owners to change the theme design quickly while preserving its proportions and harmony.

olivero adaptive grid

Vertical Rhythm. Vertical rhythm is the principle of page elements organization which is based on the use of repetitive and coordinated intervals. This allows the design to look well-thought-out and consistent for a better user experience. The designer sets the height of the vertical rhythm (vertical rhythm unit, VRU). It is then used to define the font size, distance between the lines, paragraphs, headings, and other elements.

Typography. The design rhythm and stability are backed up by the main font size. The font size is 18px and all other text-related UI elements are adapted to this size. The fonts used include Lora for the main text and Metropolis for headings. Both fonts are distributed for free under the Open Fonts License. The font also looks great on mobile device screens.

olivero theme typography

Color Palette. On the one hand, colors should be in line with the product identity, on the other side, they should be eye-pleasing and meet the a11y principles. Bright blue was selected as the base color, while neutral grays counterbalance the design elements. Darker colors make the design accessible, and lighter colors support the elements.

RELATED: Why web accessibility is important

olivero color palette

UI Patterns

Header and Navigation. Even when working with long pages and menus with multiple sections, users do not need to perform unnecessary operations and long searches to find their way around the site and get where they need. When the user scrolls down the page, the menu items collapse into a hamburger. The burger menu sticks to the left side of the page and is always available to the user. Secondary dropdown menus are also available now. The header is set up depending on the logo and heading selected for the page.

RELATED: How UX/UI design can help your business?

Branding Options. Theme settings let you select the width of the area for your logo and set the color of this area based on your company’s identity.
 

olivero branding variations

Buttons and Forms. The design takes into account all necessary states of the buttons and their roles so that the user can get what each of them is used for quickly. 

olivero buttons

It is now easy to tell a form from other UI elements just by the side color bar. 

olivero theme forms

Side Bar. It is very convenient to have anchor links to the post sections or similar materials in the visibility zone. This is what was missing in the Bartik theme.

olivero drupal sidebar

RTL Language Support. With the correct representation of right-to-left languages, Drupal has become even closer to the status of a multi-language CMS it obtained by version 8.
 

drupal right to left language support

System Messages. Another benefit of a good color scheme is that system messages are clearly visible and at the same time do not overlap with the main content.

drupal system messages

Breadcrumbs. Bartik’s users had a lot of problems with breadcrumbs and tackled them in a customized way. The less customization we use, the better the code maintainability. Olivero reduces the number of custom solutions: breadcrumbs are located at the top of the page where they are supposed to be. The color accent makes them look like clickable navigation elements. The interests of mobile users were also taken into account: they can move across the pages by swiping them to the right and the left.

Conclusion

2024 is the ideal moment to get acquainted with Drupal. The Olivero theme will let visitors of your website feel that you are keeping up with the advances in design and web development and taking care of their comfort. With the new Drupal default theme, developers have fewer reasons to write custom code and set up additional modules. And even if something is not in line with your taste or design, any savvy developer will be able to tweak it.
 

You might also like

e commerce store

7 must-have practices for a successful ecommerce store

Ecommerce knows many examples of good websites helping their owners gain profit in a manner that is graceful and brings fun to the client. We have examined them, talked to designers, and found 7 ways to increase online sales using proven and effective web design solutions.