Change page background colour

Support Themes & Styling
1

This might be a stupid question as I am no geek in this world, in fact a total novice. As such I find the Grav doc quite daunting as it quickly plunges into vocabulary and notions that I can’t follow.
Any way getting started with my site and theme Future2021 I just wanted to change the background colour of one of the pages.
I read how to insert html into the markdown file for the page and tried it by adding html into the the portfolio.md but it fails every time and lists the markdown as text on my webpage."
I’m using

ex html code

inserted in my .md file

Is there something I’m missing?

is there a list of what Grav keywords should be used in the markdown files?

Thanks
Ian

2

Hi Ian,

This is a very common confusion when starting with Grav, so no worries :slightly_smiling_face:

What’s happening is that inserting raw HTML into a .md file is not always the best approach for layout or styling changes like background colors. In Grav (and especially in themes like Future2021), it’s much cleaner to handle this via CSS and page-specific classes.

In your theme, there is already a mechanism prepared for this in base.html.twig:

This means you can assign custom classes to the <body> tag from each page.

Recommended approach

  1. Add a class to your page

In your page’s .md file (or via the Admin panel → Advanced tab), add:

body_classes: custom-bg

  1. Define the CSS

Then, in your theme’s CSS file (e.g. custom.css), add something like:

body.custom-bg {
background-color: #f0f0f0;
}

Or if you want something more specific:

body.custom-bg .wrapper {
background-color: #f0f0f0;
}

Result

Only that specific page will have the new background color, without needing to inject HTML into your Markdown.

Extra tip

Grav Markdown files are mainly for content, not for layout or styling. For styling:

  • Use CSS
  • Use Twig templates
  • Use page headers (like body_classes)

This approach is much more flexible and avoids the issue you’re seeing where HTML is rendered as plain text.

Hope that helps!

3

Hello Pedro
Well I had a go with your instructions but didn’t succeed.
What I did.

  1. In the Admin Panel I added the line as suggested

Body class
Body class374×125 14.1 KB

  1. I created a custom.css file in /var/www/html/user/config/themes with the content you suggested
    body.custom-bg {
    background-color: #455e23;
    }

I see no change to my page.
Maybe it needs to be somewhere else?

Thanks
Ian

4

Well I did make it work by scouting around. The custom.css file I had to creat a new css directory under the Future2021 theme.
Unfortunately the background-color change is only partial, where the “content” is placed the box is all white.
I need to dig deeper clearly

Also its fairly clear that the Owl carousel as-is won’t work very well with photos in portrait format.

lets more to learn
thx

Ian