As the name suggests, 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.
To create a sub-theme, it must be defined, like any other theme and declared using the base theme key.
Example of a sub-theme file and folder structure
When you create a sub-theme, its file and folder structure will resemble the following:
themes \
+ pixelnine\
+ pixelnine.info.yml
+ pixelnine.libraries.yml
The info file is named pixelnine.info.yml (you can name your theme whatever you wish, just replace pixelnine with your own choice throughout) and contains the following code:
name: Pixelnine type: theme description: This is a sub theme of Basic core: 8.x # Defines the base theme base theme: basic # Defines libraries group in which we can add css/js. libraries: - pixelnine/global-styling # Regions regions: header: Header featured: Featured content: Content sidebar_first: First sidebar sidebar_second: Second sidebar footer: Footer
Include a pixelnine.libraries.yml file to add css/js in the global-style group (this is defined above, in the libraries key). Use the following code:
global-styling:
css:
component:
css/style.css: {}
Nesting sub-themes
When creating a sub-theme as a child of another sub-theme, the info file must define the sub-theme being extended as the base theme.
For example:
name: Pixelnineplusone type: theme description: This is a child sub theme of Pixelnine core: 8.x# Defines the base theme base theme: Pixelnine
If you notice any problems or if you need any help, please open a new support ticket from your HostPapa Dashboard. More details on how to open a support ticket can be found here.
