Theme Inheritance - problem overriding scss

Archive
1

I have been working on a child theme inherited from Deliver. Everything has worked fine so far. Today I decided to experiment with overriding some scss. I have carefully followed the instructions at the bottom of the page at: http://learn.getgrav.org/themes/customization

The experiment was simply to try overriding the height of the showcase slide container. The original is found in _showcase.scss. I copied the relevant lines, put them into my childtheme/scss/template/_custom.scss file and changed the critical value. Everything recompiles fine. BUT my _custom.scss modification shows up in the new template.css file along with the old code I intended to override:

/* reduce height of slideshow container ay 26-10-15 */
.modular  .slideme_container {
  overflow: hidden;
  margin-top: -15rem;
  padding-top: 15rem;
  height: 30.7rem; }
...
     /* original code that should have been overriden ay 26-10-15 */
.modular .slideme_container {
  overflow: hidden;
  margin-top: -15rem;
  padding-top: 15rem;
  height: 34.7rem; }

If I delete the last block by han d, everything is fine in the browser.

I’m sure that it is something simple and obvious that I just can’t see right now. All my other Grav questions have been easily answered from the documentation. Obviously there are several brute force strategies that would work, but I would prefer to sort out the correct and elegant method.

Help would be greatly appreciated! I like Grav a lot by the way …

thank you
ay

2

SCSS compilation will not replace / override the same code blocks. All it really does is look for your files if they exist, and use those rather than the inherited file.

You just have to be more specific in your SCSS than the original, like any CSS.

3

If you change the order of your imported scss files, so that your _custom.scss file will be imported after all other scss files its output is at the very end of the generated css file and therefore should override the default styling.

4

Changing the order … that’s a very good point. I’ll give it a try. Thank you!

5

how is it possible to change the order technically?

6

adjust the order in the scss/template.scss file.