How to create an Olivero sub-theme?

I have a Drupal 9.3 installation and have activated the Olivero experimental theme. I need to do some modification in the CSS.

How to create an Olivero sub-theme?

bootstrap_barrio subtheme breaks ckeditor’s media insert in custom block

I’m facing this problem (seems to be producible) in a contrib theme that breaks the ckeditor media insert button on custom blocks in the layout builder of individual nodes…
The javascript error says it’s typically caused by the theme neglecting to include proper html attributes for that entity type, but the theme’s block.html.twig is identical to that template in Bartik. This is a custom subtheme of bootstrap_barrio created with the shell script provided by bootstrap_sass (Barrio highly recommends subtheming that way). Error has been repeated on new D8 and D9 installations, and the full message on page load is:

Uncaught Error: Quick Edit could not associate the rendered entity field markup (with (data-quickedit-field-id="block_content/1/body/en/full")) with the corresponding rendered entity markup: no parent DOM node found with (data-quickedit-entity-id="block_content/1"). This is typically caused by the theme's template for this entity type forgetting to print the attributes.

and while editing a block in the layout builder, clicking ckeditor’s media insert button results in the following error (and the media dialog never opens, the “Loading…” message appears but nothing loads):

Object { message: "nAn AJAX HTTP error occurred.nHTTP Result Code: 500nDebugging information follows.nPath: /media-library?media_library_opener_id=media_library.opener.editor&media_library_allowed_types%5B0%5D=image&media_library_selected_type=image&media_library_remaining=1&media_library_opener_parameters%5Bfilter_format_id%5D=basic_html&hash=Ul_KDXiNyg8Mw95OeXpaIZUYieACO4FlRCUQkle_TCsnStatusText: Internal Server ErrornResponseText: The website encountered an unexpected error. Please try again later.", name: "AjaxError", stack: "@https://atn.ddev.site/core/misc/ajax.js?v=8.9.3:100:32n@https://atn.ddev.site/core/misc/ajax.js?v=8.9.3:643:3n" }

I was very excited about the bootstrap_barrio’s subtheme with sass, gulp, browsersync all configured with bootstrap, but maybe I should switch to radix? I’d much prefer to solve this error though, if anyone has any insight? I don’t know where to begin with javascript debugging 🙁

subsites – Site not working / CSS in sub-theme not working

I’m a Drupal newbie, but hoping someone can assist. The site was working okay, but I’ve tried to implement a sub-theme and things seem to have gotten messed up.

What I was trying to achieve is to include my own CSS/JS files, and figured that a sub-theme seems like the proper way to do it. Well, I did install the sub-theme, but no CSS or JS from the sub-theme was loading (or referenced in the page anywhere). So, I played around some more and eventually stopped the entire site from loading.

So, now I’m getting “The website encountered an unexpected error. Please try again later.”, and the Apache error log says:

"Uncaught PHP Exception Drupal\Core\Asset\Exception\IncompleteLibraryDefinitionException: " 
 Incomplete library definition for definition 'global-styling' in extension 'my_theme'" at ..."

My theme is called “my_theme”, and is meant to be a sub-theme of awesome_zymphonies_theme. Went to loads of places trying to figure out the sub-theme stuff, given the abysmal Drupal documentation, but ended up with a directory called “my_theme“, under /drupal/themes/, and directories of /css/ and /js/, with CSS and JavaScript files in each, respectively, and two files: my_theme.info.yml and my_theme.libraries.yml. Permissions are all okay, and owned by apache:apache.

drwxr-xr-x. 2 apache apache   26 Mar 24 20:30 css
drwxr-xr-x. 2 apache apache   25 Mar 24 20:30 js
-rw-r--r--. 1 apache apache 1300 Mar 24 20:57 my_theme.info.yml
-rw-r--r--. 1 apache apache   86 Mar 24 20:30 my_theme.libraries.yml

The file my_theme.libraries.yml looks like this:

global-styling:
css:
  theme:
    css/my_theme.css: {}

  js:
    js/my_theme.js: {}

The top portion of the my_theme.info.yml file looks like this:

