Skip to main content
Home
Anthony Media

Main navigation

  • Home
  • Build a Block

Breadcrumb

  1. Home
  2. Build a Basic Custom Block Component to Use in Layout Builder
  3. Theming

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.

Book traversal links for Set up the Sub-theme

  • Theming
  • Up
  • Add Sub-theme Templates

Book navigation

  • A Common Component Pattern
  • Create a Landing page Content Type
  • Set Up Your Toolkit
  • Build a "Text with Media" Component
  • Theming
    • Set up the Sub-theme
    • Add Sub-theme Templates
Powered by Drupal