Contrib.social

Subtheme of subtheme is not reading styles in the expeted order

Open on Drupal.org →
Created on 17 May 2023, over 2 years ago

Problem/Motivation

A subtheme of a subtheme is reading styles in an unexpected order

in this case,
-- bootstrap5
---- bcbb_theme
------dc_theme

The expectation is that dc_theme will have priority over bcbb_theme, and bcbb_theme will have priority over bootstrap5

if enable and set dc_theme as default, it's reading styles from bootstrap5 before bcbb_theme, so thebcbb_theme styles are being overwritten.

if I enable bcbb_theme and set as default, it works as expected. Styles from bcbb_theme are applied and override whatever is in bootstrap.

Steps to reproduce

  1. Create a subtheme of bootstrap5 called bcbb_theme, verify in bcbb_theme.info.yml the line 'base theme': bootstrap5.
  2. add some css to test with, say body {background: yellow}
  3. set bcbb_theme as the default theme
  4. go to the home page
  5. See that the page background is yellow
  6. Create a subtheme of bcbb_theme called dc_theme, verify in dc_theme.info.yml the line 'base theme': bcbb_theme.
  7. set dc_theme as the default theme
  8. go to home page
  9. see that the background is not yellow
  10. open dev tools
  11. see that body styles in /themes/contrib/bootstrap5/css/style.css is being used over body styles in https://bc.datacat.dv21.ddev.site/themes/contrib/bcbb_theme/css/style.css

bootstrap5 and bcbb_theme are both in themes/contrib, dc_theme is in themes/custom.

Expected behaviour

Having default theme as bcbb_theme or dc_theme will show a yellow background in the example above.

🐛 Bug report
Status

Active

Version

3.0

Component

Miscellaneous

Created by

🇨🇦Canada crow

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

Comments & Activities

  • Issue created by @crow
  • Comment over 2 years ago →
    🇨🇦Canada Liam Morland Ontario, CA 🇨🇦
  • Comment over 2 years ago →
    🇨🇦Canada crow
  • Comment about 2 years ago →
    🇺🇦Ukraine abyss

    @crow This issue is probably a mistake because your second sub-themes have body styles that have the "background-color: var(--bs-body-bg);" parameter. This parameter overrides the background color that was set in the first subtheme.

  • Status changed to Needs review about 2 years ago
  • Comment about 2 years ago →
    🇮🇳India ravi kant Jaipur

    @crow
    I followed the same method as described but I am getting yellow color in my sub-sub-theme.
    Theme bootstrap5 style.css is not in use in my case. Only subtheme and sub-subtheme styles displaying.
    Also, yellow background color is displayed in the sub-subtheme which I was set subtheme.
    Attaching screenshot.

  • Status changed to Closed: works as designed 19 days ago
  • Comment 19 days ago →
    🇦🇺Australia jannakha Brisbane!

    you shouldn't be loading sub-theme if there's a sub-sub-theme
    all sub-theme styles should be incorporated into sub-sub-theme - so you have just one style

  • Comment 19 days ago →
    🇨🇦Canada Liam Morland Ontario, CA 🇨🇦

    I think it is supposed to be that any theme can have a sub-theme made off it and everything from all ancestor themes continues to work.

  • Comment 19 days ago →
    🇦🇺Australia jannakha Brisbane!

    Yes, but you should load all of css from all 3 themes - it’s like loading bootstrap 3 times!

    If templates are overridden in subtheme, they’ll be used in subsubtheme unless overridden in subsubsub theme.

    Are you still having issue with this?

    If yes - what exactly is an issue? Which files are not loading? can you provide more details on the sub-themes and configuration? (Screenshots or zip files)?

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024