name: My Theme
type: theme
description: Sub-theme of 'Awesome Zymphonies Theme.'
package: core
base theme: awesome_zymphonies_theme
core: 8.x
core_version_requirement: ^8 || ^9

#Libraries
libraries:
  - awesome_zymphonies_theme/bootstrap
  - awesome_zymphonies_theme/global-components
  - my_theme/global-styling

#Regions
regions:
  header: 'Header'
  primary_menu: 'Primary Menu'
  slideshow: 'Slideshow'
  homepagemessage: 'Home page message'
  topwidget_first: 'Top First Widget'
  topwidget_second: 'Top Second Widget'
  topwidget_third: 'Top Third Widget'
  ....
  ....

Additionally, not sure if I need to include the two lines:

  - awesome_zymphonies_theme/bootstrap
  - awesome_zymphonies_theme/global-components

… or do they get inherited from the parent theme?

So, I guess three questions there really. Any assistance would be most appreciated. Thanks!

D8, Bootstrap3, sub-theme custom Style not taking effect

I’ve read and gone through several articles on sub-theming. Many are outdated! I cant find what i need.

I wish to base my Sub-Theme on the bootswatch Cyborg theme.
This is what i have done:

  1. Downloaded latest drupalBootstrap, extracted, enabled in drupal.
  2. Setup a sub-theme. As per Documentation instructions, by using the starterkits/THEMENAME project and Enabled in drupal.
  3. I wish to use bootswatch Cyborg theme so i downloaded its bootswatch.less and variables.less and put them inside My-Subtheme/css. I also copied over bootstrap.min.css.

Inside My-Subtheme.libraries.yml i have:

framework:
  css:
    theme:
      css/style.css: {}
      css/bootswatch.less: {}
      css/bootstrap.min.css: {}
      css/variables.less: {}

Inside My-Subtheme/css/style.css:

@import 'bootstrap.min.css';
@import 'variables.less';
@import 'bootswatch.less';


.h1 {
    font-size: 200px;
}

The styling is not taking effect.
What am i missing? This is driving me nuTs!!

theming – table styles not applied by bootstrap sub-theme

I’m writing a custom sub-theme of bootstrap with Drupal 9, and have noticed that table elements in my forums do not render properly:

enter image description here

This is despite me selecting “Bordered Table” in the configuration settings:

enter image description here

The next thing I tried was using Chrome’s “inspect” feature to manually add class = "table" to the table element, which caused it render much more nicely;

enter image description here

I don’t see any options to apply that class to table elements, either in the forum settings nor in the bootstrap settings.

I have a few questions to help me (and hopefully others) understand what’s happening here;

  1. Is adding the class = "table" to table elements the right approach?
  2. Assuming it is, what’s the right way to apply this class to table elements? (I’ve not averse to writing php code, I’ve just never written a theme before so I don’t know where to start)
  3. What’s the point of those bootstrap table settings – they don’t seem to do anything?

theming – Cannot get the sub-theme retrieve the CSS files from libraries

I have localized Bulma theme following the instructions which were as simple as creating a new directory called ‘libraries’ under main directory (httpdocs) and putting the sources files in it. No problem with that.

  • I have been trying to create a sub theme which I named “bulma_sub”.

bulma_sub is located under themes’ folder (where the bulma base theme is).

  • there are three files in bulma_sub folder with the following set-up.

bulma_sub.info.yml

name: bulma_sub
description: 'subtheme based on bulma'
type: theme
base theme: bulma
core_version_requirement: ^8.8 || ^9
package: Core

regions:
  header: 'Header'
  navbar_branding: 'Branding'
  navbar_social: 'Social'
  header_search: 'Search'
  header_tabs: 'Tabs'
  primary_menu: 'Primary menu'
  secondary_menu: 'Secondary menu'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Sidebar First'
  sidebar_second: 'Sidebar Second'
  tile_one: 'Tile 1'
  tile_two: 'Tile 2'
  tile_three: 'Tile 3'
  tile_four: 'Tile 4'
  tile_five: 'Tile 5'
  bottom: 'Bottom'
  footer: 'Footer'

libraries:
  - bulma_sub/global

# Information added by Drupal.org packaging script on 2020-10-27
version: '8.x-1.0-rc1'
project: 'bulma'
datestamp: 1603840308

