By hello65 on

I have generated a new theme in Drupal 10 and am now modifying twig files. I have created a page--front.html.twig file from page.html.twig and am now making modifications to it. As part of the modifications, I want to change the css class layout-content to have a background color and thus replaced occurrences of layout-content with my-layout-content in this twig.html file

The generated theme has its css files in css/components. I now want to add my new classes to another subdirectory to keep them separated from the starter theme generated css files. I thus created css/layout/layout.css and added my new class my-layout-content to this file.

I cannot get page--front.html.twig to display this background color, however, and I am not sure what I have missed. So far, I have done the following:

- added THEMENAME/global-styling under libraries in THEMENAME.info.yml (in the file THEMENAME is replaced by my actual theme name)

- added the following code at the bottom of THEMENAME.libraries.yml:

global-styling:
  version: VERSION
  css:
    theme:
      css/layout/layout.css
        weight: +10

I would think the above should be sufficient to pull in the new class information and use it but it is not. I have cleared the cache, disabled css and js aggregation.

What have I missed?

⋅ Categories: Drupal 10.x

Comments

hello65’s picture

hello65 commented

Solved! I had not noticed that the Inspector window in Chrome showed an error 403 when loading this file... It turned out that the new directory I had created, css/layout, had the wrong ownership and attributes, as did the css file. Once corrected, everything works as expected.

zjoriz’s picture

zjoriz commented

Having a similar problem, I think... Which ownership/attributes did the folders have and which did you apply to fix the problem?

EDIT: nevermind, my problem is fixed and had nothing to do with file attributes. Nevertheless, it may help other people get themselves unstuck.