Hi I would like to change the overlay color of the header background image. Which css file do i have to edit and where?

There is a plugin available for custom css - https://getgrav.org/downloads/plugins

It gave me an error until I added an actual custom.css file but once you have your custom.css file you can add your styles to the file to make changes to your site without changing any of the default theme settings.

so i just need to know which element i have to overwrite with the custom.css?

Yes. For example, to change the header background color to #ccc you would add the following to your custom.css file:

header {

background:#ccc;

}

Are you familiar with using the web inspector in chrome? It helps a lot.

One thing to note: Antimatter's header background image has been colorized using colorize filter in the file /user/themes/antimatter/templates/modular/showcase.html.twig.

I've noticed that often when you change one thing you'll get hungry and want to change something else, then a ton of other things, so it might be best to set up your own custom theme.

@tom0360 yes i am familiar with the web inspector but i couldn't find the correct element which was in charge of the color.
@Janne Lehtinen thanks for the tip. I will look into it.

I think i will work on a custom theme really soon.

Janne, thank you very much for the tip. I am just starting out with Grav and am still learning as I go. I agree that creating your own theme may be best but also not always needed especially when using a theme already created that is close to what you want. Sometimes it is easier and better practice to have a separate custom.css file to overwrite the css styles you need to change. I guess it may depend on how much customization to the original theme you will need to do. The other reason for this is that some elements may not be tied directly to the theme design and if changing a theme you may want some css to stay in place for those elements.

I am really looking to dig deeper into development with the Grav platform. I do a lot of wordpress development but have recently started to become more intrigued by the possibilities of Flat File CMS and using it with Bootstrap. Grav seems much better than I expected to find. I still have a lot of questions I need to work through before using it for a clients project but It certainly looks robust enough to handle it once I get a handle on the best methods to get things done.

It is actually the best practice to create a custom theme to extend your chosen theme (Antimatter in your case).

A short version of the tutorial I linked: a custom theme is basically an additional folder /themes/mytheme with these files inside: yourtheme.yaml, blueprints.yaml and mytheme.php + only the customized items — like /templates/modular/showcase.html.twigif you want to change the background image filter color.

Any .html.twig templates, js, css and other files not found in /mytheme will be fetched from the original /antimatter theme folder. You also need to edit user/config/system.yaml to look into /mythemefirst.

That way if Antimatter gets updated your customizations won't get overwritten by the new version.

And this is the line that defines the background image color when you get around to editing /user/themes/antimatter/templates/modular/showcase.html.twig :)

{% set showcase_image = page.media.images|first.grayscale().contrast(20).brightness(-125).colo rize(-35,81,122) %}

Janne, Is this method similar to creating a child theme for wordpress? If you are familiar with that.

what Janne Lehtinen is describing, is also called theme inheritance.
It is also possible to follow it thrue documentation of learn.getgrav.org
see:
https://learn.getgrav.org/themes/customization#theme-inheritance
I was also a complete beginner arriving at Grav, and I learn a lot from there.
Grav has the advantage to be really open so you make your choices, step by step... like for a voyage.
Good luck!!

mhm tried to change the color in /user/themes/antimatter/templates/modular/showcase.html.twig but nothing is happening. :/

theme inheritance
also see:
https://getgrav.org/blog/theme-development-with-inheritance

tidivoit, Thank you. I have been going through the learning section of getgrav. It has been very helpful. After working with wordpress for the last 6-7 years, I started working with creating a few bootstrap sites for clients and it was such a relief and felt so freeing... Having a great flat file cms that can work with or without bootstrap and work so well with responsive design really does seem to open up development possibilities. As far as development goes I feel hooked already my only concerns right now are related more to turning over the site to a client. I still need to learn setting up users and possible restrictions to see what can be done on that front and still am not comfortable with using images.

Exactly. Thanks @tidivoit :) Theme inheritance I wish I'd known about when I started with Grav.

@alaskatheblog try disabling Grav cache when building your site. That's in /config/system.yaml: cache: false. Otherwise pages won't update unless you edit the .md files

...to name another thing I wish I'd known when I started, would have saved a few hours :D

i just edited and updated the first blog page and cleared the chache but still nothing.

to @janne Lehtinen:
don't worry, even with the documentation, I also spent hours as everyhting was new to me.
To swim, you have to get into the water!
I just went out of trouble with form on a modular page with multisites setup, I don't know exactly why!??!!! (after several weaks of doubt...)
.... Coding is at the same time fascinating and frightening!!!!

not sure but would you need to modify the blog.html.twig file for the blog and not modular.html.twig?

I am not certain but there seems to be twig files for the different page types.

tidivoit, Grav looks well worth the effort to learn. I really am hoping to find it to be the wordpress alternative I have been looking for. I do freelance work for a few other web developers and I am already seeing potential uses for Grav with some of their needs. It may be something I would enjoy working with, supporting and being to contribute back to the community.