bulma_sub.libraries.yml

    global:
      css:
        theme:
          css/overrides.css: {}
          css/style.css: {}
      dependencies:
        - core/jquery
        - core/jquery.once
        - core/drupal

bulma_sub.theme file (same as the source file)

<?php

/**
 * @file
 * The primary PHP file for the Drupal Bulma base theme.
 */

use DrupalblockEntityBlock;
use DrupalbulmaBulma;
use DrupalbulmaBulmaswatch;
use DrupalfileEntityFile;

/**
 * Implements template_preprocess_page().
 */
function bulma_preprocess_page(&$variables) {

  // Site slogan as separate variable.
  $site_config = Drupal::config('system.site');
  $variables('site_slogan') = $site_config->get('slogan');
}

/**
 * Implements template_preprocess_file_link().
 */
function bulma_preprocess_file_link(&$variables) {
  /** @var DrupalCoreEntityEntityFile $file */
  $file = ($variables('file') instanceof File) ? $variables('file') : File::load($variables('file')->fid);

  $variables('icon') = Bulma::getFileIcon($file);
}

/**
 * Implements hook_page_attachments_alter().
 */
function bulma_page_attachments_alter(&$page) {

  // Force IE to use Chrome Frame if installed.
  $page('#attached')('html_head')() = (
    (
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => (
        'http-equiv' => 'X-UA-Compatible',
        'content' => 'IE=edge,chrome=1',
      ),
    ),
    'chrome_frame',
  );

  // Remove image toolbar in IE.
  $page('#attached')('html_head')() = (
    (
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => (
        'http-equiv' => 'ImageToolbar',
        'content' => 'false',
      ),
    ),
    'ie_image_toolbar',
  );

  // Alter viewport.
  $page('#attached')('html_head')() = (
    (
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => (
        'name' => 'viewport',
        'content' => 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no',
      ),
    ),
    'viewport',
  );
}

/**
 * Implements bulma_preprocess_HOOK() for breadcrumb.
 */
function bulma_preprocess_breadcrumb(&$variables) {
  // Load Bulma class from settings.
  $classes = array_merge(('breadcrumb'), Bulma::multiSettings('breadcrumb'));
  foreach ($classes as $class) {
    $variables('attributes')('class')() = $class;
  }
  $variables('attributes')('role') = 'navigation';
  $variables('attributes')('aria-labelledby') = 'system-breadcrumb';
}

/**
 * Implements theme_menu_local_tasks().
 */
function bulma_preprocess_menu_local_tasks(&$variables) {

  // Load Bulma class from settings.
  $bulma_tabs_class = Bulma::multiSettings('tabs');

  if (!empty($bulma_tabs_class)) {
    // Set variables.
    foreach ($bulma_tabs_class as $key => $class) {
      $variables(str_replace('is-', '', $key)) = $class;
    }

  }

}

/**
 * Implements hook_form_alter().
 */
function bulma_form_alter(&$form, $form_state, $form_id) {

  // Check for actions buttons, group them.
  if (isset($form('actions'))) {
    $form('actions')('#attributes')('class')() = 'field';
    $form('actions')('#attributes')('class')() = 'is-grouped';

    // Loop trough array to get link type.
    // Better approach maybe to use https://www.drupal.org/project/button_link.
    foreach ($form('actions') as $key => $action) {
      if (isset($action('#type'))) {
        if ($action('#type') == 'link') {
          $name = (string) $action('#title');

          // Check if button should be colorized.
          $button_color = Bulma::colorizeButton($name);

          // Add button class.
          if (!empty($button_color)) {
            foreach ($button_color as $class) {
              $form('actions')($key)('#attributes')('class')() = $class;
            }
          }
        }

      }
    }
  }

  switch ($form_id) {
    case 'node_preview_form_select':
      $form('backlink')('#options')('attributes')('class')() = 'button';
      break;
  }

}

/**
 * Implements hook_form_FORM_ID_alter().
 */
