How can I change the colour of the header text?

[thephet]

I am using an image as header which has some overlay text.

I am following this:

https://mmistakes.github.io/minimal-mistakes/docs/layouts/#header-overlay

And my problem is that the colour of the text is white, while I think that Black would work better for me.

[mmistakes]

If you know how to write CSS you can change it to whatever you want. There’s nothing directly in Jekyll or the theme to facilitate this, you’ll need to customize.

https://mmistakes.github.io/minimal-mistakes/docs/stylesheets/

[thephet]

my knowledge of css is a bit basic. what file should I modify? I tried to search around for "header" but I couldnt find it. I could modify masthead, but that's something different.

thanks for our help

[JohnScottUK]

I had the same query. Minimal mistakes allows an _includes/head/custom.html file which I added the following to:

<style>
  {% if page.header.text_color %}
    .page__hero--overlay .page__title,
    .page__hero--overlay .page__meta,
    .page__hero--overlay .page__lead,
    .page__hero--overlay .btn {
      color: {{page.header.text_color}} !important;
    }
  {% endif %}
</style>

Which allows me to specify:

header:
  overlay_image: /assets/images/...
  text_color: black

In the page's front matter.