Custom Styles Applying to page.html.twig but not html--front.html.twig

by Caleb Bertrand   Last Updated May 15, 2018 20:07 PM

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. Thanks for the help.

Tags : theming

Answers 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.

May 15, 2018 19:53 PM

Related Questions

Features can export everything?

Updated March 26, 2015 10:02 AM

No image style found

Updated March 29, 2015 15:02 PM

Best way to have 5 or 6 themes in one site drupal 7

Updated April 09, 2015 22:03 PM

Cache file /home/queryxchang/public_html/apps/frontend/config/../cache/-q-8-261721-custom-styles-applying-to-page-html-twig-but-not-html-front-html-twig- could not be written