Drupal 8 Sub Themes and Stylesheets

Creating a Drupal 8 Sub Theme

It has been about a month since I started an exercise to upgrade to migrate from Drupal 6 to Drupal 8 using the migration tools provided in Drupal.

In the time since my last post on the subject, I have been concentrating on updating the look and feel of the theme. Note that you can see a listing of all my posts here.

I have to say that I am impressed with the ability in Drupal 8 to create a Child Theme of an existing Theme and then create separate libraries for the stylesheets and javascript that then enhance the base theme without compromising the integrity or upgrade path of the base theme.

Creating a Sub Theme was one of the resources I used.

For this example , the sub theme will be called hartleyvoicescouk

Create Sub Theme Info and Library Files

The basic configuration requires:

• a sub theme folder in the Drupal ‘Themes’ Folder (Note this is not in the ‘Core’ folders)
• an info file to which describes the sub theme region structure, libraries and parent theme
• a library file, which will describe the stylesheets and any javascript used

I used Adding stylesheets (CSS) and JavaScript (JS) to a Drupal 8 theme as a reference.

hartleyvoicescouk sub theme folder structure

The Bartik base theme was used as a basis for this Sub theme.

hartleyvoicescouk.info.yml file

name: hartleyvoicescouk
type: theme
description: This is a hartleyvoices sub theme of Bartik
core: 8.x
# Defines the base theme
base theme: bartik
# Defines libraries group in which we can add css/js.
libraries:
  - hartleyvoicescouk/global-styling
# Regions
regions:
  header: Header
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  content: Content
  sidebar_first: First sidebar
  sidebar_second: Second sidebar
  featured: Featured bottom first
  footer: Footer

hartleyvoicescouk.libraries.yml file

global-styling:
  css:
    theme:
      css/style.css: {}
  js:
      js/yahoomedia/hartleyvoicescouk.js: {}

Activate the Sub Theme

Sub Theme Stylesheet - style.css

This was the tricky and time consuming part, mainly as for each of the style elements I wanted to customise, I needed to find the related element in the Parent Theme. These were generally found in one of the css files in the bartik -> css -> components folder

within the hartleyvoicescouk css folder a style.css file contained all the custom css for the sub theme.

Hartley Voices with Drupal 8

This was quite good….. but….

Drupal 8 Shortcoming - Standard Support for Basic HTML 5 Audio Elements

I came across a shortcoming with the Drupal 8 that I cannot resolve. Hartley Voices is a live music events agency and so there is a need to support audio / mp3.

Currently, the Hartley Voices site is running a version of the Yahoo Media Player that I customised to use since Yahoo ended support of it’s media player. Details of how I use the Yahoo Media Player at my Git Page. The simplicity and minimalism is, I feel still unsurpassed.

I was very surprised that Drupal, as a ‘modern’ CMS does not support standard HTML5

Options Going Forward

Since using Jekyll as a static site generators and prose.io as an online editor, I am now seriously considering converting the entire Drupal 6 site to Jekyll or potentially Hugo.