Technically Olives does not support sub-theming, in this document I'll walk you through copying a Olives into a new theme and making changes to the CSS and JavaScript.
# How to sub-theme Olivesimagined.
Technically Olivesimagined does not support sub-theming, in this document I'll walk you through copying a Olivesimagined into a new theme and making changes to the CSS and JavaScript.
## Why no sub-theming of Olives?
Olives isn't quite stable in Drupal 9. We're still making lots of changes to the markup, which can screw up any CSS overrides that you have in place. Even after reaching stable, we likely won't support sub-theming immediately because of various non-critical technical debt issues that we want to fix.
## Why no sub-theming of Olivesimagined?
Olivesimagined isn't quite stable in Drupal 9. We're still making lots of changes to the markup, which can screw up any CSS overrides that you have in place. Even after reaching stable, we likely won't support sub-theming immediately because of various non-critical technical debt issues that we want to fix.
## Steps to copy Olives into a new theme.
## Steps to copy Olivesimagined into a new theme.
Instead of sub-theming, we're going to copy the core theme into a new theme.
You can do this using manual steps or by using the included script.
@ -31,18 +31,18 @@ Note, this is only tested on MacOS, and is heavily reliant on code from Stack O
### Copy the theme directory.
1. Copy the `/core/themes/olives` directory into the `/themes/` directory.
1. Copy the `/core/themes/olivesimagined` directory into the `/themes/` directory.
2. Rename the files in the new theme.
1. Change the directory name from `olives` to the new theme name (in these example, we'll use `coco`). So rename the `olives` directory to `coco` (Coco is my dogs name).
2. Rename the `olives.info.yml` file to `coco.info.yml`
3. Rename `olives.breakpoints.yml` file to `coco.breakpoints.yml`
4. Rename `olives.libraries.yml` file to `coco.libraries.yml`
5. Rename `olives.theme` file to `coco.theme`
6. Rename all of the `olives` config within the theme's `config` directory to `coco`. For example, rename `block.block.olives_account_menu.yml` to `block.block.coco_account_menu.yml`. There are a number of files in there to rename.
7. Rename `/src/OlivesPreRender.php` to `/src/CocoPreRender.php`.
1. Change the directory name from `olivesimagined` to the new theme name (in these example, we'll use `coco`). So rename the `olivesimagined` directory to `coco` (Coco is my dogs name).
2. Rename the `olivesimagined.info.yml` file to `coco.info.yml`
3. Rename `olivesimagined.breakpoints.yml` file to `coco.breakpoints.yml`
4. Rename `olivesimagined.libraries.yml` file to `coco.libraries.yml`
5. Rename `olivesimagined.theme` file to `coco.theme`
6. Rename all of the `olivesimagined` config within the theme's `config` directory to `coco`. For example, rename `block.block.olivesimagined_account_menu.yml` to `block.block.coco_account_menu.yml`. There are a number of files in there to rename.
7. Rename `/src/OlivesimaginedPreRender.php` to `/src/CocoPreRender.php`.
3. Do a global search and replace for the name. When you search and replace, be case-sensitive
1. Search and replace `Olives` with `Coco`.
2. Search and replace `olives` with `coco`.
1. Search and replace `Olivesimagined` with `Coco`.
2. Search and replace `olivesimagined` with `coco`.
4. Within the `coco.info.yml` file, replace `experimental: true` with `core_version_requirement: ^9`.
5. Move all of the "block" config files (starting with "block") from `config/install` to `config/optional`.
6. Move the `core.date_format.coco_medium.info.yml` from `config/install` to `config/optional`.
@ -63,7 +63,7 @@ Note, this is only tested on MacOS, and is heavily reliant on code from Stack O
### Enable the new theme.
You should now see the new theme listed under `appearance > themes`. Install the new theme and set it to be the default.
It should look exactly like the default core Olives theme.
It should look exactly like the default core Olivesimagined theme.
### Install Node dependencies.
First make sure you have [Node](https://nodejs.org/en/download/), and [Yarn](https://classic.yarnpkg.com/en/docs/install/) installed.