How to render a custom template in pre-existing theme

[piccolopi]

Hi @pamtbaau and @pmoreno, thanks a lot again.

First of all, I did not want to imply that the documentation does not explain things well or anything like this, I can’t imagine the difficulty to write a detailed guide for people ranging from noobs like me to more skilled people and that helps everybody in their needs. I actually think that the documentation is very well-written and extremely useful

Answering first to your comment pamtbaau:

• I followed your steps in the child theme folder I had created and it worked. My CSS finally showed up! For this to happen I did:

  • Created the assets folder with /css/custom.css
  • Extend the partials to index.html.twig
  • Make a partials folder and copy there the base.html.twig from the parent theme to the child theme (if I did not do this, the crikey error would tell me that the base.html.twig was not specified.
    → Everything was showing as normal: navbar, header, fafa icons

Thanks a lot, I will save this question thread for the future since all both your answers clarified a lot for me. I am starting a side project with Quark too, I’ll make the learning experiments in there from now on.

Even though with my own created folder structure it worked, I believe it would be even better if I used @pmoreno’s child theme folder structure (thanks a lot!!!). After downloading it, I did:

• Add custom.css

• Add base.html.twig template into the templates>partials folder

• Change the theme in system.yaml. I try loading the homepage. Then:
  → It was throwing me errors in crikey saying that X template were not specified, when I copied the template into the child theme themes directory, then crikey would throw an error for another Z template that was not specified. So I did:

• Copied all templates to the child theme templates folder.
  → The homepage then was showing my own CSS. However the navbar was unstyled (as in plain html only). So what I did:

• Copied all the CSS files in the assets>css folder from the parent theme.
  → The CSS styles show normal now. However I noticed that the fafa icons from the navbar submenus was not showing, so:

• I copied the webfonts folder along with the js and fonts folder from the parent theme to the child one (just to be safe).
  → Everything showed up correctly!
  However, I was left with the doubts of:

• Why would for my own folder structure show up without having to copy files from the parent to the child one? I had not set up any @imports contrary to what you actually did in sass>main.scss. Is somehow the child-theme not importing them anyway? I thought of uncommenting the line of ‘@import ‘custom.scss’;’ but I don’t see why this would change anything.
  Is it maybe that I have to change all the base.html.twig stylesheet block arguments to ‘…/…/…/future2021/assets/css/main’? However this would not explain why it is not importing the templates.
  

  

Then, if I have copied all the above (templates & css) to my child theme and you update the parent theme, updates would not reflect in my child theme? For what I have read, this is what I think would happen but I am not 100% sure.

• I also noticed an anomaly (to me) and it’s that in the Dashboard, the child-theme does not show up even though it is set up in the system.yaml and it does show up in my themes folder. It shows none being active, even though de facto, the future2021-child-theme is the one active. When I write in system.yaml to have the “future2021custom”, then this one does appear as active like normal.
  (I cleared cache various times and logged in and out as well to see if it would appear, but nope).

  • To try troubleshooting this part, I copied the future2021.yaml content to the future2021-child-theme but without result.

  • I compared the blueprints from parent and child but they are the same.

  • The only difference I can think of, is that for “Future2021custom” I used the inheritance method using the CLI, whereas for “Future2021-child-theme” I gitcloned your child-theme into my themes directory. Should I instead inherit with the CLI, AND AFTER, copy your folder into the child-theme?

Here the pic of “Future2021-child-theme” is configured as active in system.yaml but not showing in GUI.

Apologies for this biblical-long comments, I am trying to describe things as good as I can, for you and me but also for future noobs like me that maybe stumble upon the same rookie mistakes.