function bulma_form_search_form_alter(&$form, $form_state, $form_id) {

  // Remove label.
  $form('basic')('keys')('#title_display') = 'invisible';

  // Update the placeholder.
  $form('basic')('keys')('#placeholder') = t('Enter your keywords');

  // Wrap class to combine form.
  $form('basic')('#attributes')('class') = 'field has-addons';

}

/**
 * Implements hook_form_FORM_ID_alter().
 */
function bulma_form_search_block_form_alter(&$form, $form_state, $form_id) {

  // Update the placeholder, remove title - prevent double icon.
  $form('keys')('#title') = '';
  $form('keys')('#placeholder') = t('Search');

}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bulma_theme_suggestions_form_alter(array &$suggestions, array $variables) {
  if ($variables('element')('#form_id') === 'search_block_form') {
    $suggestions() = 'form__search_block_form';
  }
}

/**
 * Implements template_preprocess_block().
 */
function bulma_preprocess_block(&$variables) {

  // Block as panel style.
  if (Bulma::singleSetting('general.block')) {
    if ($variables('configuration')('label_display')) {
      $variables('block_panel_style') = TRUE;
    }
  }

  // Customize the ID and classes of the main menu block.
  $main_menu = Bulma::singleSetting('general.menu');
  $plugin_id = 'system_menu_block:' . $main_menu;
  // Match blocks by plugin ID to support Bulma and any active subtheme.
  if (!empty($variables('elements')('#plugin_id')) && $variables('elements')('#plugin_id') == $plugin_id) {
    $variables('attributes')('id') = 'navbar-menu';
    $variables('attributes')('class')() = 'navbar-end';
  }

  // Set a region variable for use in templates.
  if (isset($variables('elements')('#id'))) {
    $block = Block::load($variables('elements')('#id'));
    $variables('region') = $block->getRegion();
  }
}

/**
 * Implements template_preprocess_table().
 */
function bulma_preprocess_table(&$variables) {
  // Load existing classes.
  $existing_class = ();
  if (isset($variables('attributes')('class'))) {
    $existing_class = $variables('attributes')('class');
  }

  // Load Bulma specific table classes from theme settings.
  $bulma_table_class = Bulma::multiSettings('table');

  // Merge classes.
  if (!empty($bulma_table_class)) {
    $variables('attributes')('class') = array_merge($existing_class, $bulma_table_class);
  }

}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bulma_theme_suggestions_links_alter(array &$suggestions, array $variables) {
  $link_type = $variables('theme_hook_original');

  // We want only affect node and comment links.
  $target_output = ('links__node', 'links__comment');

  if (in_array($link_type, $target_output)) {
    $suggestions() = 'links__bulma';
  }

}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bulma_theme_suggestions_input_alter(array &$suggestions, array $variables) {

  // Define defaults for exclusion for rendering as bulma input.
  $exclude_input = (
    'hidden',
    'token',
    'radio',
    'checkbox',
    'submit',
    'image_button',
  );

  // Submit button needs have render as button element.
  if ($variables('element')('#type') == 'submit') {
    $suggestions() = 'input__button__bulma';
  }

  // Add theme suggestions for others input elements.
  if (!in_array($variables('element')('#type'), $exclude_input)) {

    // Default wrapped input.
    $suggestions() = 'input__bulma';
  }

}

/**
 * Implements template_preprocess_hook().
 */
function bulma_preprocess_input__bulma(&$variables) {
  // Make sure we have data to work from.
  if (empty($variables('element')('#type')) || empty($variables('element')('#title'))) {
    return;
  }
  // Field name and type.
  $type = $variables('element')('#type');
  $name = (string) $variables('element')('#title');

  // Check if we use icons.
  if (Bulma::singleSetting('general.icon')) {
    $variables('icon') = Bulma::iconMatch($name, $type);

  }

  // Size of input buttons.
  $input_size = Bulma::singleSetting('bulma_elements_input_size');

  if ($input_size != 'none') {
    $variables('attributes')('class')() = $input_size;
  }

}

/**
 * Implements template_preprocess_hook().
 */
