Subthemes

Drupal 8

How to

Sub-theme?

Sub-themes are just like any other theme, with one difference: they inherit the parent theme's resources.

 

There are no limits on the chaining capabilities connecting sub-themes to their parents. A sub-theme can be a child of another sub-theme, and it can be branched and organized however you see fit.

 

This is what gives sub-themes great potential.

 

https://www.drupal.org/docs/8/theming-drupal-8/creating-a-drupal-8-sub-theme-or-sub-theme-of-sub-theme

Why a Sub-theme?

We don't want to make edits to our base theme: in case of an update to this theme, we would lose our changes.

 

So we use a Sub-theme that automatically inherits everything from the base theme. We can then customise our Sub-theme without hacking the base theme.

How to

make a sub-theme

Starterkit?

Some themes - such as bootstrap, omega, zurb foundation - include a starterkit.

 

A starterkit is basically a ready-made sub-theme, specifially created with the base theme in mind.

 

When you encounter a theme with a starterkit, follow the instructions usually found in the themes README.md file.

Creating our own sub-theme

In the next example we will see how to manually create a sub-theme, not based on a starterkit.

Add a base theme

Any theme can be used as a starting point for a new sub-theme. 

 

Suggested starter base themes:

  • core/classy (one of the best starting points)
  • core/bartik (default D8 theme)
  • drupal/nexus (as used in previous classes)

 

Not practical for this guide:

  • drupal/boostrap (has a starterkit)
  • drupal/omega (has starterkit)

Extending base theme

  1. Create a new folder under themes/
    • Give it a sensible name. F.E.:
      • pietermathys_classy
      • yourname_bartik
      • projectname_bootstrap

 

 

The name must be like a machine name:

  • no special characters
  • lowercase
  • no spaces or dashes, only underscores 

 

This is your theme (machine_)name from now on!

Add .info.yml

  1. Use theme machine_name to create .info.yml file
    • f.e.: pietermathys_classy.info.yml

Add to .info.yml

  1. Add these values to the file and customise
name: 'Pieters Classy theme'
type: theme
description: 'Custom sub-theme that extends classy'
core: '8.x'
base theme: classy

libraries:
  - pietermathys_classy/base

Add  .libraries.yml file

  1. Use theme machine_name to create .libraries.yml file
    • f.e.: pietermathys_classy.libraries.yml

Add to .libraries.yml

  1. Add these values to the file
base:
  css:
    theme:
      css/style.css: {}
  js:
    js/custom.js : {}
  dependencies:
    - core/jquery
    - core/drupal

Through the dependencies we load default drupal JS & jQuery

Create CSS/JS files

  1. Add a directory css
    1. Add file: style.css
  2. Add a directory js
    1. Add file: custom.js

Activate the theme

  1. Install & set as default through the Appearance tab

Add a logo.svg

You can add a logo in SVG format directly to the theme. 

  1. Create file: logo.svg
  2. Add it to the theme folder

If you don't have an SVG logo, then upload the logo through the appearance tab in Drupal Admin.

Add a screenshot.png

You can customise the image used on the appearance tab by adding a screenshot.png file to the theme folder:

Done

Time to look at the result and either:

 

1) Cry cause it's not working

  • Make sure you followed the previous steps correctly
  • Look at logs if needed

 

2) Rejoice & start styling

  • Your theme will be empty, time to start adding CSS/JS
Made with Slides.com