These are the steps I used to make a Sub-Theme for the MAYO theme for Drupal 8. I'm using MAYO 8.x-1.2 here with Drupal 8.1.0.

  1. Naming it Zub MAYO so created a folder named /themes/zubmayo and copied these items from the MAYO theme:
    • mayo.info.yml (changed name to zubmayo.info.yml)
    • mayo.libraries.yml (changed name to zubmayo.libraries.yml)
    • mayo_logo.png (renamed it logo.png and don't remember why)
    • logo.svg
    • screenshot.png
    • The /themes/mayo/color directory and all it's contents.
    • The /themes/mayo/config directory and all it's contents. Change the 2 files involved to reflect your sub-theme name.
    • The /themes/mayo/images directory and all it's image files.
    • The /themes/mayo/css directory and only 2 files. These are colors.css, and admin-layout-settings.css. Add an empty file for future custom styles. Mine is zubmayo.css.
  2. Edited zubmayo.info.yml at the top to look like this
    name: Zub MAYO
type: theme
description: 'This is a sub-theme  of MAYO.'
version: VERSION
core: 8.x
base theme: mayo
libraries:
  - zubmayo/base

    and left the rest of the file the same.

  3. Edited zubmayo.libraries.yml to look like this:
    base:
  version: VERSION
  css:
    theme:
      css/colors.css: {}
      css/zubmayo.css: {}

color.preview:
  version: VERSION
  css:
    theme:
      color/preview.css: {}
      css/admin-layout-settings.css: {}
  js:
    color/preview.js: {}
    js/mayo.js: {}
  dependencies:
    - color/drupal.color
#    - core/drupalSettings

maintenance-page:
  version: VERSION
  css:
    theme:
      css/maintenance-page.css: {}
      css/colors.css: {}
  dependencies:
    - system/maintenance
    - zubmayo/base

responsive-layout:
  version: VERSION
  css:
    theme:
      public://mayo/zubmayo_files/zubmayo.responsive.layout.css: {}
  dependencies:
    - zubmayo/base
  4. Go to admin/appearance and do "Install and set as default" for Zub Mayo. Enter Zub Mayo theme settings and do a "Save" so it can create a couple of .css files. You might need to clear the cache.

Comments

kbo’s picture

kbo commented

It was very helpful

mats’s picture

mats commented

Clarification - In config/ it's the file names that needs to be changed.

For 8.x-1.2 libraries/base have been replaced with /global-styling
So in zubmayo.libraries.yml you'll find global-styling: instead of base:

dontai’s picture

dontai commented

I followed your instructions, first using base: in both *.info.yml and *.libraries.yml, and then using global-styling: The theme does come up and render well, but when I try to save theme settings, it gives me the message "Please fill out this field." Dumped the cache, this had no affect. I have not changed anything else.

Also on a content page my Sidebar first and Sidebar second display below the middle content area. I had this issue with the original theme, but then after fiddling it somehow resolved. With the sub-theme this is not resolving.

Fixed: Uninstalled sub-theme, reinstalled, dumped cache and now all it works. Can save settings, Sidebar first and Sidebar second display correctly.

In both *.info.yml and *.libraries.yml I am using global-styling: and not base:

Thanks, your instructions are clear and work for Mayo 8.x-1.3 D8.2.6, apart from the minor global-styling: change.