function bulma_preprocess_input__button__bulma(&$variables) {

  // Field name and type.
  $name = $variables('element')('#value');
  $type = $variables('element')('#type');

  // We need render label inside button tag.
  $variables('label') = $variables('element')('#value');

  // Bulma submit classes.
  $variables('bulma_button_classes') = ();

  // Check if button should be colorized.
  $button_color = Bulma::colorizeButton($name);

  if (!empty($button_color)) {
    $variables('bulma_button_classes') = $button_color;
  }

  // Check if we use icons.
  if (Bulma::singleSetting('general.icon')) {
    // Define default if not matched.
    $variables('icon') = Bulma::iconMatch($name, $type);

    // Hide label for search button.
    if ($variables('icon') == 'search') {
      $variables('label') = FALSE;
    }
  }

}

/**
 * Implements hook_theme_suggestions_HOOK_alter().
 */
function bulma_theme_suggestions_menu_alter(array &$suggestions, array $variables) {

  // Navbar menu.
  $bulma_nav = Bulma::singleSetting('general.menu');

  // Check if any menu is selected to be nav menu.
  if ($bulma_nav != 'none') {
    if ($variables('menu_name') === $bulma_nav) {
      $suggestions() = 'menu__nav_bulma';
    }
  }

}

/**
 * Implements template_preprocess_form_element().
 */
function bulma_preprocess_form_element(&$variables) {

  // Render the form element inside the label for checkbox and radio.
  if (in_array($variables('element')('#type'), ('checkbox', 'radio'))) {
    $variables('label')('#children') = $variables('children');
    unset($variables('children'));
  }

}

/**
 * Implements template_preprocess_form_element_label().
 */
function bulma_preprocess_form_element_label(&$variables) {

  // Check additional theme labels settings.
  $bulma_labels = Bulma::multiSettings('label');

  if (!empty($bulma_labels)) {
    foreach ($bulma_labels as $key => $value) {
      $variables($key) = $value;
    }
  }

}

/**
 * Implements template_preprocess_page_title().
 */
function bulma_preprocess_page_title(&$variables) {
  $variables('title_attributes')('class') = 'title';
}

/**
 * Implements template_preprocess_views_view_table().
 */
function bulma_preprocess_views_view_table(&$variables) {

  // Define defaults for variables.
  $variables('bordered') = FALSE;
  $variables('striped') = FALSE;
  $variables('narrow') = FALSE;
  $variables('table') = TRUE;

  // Load Bulma specific table classes from theme settings.
  $bulma_table_class = Bulma::multiSettings('table');

  if (!empty($bulma_table_class)) {
    foreach ($bulma_table_class as $class) {
      $variables(str_replace('is-', '', $class)) = TRUE;
    }
  }
}

/**
 * Implements hook_library_info_alter().
 */
function bulma_library_info_alter(&$libraries, $extension) {
  // Swap in Bulmaswatch theme's CSS.
  if ($extension === 'bulma' &&
    isset($libraries('global')) &&
    ($theme = theme_get_setting('cdn.bulmaswatch.theme'))
  ) {
    // If bulmaswatch is configured to use the default theme, use Bulma directly.
    $cdn_data = Bulma::getCdnData();
    $properties = ();
    if ($theme === 'default') {
      $bulma_file = '/css/bulma.css';
      if (Bulma::isLocal()) {
        $css_file = '/libraries/bulma' . $bulma_file;
      }
      else {
        $css_file = $cdn_data('api')('bulma')('file_root') . $bulma_file;
        $properties('type') = 'external';
      }
    }
    else {
      $properties('minified') = TRUE;
      $themes = Bulmaswatch::getThemes();
      if (isset($themes($theme)('local_css'))) {
        $css_file = $themes($theme)('local_css');
      }
      else {
        $css_file = $cdn_data('api')('bulmaswatch')('file_root') . "/{$theme}/bulmaswatch.min.css";
        $properties('type') = 'external';
      }
    }
    $libraries('global')('css')('base') = (
      $css_file => $properties,
    );
  }

}

File structure

libraries
|_bulma
  |_css
    |_bulma.css
  |_sass

themes
|_bulma
  |_assets
    |_bulma.style.css
    |_bulma.style.scss
    |_overrides.css
    |_overrides
|_bulma_sub
  |_css
    |_overrides.css
    |_style.css

The sites shows up without any css applied. And also the Home link is duplicated. Any ideas?

