The new design “OpenCulturas Next”

Why a fresh design was necessary

OpenCulturas started with a plain, rather mobile-only base theme, assuming that projects built on top would prefer to build an individual design (“theme” in technical terms) anyways. We guessed wrongly. It turned out that integrators either did not have dedicated Drupal expertise and found it hard to understand the principles. 

On the other hand using the OpenCulturas Base theme with some CSS customizations does not really result in a website with a look + feel people would expect from an arts + culture platform. Internally, we call the legacy design “the swimlane” when talking about its constraining narrowness.

Eventually there’s the technology: The base theme is using a lot of meanwhile deprecated SASS patterns. And admittedly it never really provided a good base for a sub-theme, making it extra hard to build on top of it. 

Principles of the new design

• Easily adjustable—should not require more than some basic CSS knowledge
• Accessible and inclusive—should not impose barriers of any kind, serve all people likewise
• Self-explaining—provide solid theme documentation; framework knowledge should not be a precondition

Read more about how we are achieving enhancements further down.

Our design decisions: your options

In the aftermath of many consultation talks and looking at the different design decisions that had been made by site owners, we decided to provide more design options out-of-the-box. 

Hero section layouts

There are now 4 pre-built designs you can choose from. Plus one “custom” variant to build a custom grid from. 

Untouched is the title component where you can still configure whether the profile image or the “type” label should be included.

Easily adjustable: change the look and feel with just a few lines of text

No special technology skills should be required to adjust OpenCulturas to a basic brand design. Besides the logo, these design assets contribute a lot to the overall design character: colors, fonts, borders and spacings. 

Only some basic CSS knowledge is required to adjust a freshly installed OpenCulturas. Like it's always been, CSS variables (technical term: custom properties) can be overridden with a CSS injector. A sample to start from is provided. The new design provides a lot more variables. If you like you can now even modify the overall teaser design (borders, background, shadow etc.) in the same place where you had added your custom brand colors.

New variable font: Montserrat

Variable fonts are a blessing for page load performance. Instead of loading several styles of a font family (regular, bold, bold-italic), you can modify just a single font (provided this technique is build-in). Montserrat by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral and Jacques Le Bailly is such a font. 

Choose a random thickness between 100 (Thin) and 900 (Black) and give your site a unique look just with typography. We do not intend to tell you what looks modern and what not. Have a look at the following headline weight examples and decide for yourself. 

How about individual fonts?

We all know: it is not recommended to load a font from a third party without user consent. Montserrat is included in your OpenCulturas setup, no cookie and no third party involved. 

In case you want to use your corporate font but you are unsure how to deliver it from your own webserver, contact us!

New icons: Phosphoricons

OpenCulturas Next says goodbye to the FontAwesome icon font dependency and says hello Phosphoricons by Tobias Fried and community contributors. 

We have radically changed how icons are integrated. No more adjustments after breaking changes with a new font release. From now on there are two ways to change the icons in your OpenCulturas Next design:

• Simple: Place your custom SVGs in a dedicated folder and rewrite the individual CSS placeholders to use those files instead.
• Advanced: In a custom theme based on OpenCulturas Next, drop new or changed icons in a dedicated folder and run a preprocessor.

In any case, read the dedicated Readme file.

Enhancements to design even more accessible and inclusive

The new design should work much better with right-to-left (RTL) languages. While we do not yet know of an installation in e.g. Hebrew or an Arabic language, we had been aware of some physical values in the CSS that would need adjustments for RTL languages. OpenCulturas Next got rid of that by consistently styling with logical values instead of physical values. One example: instead of positioning the bookmark button “right” to the title, it is now positioned “at the end of the reading direction”.

We continue to have a focus on building web pages that care for assistive technologies like screen readers, keyboard-only navigation etc. The dark mode option introduced in 2025 is fully integrated, too (of course). In addition to that, the new theme introduces a broader use of icons. This shall assist people with distractions or language barriers to spot the right information or interaction option.

New layout options—new dependency and a new challenge

Moving away from “the swimlane” layout means making use of more available screen space (while still respecting the smaller space on smartphones and tablet computers). 

