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