Although the theme is functioning properly, the CSS styles are not being applied. Even when inspecting the developer console in Firefox, there seems to be a disconnect with the page. I verified that manually applying the CSS through the developer console in Firefox confirms that it works.
To clarify, after making changes to the theme's files, I have cleared the cache and reloaded the webpage. I have also tested different base themes but encountered the same issue. The theme is set as the default theme and appears to be operational, except for the CSS styling, as the block layout displays correctly on the page.
I suspect that the problem lies in linking the CSS to the page, despite trying various solutions such as renaming files or removing custom CSS altogether without success so far.
This is my directory structure:
- themes
- learn
learn.info.yml
learn.libraries.yml
- css
style.css
- templates
html.html.twig
page.html.twig
Below is the code for each file:
learn.info.yml
name: learn
type: theme
Description: "A theme to learn on"
package: custom
core: 8.x
libraries:
- 'learn/global-css'
base theme: stable
regions:
headline: headline
header: header
content: content
sidebar_top: sidebar_top
sidebar_bottom: sidebar_bottom
footer: Footer
learn.libraries.yml
#libraries file: learn.libraries.yml
global-css:
css:
theme:
css/style.css: {}
style.css
#headline {
grid-area: headline;
align-self: center;
}
#topbar {
grid-area: header;
}
#main {
grid-area: main;
}
#sidebar-top {
grid-area: sidebar-top;
}
#sidebar-bottom {
grid-area: sidebar-bottom;
}
#footer {
grid-area: footer;
}
.container {
font-family: Georgia, sans-serif;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas:
". headline headline ."
"header header header header"
"main main main sidebar-top"
"main main main sidebar-bottom"
"footer footer footer footer";
}
page.html.twig
<div id="headline">
{{ page.headline }}
</div>
<div id="topbar">
{{ page.header }}
</div>
<div id="main">
{{ page.content }}
</div>
<div id="sidebar-top">
{{ page.sidebar_top}}
</div>
<div id="sidebar-bottom">
{{ page.sidebar_bottom}}
</div>
<footer id="footer">
<hr>
{{ page.footer }}
</footer>
html.html.twig
<head>
{{ head_title }}
</head>
<body>
{{ page_top }}
{{ page }}
{{ page_bottom }}
</body
Source code for the webpage:
<script type="application/vnd.drupal-ajax" data-big-pipe-event="start"></script>
<script type="application/vnd.drupal-ajax" data-big-pipe-event="stop"></script>
</body><head>
</head>
<body>
<div id="toolbar-administration" role="group" aria-label="Site administration toolbar" class="toolbar">
<nav id="toolbar-bar" role="navigation" aria-label="Toolbar items" class="toolbar-bar clearfix">
<h2 class="visually-hidden">Toolbar items</h2>
... (This part has been shortened for clarity)
</body>
Apologies for the lengthy explanation, but I wanted to cover all the details thoroughly.
EDIT:
While the solution is correct, I want to emphasize that
<css-placeholder token="{{ placeholder_token|raw }}">
is the crucial line that resolved the CSS linking issue.