However, the given pages are built up completely linear, one component below the other. No good start for a design that has a lot of space to place components beside each other. 

So we decided to use Drupal’s layout builder (see below) and we are introducing a new building block principle. There is a new content element Section wrapper serving two purposes: 

• Allowing custom headline, intro text and a “more link” for views and further elements
• Option to set those new context fields horizontally in line with a view on wider screens

If a custom headline is present, any pre-defined headline in a given view (e.g. “Locations” in the frontpage locations view) disappears. Likewise with a custom “more link”. This building block can be used in the legacy theme as well but you'd rather not try and set the intro “side by side” in the swimlane.

This principle is available in the given Teaser wrapper, too. No more adding an extra Text block for a custom headline.

Limiting text width

Confining copy text to a readable length is essential in wide layouts. But such paragraphs would look awkward when horizontally followed by too much whitespace. 

We optimized the default article and FAQ layout by moving the copy text to the optical center and out-denting media assets as well as some content elements below the body text.

Since Basic pages are used for both landing pages and pages with only a lot of copy text, we could not settle copy text layout rules that would be suitable for both use cases. Instead, we added a new option to the “layout switch” field. Use that to optimize the layout of e.g. your privacy policy or legal information page.

Layout builder

OpenCulturas is now benefitting from Drupal's built-in Layout builder, allowing site-builders to easily change the layout of each content type (and taxonomy type). With more horizontal space available on larger screens, you can now decide where to place each structured data in the default layouts.

OpenCulturas is not yet supporting custom layouts on a per-content level. However, this feature is on the roadmap.

Utility classes for layout builder blocks

Some expert tweaks to layout sections and blocks can easily be achieved by simply setting a custom class. Have a look at the Readme file in the theme folder or join us at an OpenCulturas Dojo for a live demo.

The challenge

Layout builder displays are different from what you might have seen in your OpenCulturas page layouts so far. Therefore we had to find a solution how to switch the layouts in a given installation without destroying adjustments you might have made so far. Switching to the new design should not be a one-way decision. You can still roll back.

We have developed settings to switch to a layout builder layout for every entity bundle (nodes and taxonomy terms). However, we strongly recommend to test the settings in a staging environment, not directly on a live website. 

Contact us when you need a temporary staging setup.

Manual changes you should consider

To wrap it up: after updating OpenCulturas, back up the site and give the new theme a try. Besides making decisions around the theme settings and adjusting custom properties, you (or your service provider) should consider the following site-building recommendations:

• Image styles: You might want to change the sizes of “Header image” and “Teaser image big” to better suit your layout decisions.
• Optionally add a map to your Location type term pages: The view containing this new dedicated display is not updated automatically or maybe you had copied it anyways. There is a new “Locations map by term attachment” display in the locations view in profile/config/install/views.view.locations.yml
• Check your Frontpage and “Related *” views and maybe adjust the number of teasers. We left the “6 items” defaults but some section might look better with 4 or 8 items.
• In case you are using the Entity reference: nodes view (/admin/structure/views/view/entity_reference_node/edit/er_node_references), please note that there is a new display you can use to filter references by. Iit is now possible to “mention” a date node in articles. If you do not intend to allow that, change the view in the field settings.

For theme developers: Self-explaining base theme

A personal view by the author: I have a long professional history of stepping into given projects to fix design issues. There are so many web design systems out there that I literally had to study a new styling philosophy every second time. And ever so often I had wished for a documentation listing the principles and guiding newcomers where to find what.

Therefore I have written such a theme documentation for OpenCulturas Next. Just the basics, no “read the f*ing manual” links to the complete beginner’s guide. Having the odd WordPress theme developer in mind, totally capable of building a robust and beautiful web design, but new to Drupal theming conventions. Additionally, all SCSS files contain hints to other files that have a special relation.

This also applies to creating a sub-theme, which now works exactly as intended (inheriting styling, using the same breakpoint mixins, copying only what needs to be changed). Basically, all you have to do is copy a command into the console, and your own sub-theme is ready to go. You’ll find it all in the starterkit’s Readme file.

Now I hope you find it convenient. If the guide is unclear or leaves questions open, please let me know.