Sub-theming Folwell

Drupal 10 sub-themes are very closely related to standard Drupal themes. They work in a similar way to standard themes, with one exception – they inherit the parent theme’s resources. A sub-theme is a child of its parent theme – in fact, you can chain themes so a sub-theme can be a child of another sub-theme, that acts as its parent, with resources passed down the chain.

Using the sub-theme, you can create separate libraries for the stylesheets and javascript that then enhance the Folwell base theme without compromising the integrity or upgrade path of the base theme.

Sub-theme file and folder structure

The basic configuration requires:

  • a sub-theme folder in the Drupal ‘themes’ folder
  • an info file that describes the sub-theme region structure, libraries, and parent theme
  • a library file that describes the stylesheets and any javascript used

1. Create a sub-theme

When you create a sub-theme, its file and folder structure will resemble the following:

themes \ 
    + name-of-your-sub-theme \
       + name-of-your-sub-theme.libraries.yml

* You can name your theme whatever you wish, just replace “name-of-your-sub-theme” including the folder name too.

2. ".info.yml" code

The .info file contains the following code.

name: Name-of-your-subtheme
type: theme
description: This is a sub theme of Folwell
# Defines the base theme
base theme: folwell
core_version_requirement: ^9 || ^10
# Defines libraries group in which we can add css/js.
- name-of-your-subtheme/global-styling
# Regions
identity: Site Identity
header: Navigation
featured: Featured
breadcrumb: Breadcrumb
sidebar_first: 'Sidebar first'
content: Content
sidebar_second: 'Sidebar second'
footer_top: 'Footer Top'
footer_bottom: 'Footer Bottom'

3. ".libraries.yml" code

Include name-of-your-sub-theme.libraries.yml file to add css/js in the global-style group (this is defined above, in the libraries key). Use the following code:

    version: VERSION
       - core/jquery

4. Enable your sub-theme

  1. Go to "Appearance" (/admin/appearance) on the main Administration menu of your site.
  2. Your sub-theme should be listed under the Uninstalled Themes section
    • If it’s not shown, check that you’ve deployed code to correct branch (dev code for dev site...etc) and cleared the site cache.
    • If it still doesn’t show, send an email to to start a ticket.
  3. Click the Install and set as default option to enable it as the main theme for your site.

Setting up your sub-theme

Once you’ve enabled your sub-theme, you’ll need to fill out the configuration options in order to have a working University header.

Folwell configurations

After you activate your sub-theme, go to the sub-theme settings tab. You will see your sub-theme listed on the far right.

appearance example

In the “Global settings” section, choose your configuration options for your sub-theme.

sub theme global settings example

Header options

These options are used to build the required University header. Folwell has these set by default, but when you create a sub-theme, these options need to be reset to avoid errors.

header options example

Unit/Site identity

See the usage tab at the bottom of the Unit/Site Identity page for instructions on setting up your site identity.