Set up the Sub-theme

We're building a simple sub-theme off of Olivero.

I use this page as a reference (under Creating sub-theme manually):

https://www.drupal.org/docs/theming-drupal/creating-sub-themes

Set up the folders and files.

  • Under <docroot>/themes create a folder called 'custom.'
  • In the new 'custom' folder, create the folder 'olivero_subtheme' (use the underscore instead of a dash)
  • In the 'olivero_subtheme' folder, create the file, olivero_subtheme.info.yml
  • In the same folder (olivero_subtheme) create the file, 'olivero_subtheme.libraries.yml'
  • In the 'olivero_subtheme' folder, create a folder called 'css'
  • Go to the olivero_subtheme/css folder and create the file, 'style.css'

Your directory structure should look like this:

folders

Now, to update the files:

olivero_subtheme.info.yml

name: Olivero Sub-theme
type: theme
description: This is a sub theme of Olivero - Only use for demo purposes
core_version_requirement: ^8 || ^9 || ^10
# Defines the base theme
base theme: olivero
# Libraries
libraries:
  - olivero_subtheme/global-styling
#Regions
#  Regions are not inherited from the base theme. You need to go to the base theme and copy those regions
#  then add them to your sub-theme.
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'

olivero_subtheme.libraries.yml

global-styling:
  css:
    component:
      css/style.css: {}

olivero_subtheme/css/style.css

h1 {
    color: #333;
}

You can change the h1 color to something like #ff0000 in order to make sure your css is working. The h1's will now be red.

Clear the cache.

When things are working, we can move to the next step.