theming – Site errors out when trying to create a subtheme based on Classy

I’m creating a custom theme in Drupal 9 and am trying to use classy as my subtheme but get the following error:

The website encountered an unexpected error. Please try again later.

DrupalCoreThemeMissingThemeDependencyException: Base theme classy has not been installed. in DrupalCoreThemeThemeInitialization->getActiveThemeByName() (line 122 of corelibDrupalCoreThemeThemeInitialization.php).

DrupalCoreThemeThemeInitialization->initTheme('custom_theme') (Line: 406)
DrupalCoreThemeThemeManager->initTheme(Object) (Line: 96)
DrupalCoreThemeThemeManager->getActiveTheme() (Line: 214)
DrupalCoreThemeRegistry->init(NULL) (Line: 258)
DrupalCoreThemeRegistry->getRuntime() (Line: 194)
DrupalCoreEntityEntityViewBuilder->getBuildDefaults(Object, 'full') (Line: 61)
DrupalnodeNodeViewBuilder->getBuildDefaults(Object, 'full') (Line: 157)
DrupalCoreEntityEntityViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 123)
DrupalCoreEntityEntityViewBuilder->view(Object, 'full') (Line: 98)
DrupalCoreEntityControllerEntityViewController->view(Object, 'full', NULL) (Line: 66)
DrupalnodeControllerNodeViewController->view(Object, 'full', NULL)
call_user_func_array(Array, Array) (Line: 123)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->DrupalCoreEventSubscriber{closure}() (Line: 573)
DrupalCoreRenderRenderer->executeInRenderContext(Object, Object) (Line: 124)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->DrupalCoreEventSubscriber{closure}() (Line: 158)
SymfonyComponentHttpKernelHttpKernel->handleRaw(Object, 1) (Line: 80)
SymfonyComponentHttpKernelHttpKernel->handle(Object, 1, 1) (Line: 57)
DrupalCoreStackMiddlewareSession->handle(Object, 1, 1) (Line: 47)
DrupalCoreStackMiddlewareKernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupalpage_cacheStackMiddlewarePageCache->pass(Object, 1, 1) (Line: 85)
Drupalpage_cacheStackMiddlewarePageCache->handle(Object, 1, 1) (Line: 47)
DrupalCoreStackMiddlewareReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
DrupalCoreStackMiddlewareNegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
StackStackedHttpKernel->handle(Object, 1, 1) (Line: 705)
DrupalCoreDrupalKernel->handle(Object) (Line: 19)

Below is my theme.info.yml info:

name: Custom Theme
type: theme
description: "This is a custom theme for the company"
version: "1.0.0"
core: 8.x
package: "Custom"
core_version_requirement: ^8 || ^9
base theme: classy

# libraries:
#   - custom_theme/bootstrap_cdn
#   - custom_theme/global-styling

regions:
  search: Hidden Search Bar
  branding_navigation: Branding & Main Navigation
  header: Header
  primary_menu: Primary menu
  secondary_menu: Secondary menu
  content: Content
  footer: Footer

Why is it saying that ‘Base theme classy’ isn’t installed? I’ve never run into this issue before. Does it have something to do with Drupal 9? (This is my first time starting from scratch in D9)

I see that classy is in the core files so not sure why I’m getting this error?

Any help/suggestions?

EDIT: I’m using Acquia Dev Desktop if that makes any difference.

theming – Site errors out when trying to create a subtheme based off classy in D9

I’m creating a custom theme in Drupal 9 and am trying to use classy as my subtheme but get the following error:

The website encountered an unexpected error. Please try again later.

DrupalCoreThemeMissingThemeDependencyException: Base theme classy has not been installed. in DrupalCoreThemeThemeInitialization->getActiveThemeByName() (line 122 of corelibDrupalCoreThemeThemeInitialization.php).

