Contrib.social

Twig Templates Location and CSS Styling Questions

Open on Drupal.org →
Created on 9 January 2025, 3 months ago

After seeing the default appearance of the 'Book traversal links' navigation, I wanted to make a few changes:

  1. remove the book tree list item that appears above the book navigation section
  2. change the 'Traversal links' headline text
  3. change the CSS styling for the 'book-traversal__list'

Unfortunately, it took a while to even get off the ground with this, since I was assuming the files to edit would be at "/web/modules/contrib/book/templates" and "/web/modules/contrib/book/css" ...

Instead, I finally realized (with the help of Twig Debugging) that the files I need to edit are actually in the core Book module's file structure: /web/core/themes/stable9/templates/navigation/

Once I began editing these core Book module files ("book-navigation.html.twig" and "book-tree.html.twig"), then changes were appearing as expected. As of now, just by editing these 2 files, I've gotten it to look fairly decent (see attached screenshot) ...

But I don't want to go much further without understanding this a little better. For example, I have no idea why editing the Book contributed module's template files have no effect, and instead I have to edit the old core Book module files to see changes.

The other main question is: how *should* I actually be doing this? I believe that, whether editing files in the core or contributed Book module's directories, either way they'll be overwritten the next time there is an update to Drupal core or to your Book module.

Hopefully getting some answers here will help me and other Book module users down the road when wanting to style and refine what's there by default.

💬 Support request
Status

Active

Version

2.0

Component

Miscellaneous

Created by

🇺🇸United States jimmb

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jimmb
  • Comment 3 months ago →
    🇺🇸United States jimmb
  • Comment 3 months ago →
    🇺🇸United States jimmb

    Okay, I think I've figured out most of this now .... Here is what I *think* to be correct info. for my questions above:

    * It appears the files at "/web/modules/contrib/book/templates" and "/web/modules/contrib/book/css" are in place for the Drupal 11 version of this module. However, they do not apply to the Drupal 10 version.

    * For Drupal 10, the traversal links are by default coming from /web/core/themes/stable9/templates/navigation/ --> "book-navigation.html.twig" and "book-tree.html.twig"

    * The reason why these are found in "stable9" within core > themes is that my theme (DXPR) uses bootstrap5 as its base theme, and Bootstrap5 uses stable9 as its base. So DXPR gets the stable9 inheritance.

    * In order to get these twig files into a place where you can edit them without touching anything in core, a sub-theme needs to be created. Note that DXPR has a nice feature where you can add custom sitewide CSS in the theme settings, allowing you to avoid the additional complexity of a subtheme. Because of this, I did not have a sub-theme in place beforehand.

    * After a subtheme is created and set as default, it's a matter of copying the relevant twig files at /web/core/themes/stable9/templates/navigation/ to /web/themes/custom/my_dxpr_theme/templates/navigation

    * Now you can make changes as desired in these twig files to get the traversal links looking decent for a normal public-facing website. It's also recommended to add some CSS classes in these twig files, so that you can style them further as needed.

    So these are the answers and process I used, and things seem to have worked out nicely with this approach. If I'm making any mistakes here or posting incorrect info., I hope one of the module maintainers will comment ...

    Otherwise, I think the issue can be closed and hopefully this will help someone else sometime.

  • Comment 2 months ago →
    🇺🇸United States smustgrave

    Seems you answered your own question :)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024