rubyjekyllgithub-pages

How can I override specific styles in Jekyll Minimal Mistakes theme?


I am using the Minimal-Mistakes gem-installed theme and am using the neon skin with it. I really like what it offers out of the box but I do want to change the footer-background-color. What I have done so far in attempt to override the styles is the following:

Copy over _sass/minimal-mistakes for all the style imports that it provides. I just copied everything in here based on the instructions here.

Like I said, I didn't want to change much at first, I wanted to at least see if it was working. So I made a main.scss in my assets/css folder in root.

It looks like this:

/* assets/css/main.scss */
$footer-background-color: #ff0000;  // Set the footer background color here

@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin | default: 'default' }}"; // skin
@import "minimal-mistakes"; // main partials

Here I put the style I want to override before the import statements, like it says in the MM docs.

I also see this in my jekyll logs where it is hitting the main.scss file but is not doing anything: /home/malexander15/malexander15.github.io/assets/css/main.scss 4:9 root stylesheet

But I'm not entirely sure that means anything.

I didn't see anything else I was supposed to do after this in the docs. What exactly am I missing?

Also, this post is very very close to the same problem. The best answer on this post is very elaborate and verbose but I am confused by what they did for the actual solution and how to apply it in my situation.

I tried changing the background color of the footer for the minimal-mistakes theme, with the neon skin applied, from background-color: #18020a; to ff0000. Nothing appeared to change.


Solution

  • If you look at the original main.scss, it starts with this front matter:

    ---
    # Only the main Sass file needs front matter (the dashes are enough)
    search: false
    ---
    

    This could be phrased stronger: it must have front matter.

    Even if you don't set anything in front matter, you still have to have it, or else Jekyll just copies the file as-is instead of processing it (to CSS, in this case).

    This is mentioned in the Jekyll docs, under Assets:

    Jekyll provides built-in support for Sass and can work with CoffeeScript via a Ruby gem. In order to use them, you must first create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:

    ---
    ---
    
    // start content
    .my-definition
      font-size: 1.2em