rdrew
d23cdae9c0
|
4 weeks ago | |
---|---|---|
.yarn | 1 year ago | |
config | 4 weeks ago | |
css | 1 month ago | |
css_bk | 12 months ago | |
fonts | 1 year ago | |
images | 1 year ago | |
js | 4 weeks ago | |
scripts | 1 year ago | |
src | 1 year ago | |
templates | 4 weeks ago | |
tests/src | 1 year ago | |
.gitignore | 11 months ago | |
.nvmrc | 1 year ago | |
.yarnrc.yml | 1 year ago | |
README.md | 1 year ago | |
bs.js | 1 year ago | |
composer.json | 5 months ago | |
download | 1 month ago | |
favicon.ico | 1 year ago | |
logo.svg | 1 year ago | |
olives.breakpoints.yml | 1 year ago | |
olives.info.yml | 1 year ago | |
olives.libraries.yml | 4 weeks ago | |
olives.post_update.php | 1 year ago | |
olives.theme | 4 weeks ago | |
package.json | 1 year ago | |
screenshot.png | 1 year ago | |
test.txt | 1 year ago | |
theme-settings.php | 1 year ago | |
yarn.lock | 1 year ago |
README.md
How to sub-theme Olives.
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.
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.
Steps to copy Olives 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.
Use the provided script to copy the theme
Run the build script.
Note, this is only tested on MacOS, and is heavily reliant on code from Stack Overflow. Contributions are welcome!
- Copy this repository into the Drupal's
/themes/
directory. - Rename this directory into the your themes name.
- Use the terminal to
cd
into the theme's directory. - run
sh ./build.sh
to start the process to generate the theme. - Enter the name of the theme when prompted (example:
Mytheme
).
Manually copy theme and rename files
Copy the theme directory.
- Copy the
/core/themes/olives
directory into the/themes/
directory. - Rename the files in the new theme.
- Change the directory name from
olives
to the new theme name (in these example, we'll usecoco
). So rename theolives
directory tococo
(Coco is my dogs name). - Rename the
olives.info.yml
file tococo.info.yml
- Rename
olives.breakpoints.yml
file tococo.breakpoints.yml
- Rename
olives.libraries.yml
file tococo.libraries.yml
- Rename
olives.theme
file tococo.theme
- Rename all of the
olives
config within the theme'sconfig
directory tococo
. For example, renameblock.block.olives_account_menu.yml
toblock.block.coco_account_menu.yml
. There are a number of files in there to rename. - Rename
/src/OlivesPreRender.php
to/src/CocoPreRender.php
.
- Change the directory name from
- Do a global search and replace for the name. When you search and replace, be case-sensitive
- Search and replace
Olives
withCoco
. - Search and replace
olives
withcoco
.
- Search and replace
- Within the
coco.info.yml
file, replaceexperimental: true
withcore_version_requirement: ^9
. - Move all of the "block" config files (starting with "block") from
config/install
toconfig/optional
. - Move the
core.date_format.coco_medium.info.yml
fromconfig/install
toconfig/optional
.
Copy the CSS and JavaScript compilation scripts.
Copy all of the files this repository into the new theme. These scripts will enable you to make change in the source files and have them compile down to regular CSS and JS.
The most important files are:
package.json
fileyarn.lock
filescripts/
directory - this contains the CSS and JS compilation scripts.
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.
Install Node dependencies.
First make sure you have Node, and Yarn installed.
Then run yarn install
to install the dependencies.
Make a change to the CSS styles.
Within the theme you'll notice both regular *.css
files and also *.pcss.css
files. The files that you want to modify are the *.pcss.css
files. These PostCSS files will be made into browser-compatible CSS by running the compilation scripts.
- Open up the
/css/base/variables.pcss.css
. - Change some of the blue color's hex values down near line 132.
- To generate the CSS run
yarn build:css
.
Note you can also watch CSS by running yarn watch:css
.
See the scripts section within the package.json
file for more commands.
Make a change to the JavaScript.
Similar to CSS, there are two JavaScript files for each file:
*.es6.js
- These are the files that you will modify. They are written using modern JavaScript.*.js
- These are the IE11 compatible JavaScript files generated by running the compilation scripts. Do not directly modify these files.
You compile changes to the JavaScript files by running yarn watch:js
and yarn build:js
.
How to remove IE11 (and Opera Mini support).
Internet Explorer 11 and Opera Mini do not support CSS Variables (aka CSS Custom properties). This results in making new features (such as dark mode) very hard to implement. To remove support for these browsers.
- Remove
"last 1 Explorer version",
from line 95 inpackage.json
. - Remove
"last 1 OperaMini version",
from line 99 inpackage.json
. - Search the codebase and remove instances of importing the
variables.pcss.css
file. Examples:@import "../base/variables.pcss.css";
fromcss/components/action-links.pcss.css
@import "../../base/variables.pcss.css";
fromcss/components/navigation/nav-button-mobile.pcss.css
- Run
yarn build
to regenerate the compiled CSS and JavaScript.