This is properly doing my head in - I didn’t think I would find customising grav so challenging.
I have setup a theme inheritance and I would like to change the value of $showcase-bg and $showcase-text to white and some shade of blue respectively (these are the colours of the showcase bit in the blog part of afterburner). I have done the following:
Made the custom scss folder: mytheme/scss/template
Copied over themes/afterburner2/scss/template.scss to themes/mythem/template.scss
I made a file called _custom.scss with the following contents:
I also had a confusing time trying to process SCSS using a parent theme. However, I think your problem here might be that you have made changes and then run the script which watches for changes.
Try making a trivial change to the _custom.css file like adding a newline. You should see a message on standard output in the terminal where your SCSS script is running, which tells you it’s detected an update. Then check if the style has been applied and update this thread. Also be sure that you clear your cache, depending on your CSS and asset settings, and that you make sure there is no asset caching in your development environment.
(I actually had this problem in the current project I am working on, but my terminal session has since been lost because my laptop crashed So I can’t be sure I saved my workaround. Will find out soon if not.)
I’m looking into this again. I really dislike this poorly documented, practically obfuscated, “modern” web stack. In my day, the web stack was transparent Docs often assume you understand how this works, which, to be fair, most developers do. Style is more of a necessity than something I actually GAF about.
(That was a half sarcastic rant)
Looking at what I have, I don’t think I actually did get the custom SCSS to work. Looks like I may have just reverted to simple CSS in _theme_/css/custom.css. I may have had to add:
{% do assets.addCss('theme://css/custom.css', 98) %}
to my page template and you may too. Doing it through the CSS workaround is unfortunately a technical debt I am creating. To be super clear, I do accept that SCSS offers many advantages when it works.
Sorry, I am probably a poorly qualified person to answer your question and perhaps should have left it be. However, the problem was familiar to me.
This will import the original scss files from the Afterburner theme into your own ‘template.scss’. So, no need to copy all of them.
Import your own ‘_color.scss’ (and/or other configuration files) directly after the import of ‘templates/modules/base’ which imports the original ‘_colors.scss’.
This way, your ‘_colors.scss’ overrides the original variable before any other scss file will use them.
// Load Template Library
@import "../../afterburner2/scss/template/modules/base";
@import "colors"; <-- you colors now overrides the previous imported colors.
Tip: If you need more complex changes, you could create your own ‘_custom.scss’ and import it at the very end of your ‘template.scss’.
Note: Never put configuration files like ‘_colors.scss’ at the bottom. If you do, all scss files will read the original variables before your override them at the bottom…
Run your favourite sass compiler and compile your own ‘/themes/scss/template.scss’ into /themes/mytheme/css-compiled/template.css
@hughbris I agree about the feeble documentation and general complexity of the whole thing. I’m not even sure who the documentation would help really! I come from a mathematical computation background and I find this all a bit over the top in terms of complexity. Then again, that’s probably just because I don’t understand it (yet…)
EDIT: Upon reading your post again @anon76427325, I think I’m starting to get the logic a bit better.
Good idea! Once I get this to work I will make some suggestions directly on Github. I think some concrete examples and elaboration on how to configure a theme would go along way.
Sorry for the confusion - I understood what to do the first time, I meant the logic behind why you had to do what you suggested. Particularly it makes sense that in ‘/themes/mytheme/scss/template.scss’ you put the @import "colors"; line at the end to overwrite / overload existing settings. I was wondering how on earth grav / my server knew to use my _colors.scss file and not afterburner2’s.
I was wondering how on earth grav / my server knew to use my _colors.scss file and not afterburner2’s.
Grav doesn’t know… but the Sass compiler does because you tell it where to get it…
When using @import "../../afterburner2/scss/template/modules/base" you tell the compiler to get the file from theme afterburner2 (two folders up and then down into folder ‘afterfolder2’).
When using @import "colors"; you tell Sass to include a file from the current folder.
Thanks. I can successfully compile fine (save a deprecation warning), but it appears that none of my changes have an effect. I tried for example:
// Page Background
// Colour is usually white
$page-bg: rgb(18,21,40);
But that didn’t change the page background colour. I guess I’ll have a look in the compiled-css folder to see if I had the desired changes. Come to think of it, do I need to tell my theme somewhere to include the compiled-css folder? I.e. do I need to reimport some twig stuff somewhere in mytheme/partials or something?
@gobs, Your observation is correct. Unfortunately, the body is hidden by <div> class="sb-site"> covering the entire page.
In ‘css-compiled/template.css’ you will see the correct background color for ‘body’
Test using $core-text and compile again:
$core-text: red;
No need to fiddle with templates, ‘css-compiled/template.css’ is already added by the template. Because you have ‘css-compiled/template.css’ in your own theme, Grav will use yours and override the css from Afterburner2.
Thank you for all the help. I realised eventually that the problem was that I had to put @import "colors" just after @import "../../afterburner2/scss/template/modules/base"; as you originally suggested - I put it right at then end because your second comment:
Tip: If you need more complex changes, you could create your own ‘_custom.scss’ and import it at the very end of your ‘template.scss’.
Thank you for all your help and patience! Very much appreciated.
So I can’t be sure I saved my workaround. Will find out soon if not.)
Docs often assume you understand how this works, which, to be fair, most developers do. Style is more of a necessity than something I actually GAF about.