Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Support

Change the body class if page uses default.html.twig

Solved by Hugh Barnes View solution

Started by Maleika Esther Attawel 2 years ago · 3 replies · 349 views

2 years ago

Hi, I'm new to Grav and would like to assign the default.html.twig template a specific class.
Scenario: I am building a portfolio page that contains several pages, each of which are assigned different body classes in my CSS.

Pages:

TXT

pages /
   /01.home
   /02.about
   /03.work
     /single-project-folder-1
     /single-project-folder-2

For the work page, I've created a work.html.twig template and a work-item.html.twig template.

When I click any item on the work page, it links to the single item and uses the default.html.twig template. I'm not sure how I can change it to something else.
I created different CSS classes for the body element in base.html.twig. I call them like so:

TWIG

<body class="{{ page.title|lower|replace({' ': '-'}) }}">

This works for all pages. However, I want the single project item that uses default.html.twig to have a specific class of 'test' rather than the page title.

I feel like it's something simple that I am overlooking. If you have any pointers, I'd greatly appreciate it. Thanks!

2 years ago

For now, I've changed my approach by adding a css_class to my .md files. This works well.

<body class="{{ page.header.css_class }}">

I'd still be interested to know if what I tried in my initial post can be done. Is there a way to grab the default.html.twig template and isolate it via a conditional statement or some such?

last edited 05/07/24 by Maleika Esther Attawel

Hugh Barnes Regular

Grav Forum Moderators Veteran First Post Conversation Starter Well Liked 577 posts

2 years ago Solution

It sounds to me like you might be confused about how file names and template names work. What is the name of the .md file in work/single-project-folder-1 and its sibling? If you want to use one of those templates you created, the names need to be work.md/work-item.md. Also, where did you save those templates you created?

If you actually want that class in your default template, there are several ways. Many themes support a conventional custom header body_classes:

YAML

body_classes: test

If I want to be able to use CSS selectors in my theme that tell me the name of the template I'm using, I do something like this in my base template:

TWIG

<body class="template-{{ page.template|trim }} {{ page.header.body_classes|e('html_attr') }}">

That would give me a body.template-default or whatever on every page.

Also, do you know about modifying themes and updating? Themes will be overwritten when you upgrade them, so it's safer to either copy them or (better IMO) inherit them.

2 years ago

Thank you so much for your invaluable response! It was a naming error. I had used single_project.md instead of single-project.md for the corresponding Twig template which is why it resorted to the default.html.twig rather than the single-project.html.twig template.

Everything works as expected now.

Also, thank you for letting me know about future-proofing my template. I hadn't gotten that far in the docs yet. Will set it up the way it is suggested.

Thanks again!

Topic	Replies	Views	Activity
Multisite in subdirectory Support · by Thomas, 1 week ago	2	55	12 hours ago
How to listen for GET requests instead of POST requests? Support · by Anna, 3 days ago	2	60	15 hours ago
Twig not processing in 2.0.0 Support · by Justin Young, 16 hours ago	1	31	16 hours ago
Form: GRAV.Yes translation key Support · by Duc , 1 week ago	2	65	5 days ago
Installing Grav on Windows 11 Support · by Colin Hume, 1 week ago	2	58	5 days ago

Suggested topics