0

I'm new to drupal and am trying to make my own theme. Currently I have a page.html.twig for my pages, and my css styles show up fine. However, when I added a html--front.html.twig file, cleared the caches, and checked the homepage, there were no styles, even ones that apply to elements that are in every page (such as body). The code in html--front.html.twig is identical to the code in page.html.twig. I checked the console and the front page is successfully templating from html--front.html.twig. Every other page works fine. I just don't see why it is now ignoring all my styles for the front page. Here is the code for both pages:

<header role="banner">
    {{ page.header }}
  </header>
<div class="layout-container">
  <main role="main">
    <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

    <div class="layout layout-content">
      {{ page.content }}
    </div>

</div>
1
  • Why would the code in html.html.twig be identical to page.html.twig? My first thought is that you are not printing styles or attaching librarie(s) that are being attached via say a hook_page_attachment_alter.
    – Kevin
    May 15, 2018 at 19:52

1 Answer 1

1

The code in html--front.html.twig is identical to the code in page.html.twig

That's your problem - those are two different templates, it doesn't make sense for them to have the same content.

html.html.twig contains (or more accurately, renders) page.html.twig, plus the <head> tags and all that lives within, the footer of the document, and so on. If you copied page.html into html.html, that explains why you don't see styles any more - your <head> is gone.

It's perfectly valid to have html--front.html.twig and page--front.html.twig, or some other combination, but the html template needs to contain the outer part of the document, and the page template needs to contain the inner part.

4
  • Well I could change the content in page--front.html.twig, but I mainly kept it the same because I just wanted to see if I could create a custom twig page in principle. May 15, 2018 at 20:14
  • Thanks for the answer, but I'm still a little confused. I put the code for the page in my question. What are you saying I need to remove for the html--front.html.twig? May 15, 2018 at 20:18
  • html—front should be rather identical to html.html.twig, NOT page.html.twig.
    – Kevin
    May 15, 2018 at 20:22
  • Maybe I didn't explain it very well @CalebBertrand...templates are hierarchical; the top-level template is html.html.twig, which contains the wrapping markup for the page <html><head><body>. Within the <body> tag the variable page is rendered. That's the result of page.html.twig, or page--front.html.twig, or whatever other template happens to be used for that request. html--front.html.twig is used when you want to change html.html.twig, the wrapping markup for the html document, for the front page only. If I understand your markup/question properly, you just need a page--front.html.twig
    – Clive
    May 15, 2018 at 20:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.