Skip to content
● Grav 2.0 is officially stable. Read the announcement →

Community guidelines

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

Log in Register
Themes & Styling

Change page background colour

Started by Ian 2 months ago · 3 replies · 90 views
2 months ago

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|402x73

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

last edited 04/20/26 by Ian
2 months ago

Hi Ian,

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

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:

<body class="{% block body_classes %}{{ page.header.body_classes }}{% endblock %} is-preload">

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:

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

Or if you want something more specific:

CSS
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!

2 months ago

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|374x125

  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

2 months ago

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

Suggested topics

Topic Participants Replies Views Activity
Grav 2 + Admin2: custom page blueprint fields not showing in Admin
Themes & Styling · by Pedro M, 2 months ago
4 193 2 months ago
Customizing Blog Post Layout Using "Summary Size and Separator"
Themes & Styling · by Norbert, 2 years ago
11 449 3 months ago
Fork of the Knowledge Base theme
Themes & Styling · by Lukáš Findeis, 3 months ago
0 44 3 months ago
Oxygen theme not working right
Themes & Styling · by Sebadamus, 4 months ago
5 123 3 months ago
Adding drop-down nav menu functionality to CeeVee theme
Themes & Styling · by Baphijmm, 4 months ago
4 81 4 months ago