Join Log in
Score:0
avatar Drupal

Custom theme dependencies

my flag
pranick67

I have a problem with a custom theme I created on a Drupal 9 test site.

  • Drupal version: 9.3.13
  • Web server Apache 2.4.41 (XAMP win64)
  • PHP version 8.0.11
  • Database version 10.4.8-MariaDB

custom theme professional.info.yml:

name: Professional
type: theme
description: Drupal 9 version of Professional theme
core_version_requirement: ^8 || ^9
base theme: false
version: 1.0.0
libraries:
  - professional/global-styling
  - professional/global-scripts
regions:
  sidebar_first: 'First Sidebar'
  sidebar_second: 'Second Sidebar'
  header: 'Header'
  front_welcome: 'Front Welcome'
  content: 'Content'
  content_top: 'Content Top'
  help: 'Help'
  footer: 'Footer'
  footer_first: 'First Bottom'
  footer_second: 'Second Bottom'
  footer_third: 'Third Bottom'
features:
  logo: true
  site_name: true
  site_slogan: true
  node_user_picture: true
  comment_user_picture: true
  comment_user_verification: true
  favicon: true
  main_menu: true
  secondary_menu: false

custom theme professional.libraries.yml:

global-styling:
  version: VERSION
  css:
    theme:
      css/style.css: {}  
global-scripts:
  version: VERSION
  js:
    js/custom.js: {}
    js/jquery.flexslider-min.js: {}
    js/slide.js: {}
  dependencies:
    - core/jquery
    - core/drupal
    - core/drupalSettings
    - core/drupal.dialog.ajax

I saved all the files of the new theme respecting the convention:

/site-root
 - themes
   - professional
     - css
     - js
     - templates
       - system

The problem is that the dependencies, including core/drupal, are not applied at all, and the three JavaScript files in the global-scripts directive are not included in the site pages, even though both Drupal core CSS files as well as style.css from professional:global-styling have been included.

I saw that on the chrome browser development tools console when I tried for example to show a basic page node in a modal popup using a Drupal.org example:

<ol>
    <li><a class="use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="modal" href="/xampp/drupal9test/node/9">Basic page displayed in modal dialog. </a></li>
    <li><a class="use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-type="dialog" href="/xampp/drupal9test/node/9">Basic page displayed in non modal dialog. </a></li>
    <li><a class="edit-button use-ajax" data-dialog-options="{&quot;width&quot;:400}" data-dialog-renderer="off_canvas" data-dialog-type="dialog" href="/xampp/drupal9test/node/9">Basic page displayed in a nice off canvas dialog. </a></li>
</ol>

The node is shown as a conventional page, no modal popup is open. So neither core JavaScript nor AJAX is applied if I use my custom theme; when I switch to the Bartik theme, everything is working, modals too. I tried adding Drupal core and AJAX libraries directly in professional_preprocess_page(&$variables) in the professional.theme file with the line:

$variables['#attached']['library'][] = 'core/drupal';
$variables['#attached']['library'][] = 'professional/global-scripts';

I even tried to add libraries with Twig directly in the html.html.twig template with {{ attach_library('core/drupal') }}, but none of these changes did have any effect.

Of course, every time I changed some settings I also cleared the site cache.

What am I doing wrong? Can someone give me a solution?

32
0 + 0
9
Jaypan avatar
de flag
Jaypan
I can't tell you what you're doing wrong, but I'm betting it's a template issue, and you're missing something required. Have you implemented `html.html.twig`? Maybe you have something strange.
1
Reply
ru flag
Hudri
Does your theme overwrite the `html.html.twig` template? You *must* have all three `<css-placeholder>` and `<js-placeholder>`s in there, see https://github.com/drupal/drupal/blob/9.5.x/core/themes/stable9/templates/layout/html.html.twig#L31
2
Reply
Kevin avatar
in flag
Kevin
Yes, since Bartik works and yours does not, you are missing something fundamental. You have no base theme set, so something is missing as other commenters noted.
1
Reply
my flag
pranick67
Thanks for your answers, I managed to solve the problem, but I had to add the custom js files in the <head> section of html.html.twig and the <js-bottom-placeholder token="{{ placeholder_token }}"> right before the </body> tag, but the line <js-placeholder token="{{ placeholder_token }}"> in the <head> section was already there, and it was useless... I thought that indicating custom libraries and dependencies in libraries.yml file was enough to make it work.
0
Reply
mradcliffe avatar
cn flag
mradcliffe
It should work. Re-iterating that there must be something else wrong. Are you following Drupal JavaScript API re behaviors and injecting dependencies with an immediately-invoked function expression (IIFE)? Providing the javascript could help.
1
Reply
my flag
pranick67
@mradcliffe: I don't know the answer to your question, but if you like I can make the whole custom theme available to everybody (provided that you explain me where and how I can upload it), so if someone feels like debugging and improving it it can be a new choice for all users all around the world, after all I just modified someone else's theme for Drupal 7.
0
Reply
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.