Custom CSS with remote_theme

[webmaster128]

Hello and thanks for building this theme!

Is there a simple way to add some custom CSS when using this with remote_theme? I don't want to override any of the theme's style files.

If I understand, the imports work like

/assets/css/style.css is built by assets/css/style.scss, which includes _sass/portfolYOU.scss, which includes _sass/{variables,base,navbar,projects,articles,autumn,skills,timeline,404}.scss.

What about importing an empty _sass/custom.scss file as well, which can safely be overriden?

[yousinix]

Try overriding assets/css/style.scss and add your custom style there.

[webmaster128]

This does not seem to work for the assets directory. If I try to override assets/css/style.scss,

1. The original assets/css/style.scss is compiled into _site/assets/css/style.css
2. My file is copied into _site/assets/css/style.scss without being compiled

[yousinix]

Hey @webmaster128, I have added the required file, please test it and tell me if it really solves the issue. Thanks in advance.

[webmaster128]

Hi @YoussefRaafatNasry, thank you!

Unfortunately overriding partials inside of _sass does not work. This matches what is documented here:

Note: To make more extensive changes and customize the Sass partials bundled in the gem. You will need to copy the complete contents of the _sass directory to due to the way Jekyll currently reads those files.

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

and

Note that the sass_dir becomes the load path for Sass imports, nothing more. This means that Jekyll does not know about these files directly.

https://jekyllrb.com/docs/assets/

For this reason I'd revert 9d883d557010083a64c137eada38ca7f1a9a4e02.

---

However, reading some more documentation I realized that your first suggestion works if I include the empty ---/--- block. It was not clear to me that this is crutial for the Jekyll override mechanism.

What I tried before (not working):

@import "portfolYOU";

body {
  background-color: greenyellow;
}

What actually works 🎉 :

---
---
@import "portfolYOU";

body {
  background-color: greenyellow;
}

One great thing is that it allows you to append and prepend to the portfolYOU style.

[yousinix]

Thanks @webmaster128 for your efforts! I've forced push to exclude 9d883d5.