Note: this is an update to my Drupal 9 Olivero sub theme creation
Drupal 10 Olivero
New Olivero theme is a great new front theme introduced with Drupal 9.1. It's a great refreshment to the pretty old Bartik theme. Bartik was updated with Drupal 8 but still has a kind of an old feel to it, as it was created in 2010!
Create Drupal 10 Olivero sub theme
On a previous article I presented a simple solution for a quick Olivero overriding, as I'm using for this website. My goal is to have something that allow me minimal changes, like some padding and colors. As the primary color is now a config in Drupal 10 it's almost only some minimal padding fixes that I need, thanks Drupal ;)
My proposition for a quick Drupal Olivero sub theme
My proposition is a sub theme, so I can add any css, js and override any template file.
The main trick is to use variables.pcss.css
file to customize Olivero padding and some sizes for our needs.
To achieve this, we need to copy and build the css files from Olivero theme, we simply need to edit the variables.pcss.css
inside Olivero theme and build the css.
Then copy the result to our sub theme and be sure all css Olivero css files are replaced by ours, which will be done in file olivero_sub_theme.theme
Final sub theme for Drupal 10
Here is the basic structure of the theme:
web/themes/custom/olivero_sub_theme/
├── css/
| ├── theme.css
| └── variables.pcss.css
├── js/
| └── theme.js
├── scripts/
| └── build.sh
├── templates/
| └── ... your templates override
├── olivero_sub_theme.info.yml
├── olivero_sub_theme.libraries.yml
├── olivero_sub_theme.theme
├── favicon.ico
└── logo.svg
You can download my sample project for Drupal 10 from here.
Replace occurrences of olivero_sub_theme in olivero_sub_theme.theme
and olivero_sub_theme.info.yml
, then rename files prefix olivero_sub_theme with your theme name.
The next step for css is to edit variables.pcss.css
with your changes and build the css. The best way is to do that directly from Olivero folder, you need to have yarn and install build dependencies, this is where a simple small script build.sh
will help us:
#!/usr/bin/env bash
#
# Generate and copy Olivero css and fonts to our theme for override.
_my_sub_theme=${1:-"olivero_sub_theme"}
if [[ ! -d web/core/themes/olivero ]];
then
echo -e "[ERROR] Can not find Olivero theme, are you at the root of Drupal?"
exit 1
fi
if [[ ! -d web/core/node_modules ]];
then
yarn --cwd web/core install
fi
cp -r web/core/themes/olivero/css/ web/core/themes/olivero/css.orig/
cp -f web/themes/custom/$_my_sub_theme/css/variables.pcss.css web/core/themes/olivero/css/base/variables.pcss.css
# Build the theme
yarn --cwd web/core build:css
rm -rf web/themes/custom/$_my_sub_theme/css/base/*.css web/themes/custom/$_my_sub_theme/css/components web/themes/custom/$_my_sub_theme/css/layout
cp -r web/core/themes/olivero/css web/themes/custom/$_my_sub_theme/
cp -r web/core/themes/olivero/fonts web/themes/custom/$_my_sub_theme/fonts
rm -f web/themes/custom/$_my_sub_theme/css/**/*.pcss.css
# Set back Olivero variable file.
rm -rf web/core/themes/olivero/css/
mv web/core/themes/olivero/css.orig/ web/core/themes/olivero/css/
From the root of the project you can launch the script with your theme machine name (ie: replace olivero_sub_theme):
web/olivero_sub_theme/scripts/build.sh olivero_sub_theme
The script will install dependencies, build the css and copy files to your sub theme.
Off course you need to run this script each time you change variables.pcss.css
. But there is no need to run when changing any other file in the sub theme.
Minimal files content
Minimal info file olivero_sub_theme.info.yml
:
name: My Olivero sub theme
type: theme
base theme: olivero
description: Olivero sub theme with minimal overrides, custom js and templates.
package: Custom
core: 9.x
core_version_requirement: ^9 || ^10
libraries:
- olivero_sub_theme/global-styling
# Keep main Olivero regions to ease update.
regions:
header: Header
primary_menu: 'Primary menu'
secondary_menu: 'Secondary menu'
hero: 'Hero (full width)'
highlighted: Highlighted
breadcrumb: Breadcrumb
social: Social Bar
content_above: Content Above
content: Content
sidebar: 'Sidebar'
content_below: 'Content Below'
footer_top: 'Footer Top'
footer_bottom: 'Footer Bottom'
Minimal info file olivero_sub_theme.libraries.yml
:
# Drupal dev Olivero sub theme library.
global-styling:
js:
js/theme.js: {}
css:
base:
css/theme.css: {}
The olivero_sub_theme.theme
file will be used to replace Olivero css files.
<?php
/**
* @file
* Functions to support theming for My Sub Theme.
*/
use \Drupal\Core\Asset\AttachedAssetsInterface;
/**
* Implements hook_css_alter().
*
* Replace all css from Olivero by this theme css.
*/
function olivero_sub_theme_css_alter(&$css, AttachedAssetsInterface $assets) {
$oliveroThemePath = \Drupal::service('extension.path.resolver')->getPath('theme', 'olivero');
$myThemePath = \Drupal::service('extension.path.resolver')->getPath('theme', 'olivero_sub_theme');
// Replace all css files by our files.
foreach ($css as $cssFile => $value) {
if (strpos($cssFile, $oliveroThemePath) !== FALSE) {
$css[$cssFile]['data'] = str_replace($oliveroThemePath, $myThemePath, $css[$cssFile]['data']);
}
}
}