We can take a closer look at Classy by navigating to the core/themes/classy folder of our Drupal instance. At first glance, the theme structure of Classy is quite organized. It is well-structured with folders for CSS, images, and a multitude of Twig templates. Each template has been organized based on its functionality as follows:
Everything so far screams best practices and is one of the major benefits of creating a subtheme that uses Classy as a base theme. However, we can still add our own regions, libraries, and Twig templates as we would for any other theme. However, in some cases, we may find ourselves also needing to override libraries with our own CSS or JS without modifying any assets directly located in the base theme.
So when we talk about overriding a library, we have options to replace the entire library, replace an asset with another asset, or remove an asset or entire library simply by using libraries-override within our theme's *.info.yml file.
Take the status message block as an example. Anytime we edit a block, a node, or anything in Drupal that has an edit form, once we click the save button, we will see a status message letting us know the outcome of our action.
In this case, the default styling for the status message is coming from the base theme Classy. In fact, if we look at the classy.libraries.yml file located in the core/themes/classy folder, we can see an entry pointing to css/components/messages.css:
messages:
version: VERSION
css:
component:
css/components/messages.css: { weight: -10 }What if our subtheme calls for different styling? If we want to override messages.css with our own version of the file, we can do so using libraries-override.
All we need to override this file is a *.libraries.yml file for our subtheme, a library entry pointing to our own messages.css file, and a reference within our *.info.yml file telling Drupal what we want to override.
Let's override Classy's messages styling by following these steps:
- Copy the
cssfolder from theChapter04/start/themes/sassyfolder and place it within thethemes/sassyfolder. - Create a new
sassy.libraries.ymlfile within thethemes/sassyfolder. - Add the following library entry to
sassy.libraries.yml:messages: version: VERSION css: theme: css/messages.css: {} - Save
sassy.libraries.yml. - Open
sassy.info.ymland add the following configuration:libraries-override: classy/messages: sassy/messages - Save
sassy.info.yml.
Now we can clear Drupal's cache and then browse our homepage where we can edit the homepage by following these steps:
- Click on the Edit tab to open the Welcome to Drupal 8 Edit form.
- Click on the Save and keep published button.
Once back on the homepage, we should see that the status message is now picking up our messages.css rules and is now overriding the messages.css that was originally coming from the Classy base theme.
It is hoped that by now, we can see how libraries-override will come in handy whenever we want to replace assets injected from base themes, modules, or even Drupal core. For more information and examples, such as libraries-override, feel free to review the documentation at https://www.drupal.org/theme-guide/8/assets.
As we progress to creating custom themes, we will find we often need to add the JS functionality. Although we will not be covering it in this chapter, we will take a look at working with JS libraries in great detail in Chapter 6, Theming Our Homepage.