How can I apply different CSS style to just one page?

I'm a newbie to Grav, so I hope there is a solution that is relatively easy to implement, or can at least be explained in simple steps.

I have a custom template that was made for me by someone else, so I don't necessarily understand it's structure. I'm learning Grav by experimenting with editing.

Right now, I have this one DIV that is part of the template that appears on every page on my site. It has a background-color that is white.

However, on my top page, and on my top page only, I want that DIV to have a background that is black.

Is this possible to do somehow?

yes, of course this is possible 😄 .
all you need is use another template for that particular page: just copy the template you are using for the other pages such as default.html.twig, give the copy a new name, e.g. mydefault.html.twig, then assign the relevant DIV a new class, e.g. bgblack.
then you can use this class to set your background color in your respective css file.
these files (templates, assets) are all specific to your theme, so, if you are using a standard theme like quark, be sure to use theme inheritance.

Thank you for replying.

I have a file called base.html.twig, which seems to contain all the general HTML used across the site.

I also have a file called home.html.twig, which contains the HTML that is only on the top page.

If I understand you correctly, you're saying I should make a copy of base.html.twig, rename it base2.html.twig (or whateve name) and edit base2 to give my DIV the right styling, then make home.html.twig refer to base2.

(I'm not totally sure how to link home.html.twig to a different base file, but I'll see if I can figure it out.)

This seems like a workable solution, but I'm concerned about the long term upkeep. If I do this, doesn't that mean if I make any edits to base.html.twig, I'll have to make sure I also make the same edit in base2.html.twig?

Having two copies of the same file where everything is the same except for just one DIV seems to be very inefficient and prone to human error down the road where I edit one and forget the other.

Is there no way to create something more conditional, where I can say, "This DIV is always like X, except on the home page, where it's like Y"? Or somehow separate that DIV out of the flow so that I don't have to maintain two copies of the same code?

well, my proposal was more a general recipe, without knowing your actual theme/templates.
if you already have a template home.html.twig that is only used for the page you want another background, and contains the relevant DIV, then just edit that and leave the rest as-is.
otherwise, there is no problem having more other templates, like base2, base3....
and just use them as appropriate.
the most important thing is to not edit your theme's files directly, as this will result in problems whenever a theme update is available.
with the above mentioned theme inheritance, you can avoid that, plus, your child theme will only consist of your adapted files, making them easy to spot and update, once the parent theme gets updated.

Thanks for responding, though you've misunderstood me.

base.html.twig contains HTML common to ALL pages on the site. It is in this file that I want to be able to change one DIV, but only when it is being applied to home.html.twig.

I was hoping for an elegant solution involving some kind of conditional statement, but I guess Grav is not that sophisticated, so I will have to go with the more brute force method of having duplicate code.

Thanks anyway.

Hi dave,
you shouldn't change base.html.twig for a minor change like that.

You could do a couple of things - the most GRAV like one would be to change the DIV styling via some info in the header.

For example, if your standard div has a class of header, for example, you could make a css class called, for example header-dark that changes the div background colour.

In the frontmatter of the home-page (or whichever has the dark header) you add a field like so:

title: Home
class: header-dark

Now you can use twig to inject the different class into the div class, like so:

<div class="header {{ page.header.class }}">My header</div>

If the class exists, the page div will become "header header-dark" and the background colour will be dark.

Hope this is clear.. : )

@dan-james:
In the frontmatter of the home-page (or whichever has the dark header) you add a field like so:

YAMLCopy

title: Home
class: header-dark

Thank you for this response.

I understand in principle what you are suggesting, but I'm having a hard time implementing it.

Adding the {{ page.header.class }} into the template file, "base.html.twig" is no problem and makes sense to me.

However, the page where the DIV I want to modify exists is called home.html.twig, and at the top of the file is code that looks like this:

{% extends 'partials/base.html.twig' %}
{% set blog_image = page.media.images[page.header.hero_image] ?: page.media.images|first %}
{% set collection = page.collection() %}
{% set blog = page.find(header_var('blog_url')|defined(theme_var('blog-page'))) %}
{% set show_pagination = header_var('show_pagination', [page, blog])|defined(true) %}
{% block body %}

If I put this code:

title: Home
class: header-dark

... at the top of home.html.twig, it causes syntax errors:

Twig_Error_Syntax
A template that extends another one cannot include content outside Twig blocks. Did you forget to put the content inside a {% block %} tag?

If I understand correctly, the file I'm modifying is a Twig file, and the code you've provided is for .md files...? Maybe?

What is the correct syntax for adding the additional class at the top of home.html.twig?

Great - sorry I didn't get back to try and explain better. Glad you got there : )