Drupal 8 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.
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
1. Create a sub-theme
When you create a sub-theme, its file and folder structure will resemble the following:
+ name-of-your-sub-theme \
2. ".info.yml" code
The .info file contains the following code.
description: This is a sub theme of Folwell
# Defines the base theme
base theme: folwell
# Defines libraries group in which we can add css/js.
sidebar_first: 'Sidebar first'
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:
4. Enable your sub-theme
- Go to "Appearance" (/admin/appearance) on the main Administration menu of your site.
- 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 firstname.lastname@example.org to start a ticket.
- 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.
After you activate your sub-theme, go to the sub-theme settings tab. You will see your sub-theme listed on the far right.
In the “Global settings” section, choose your configuration options for your sub-theme.
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.
See the usage tab at the bottom of the Unit/Site Identity page for instructions on setting up your site identity.