Override CSS in a theme

I have seen several posts that discuss how to override Minima CSS with my own CSS. I have created two files,<my_site>/assets/style.scss> and <my_site>/_sass/wobstyle.scss but the CSS from the Minima theme is not being overridden.

Here is <my_site>/assets/style.scss>

    ---

    ---

    @import "minima";

    @import "minima/base";

    @import "minima/layout";

    @import "minima/syntax-highlighting";

    @import "wobstyle";

and here is <my_site>/_sass/wobstyle.scss:

    $background-color:#fefff6 !default;
     
    .footer-col-1 {
      width: -webkit-calc(30% - (#{$spacing-unit} / 2));
      width:         calc(30% - (#{$spacing-unit} / 2));
    }

    .footer-col-2 {
      width: -webkit-calc(30% - (#{$spacing-unit} / 2));
      width:         calc(30% - (#{$spacing-unit} / 2));
    }

    .footer-col-3 {
      width: -webkit-calc(40% - (#{$spacing-unit} / 2));
      width:         calc(40% - (#{$spacing-unit} / 2));
    }

    .footer-copyright {
        background-color: eaff08;
    }

Can anyone see what I am doing incorrectly?

I have not used the default them in a long time - if you look in the site folder is your style.css file there? is there another style sheet in there? you need to make sure you are over writing the correct one, I think you may be adding one in but it is separate and not being used. Do you know what the css file is called that is used on the live site?

Did you copy any of the minima files into your repo? you are importing them in the sass file but are they actually there? if not I think your style.scss file is named wrong, you need to name it to what it should be and then copy the actual files from the gem into your repo so you can use them. Something like that, I am not a fan of the gem based themes as they hide things and it is not real clear what is going on as it is pulling files from a hidden gem folder without you being able to see them. There is a command to show you where those files are so you can put them in the repo and then edit them - bundle show minima

this may help:

Summarizing @rdyar’s comment above, when overriding theme styles, ensure that you’re the same relative path of the stylesheet.
If the version of Minima you’re using has the main stylesheet at path
<minima-gem>/assets/styles.scss, then your main stylesheet should be at <source>/assets/styles.scss.
If Minima has it at <minima-gem>/assets/main.scss, then your main stylesheet should be at <source>/assets/main.scss

1 Like