Hi all! I’m trying to create a theme inheritance using Quark as base-theme. I followed the tutorial (which is for Antimatter) but when I arrive at this point “First, you need to copy over the main SCSS file from antimatter that contains all the @import calls for various sub files, including the template/_custom.scss. So, copy the template.scss file from antimatter/scss/ to mytheme/scss/ folder.” I get lost, because I can’t find a “template.scss” file in Quark folder.
Thanks for your reply!
Hi @maria, indeed those instructions are when Antimatter was the default theme for Grav, but the general process is the same.
Here is a link to an example inherited Quark theme, please give it a try and let me know if it works for you: http://hibbittsdesign.org/blog/downloads/my-quark.zip
ps - you may need to view/save the options for this theme on your site for settings to be configured as expected, esp. transparent header bar.
Hi Paul, thanks for your reply. I unzipped the file and put it in user/themes folder of my website. Now what? because I see that the custom file has a .css extension, not a .scss extension. Must I rename it? And which is the name of the original Quark file I can modfy in my custom.scss?
If I want for instance change the link color, where can I find the original code?
Sorry, but with Grav I’m a newbie, though Joomla and Gantry 5 have (nearly) no secrets for me…
Hi @maria, you would put the expanded ZIP archive (theme) into your user/themes/ folder and then set your active theme to that inherited theme (via the system.yaml file or Admin Panel). https://learn.getgrav.org/basics/grav-configuration
I do not use .scss myself, so I do not know about using that type of file. Any CSS you put in the .css file in the inherited theme should be picked up, but you might want to also turn off the caches (2) in the system.yaml (see link to Grav config details above) so changes show up right away as you develop.
For further CSS customization, you can also copy any of the CSS files of the Quark theme into the same folder location in your inherited theme and make changes - they will remain even if the Quark theme is updated.
Hope the above info helps.
Paul
1 Like
Hi @maria
I’ve exactly the same question as yours.
Did you finally find a solution to have custom scss with a Quartz inherited theme ?
I tried to put a _custom.scss file into my custom theme’s scss folder and compiled the output to css-compiled, without success.
Hi,
too bad, the docs (learn.getgrav.org) are still for antimatter :-/
Is there a updated source for Quark (Spectre) somewhere?
Thanks,
gravcoder24
Hi gravcoder24,
I managed to extend the Quark theme and getting the _custom.scss working by following the advice given here:
Hello,
could you please provide some more details about how you managed to get it to work? I followed the steps in the linked issue but I couldn’t make it work.
I copied the theme.scss from the original Quark theme folder, created a /template/_custom.scss file and added the import line to the theme.scss file. Then I used the following command from here (https://learn.getgrav.org/themes/customization) to run the scss compiler:
scss --load-path ../quark/scss --watch scss:css-compiled
The command line shows detected changes and writes the new css files but nothing changes when I load my site.
This is my _custom.scss file to override some color values set in the spectre/_variables.scss file:
$bg-color: #000000;
$body-bg: $bg-color ;
$body-font-color: #ffffff ;
Is there anything else that needs to be added or done differently?
My modified twig templates get picked up correctly so the theme inheritance process should be working.
Hi Janbo,
you’re right about the variables not being respected in _custom.scss. It happens because of the order the css is being compiled in, as far as I can tell:
So a workaround could be to make a new _variables.scss file in your themes /template folder and then - in your theme.scss - put it after the import of the _variables file from the quark theme but before the remaining theme scss imports, like this:
// Core variables and mixins
@import 'spectre/variables';
@import 'spectre/mixins';
@import 'theme/variables';
@import 'theme/mixins';
// custom scss vars need to be injected here
@import 'template/_variables.scss';
@import 'theme/framework';
@import 'theme/typography';
@import 'theme/forms';
@import 'theme/mobile';
@import 'theme/animation';
@import 'theme/header';
@import 'theme/footer';
@import 'theme/menu';
// Extra Skeleton Styling
@import 'theme/blog';
@import 'theme/onepage';
// custom scss
@import 'template/_custom.scss';
I am completely new to Grav so this might be all wrong - but it seems to work 
1 Like
Thanks a lot for the quick reply. I followed your tip and finally managed to get it to work.
The other important thing is that I also had to modify spectre.scss file because that’s where the main colors seem to be implemented.
Hi @paulhibbitts, that link for my_quark.zip sends me to a 404 
Hi @aldo, it’s been quite a while since that post🙂 I was able to restore the file - hope it helps!
Thanks @paulhibbitts for your quick response.
Will try this out 