DrupalCoreThemeThemeInitialization->initTheme('custom_theme') (Line: 406)
DrupalCoreThemeThemeManager->initTheme(Object) (Line: 96)
DrupalCoreThemeThemeManager->getActiveTheme() (Line: 214)
DrupalCoreThemeRegistry->init(NULL) (Line: 258)
DrupalCoreThemeRegistry->getRuntime() (Line: 194)
DrupalCoreEntityEntityViewBuilder->getBuildDefaults(Object, 'full') (Line: 61)
DrupalnodeNodeViewBuilder->getBuildDefaults(Object, 'full') (Line: 157)
DrupalCoreEntityEntityViewBuilder->viewMultiple(Array, 'full', NULL) (Line: 123)
DrupalCoreEntityEntityViewBuilder->view(Object, 'full') (Line: 98)
DrupalCoreEntityControllerEntityViewController->view(Object, 'full', NULL) (Line: 66)
DrupalnodeControllerNodeViewController->view(Object, 'full', NULL)
call_user_func_array(Array, Array) (Line: 123)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->DrupalCoreEventSubscriber{closure}() (Line: 573)
DrupalCoreRenderRenderer->executeInRenderContext(Object, Object) (Line: 124)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array) (Line: 97)
DrupalCoreEventSubscriberEarlyRenderingControllerWrapperSubscriber->DrupalCoreEventSubscriber{closure}() (Line: 158)
SymfonyComponentHttpKernelHttpKernel->handleRaw(Object, 1) (Line: 80)
SymfonyComponentHttpKernelHttpKernel->handle(Object, 1, 1) (Line: 57)
DrupalCoreStackMiddlewareSession->handle(Object, 1, 1) (Line: 47)
DrupalCoreStackMiddlewareKernelPreHandle->handle(Object, 1, 1) (Line: 106)
Drupalpage_cacheStackMiddlewarePageCache->pass(Object, 1, 1) (Line: 85)
Drupalpage_cacheStackMiddlewarePageCache->handle(Object, 1, 1) (Line: 47)
DrupalCoreStackMiddlewareReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
DrupalCoreStackMiddlewareNegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
StackStackedHttpKernel->handle(Object, 1, 1) (Line: 705)
DrupalCoreDrupalKernel->handle(Object) (Line: 19)

Below is my theme.info.yml info:

name: Custom Theme
type: theme
description: "This is a custom theme for the company"
version: "1.0.0"
core: 8.x
package: "Custom"
core_version_requirement: ^8 || ^9
base theme: classy

# libraries:
#   - custom_theme/bootstrap_cdn
#   - custom_theme/global-styling

regions:
  search: Hidden Search Bar
  branding_navigation: Branding & Main Navigation
  header: Header
  primary_menu: Primary menu
  secondary_menu: Secondary menu
  content: Content
  footer: Footer

Why is it saying that ‘Base theme classy’ isn’t installed? I’ve never run into this issue before. Does it have something to do with Drupal 9? (This is my first time starting from scratch in D9)

I see that classy is in the core files so not sure why I’m getting this error?

Any help/suggestions?

theming – Favicon settings missing on subtheme config

Using Drupal 8 W3CSS Theme 8.x-1.17, I created a subtheme. Works fine, but on the settings page, the entire #edit-favicon div is hidden; style=”display: none” has been added. I can’t figure out why this is happening. It is, however, displayed on the parent theme. In the info.yml file for the subtheme, features/favicn is set to true.

8 – Using Less in Barrio Subtheme

I am attempting to use Less in my Barrio sub theme on my Drupal 8 instance, but am running into some issues with it actually loading onto my page. Right now, I have three less files:

  • variables.less
  • main.less
  • landing.less

In my my_theme.libraries.yml I have this content:

global-styling:
  version: VERSION
  js:
    js/global.js: {}
  css:
    component:
      css/style.css: {}
      css/colors.css: {}
    theme:
      less/main.less: {}

...

landing:
  css:
    theme:
      less/landing.less: {}

I have a template for the front page (page–front.html.twig) that I am attempting to use these style sheets with. Global styling is global so I don’t import anything manually, but the page--front.html.twig file does contain this:

{{ attach_library('my_theme/landing') }}

I also installed the SCSS/Less Compiler module and the proper Less Compiler for that module to use and I can recompile the assets without error.

However, when I load the front page, the css from my less files are not present… How can I get my theme to use less files correctly? I believe I have all the right configurations from my research, but can’t figure out why the assets are not loaded…