Changing the background color of the blog showcase page in afterburner2

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:
  SCSSCopy

  // Showcase
  $showcase-bg: #FFFFFF;
  $showcase-text: rgb(18,21,40);
  

• Eventually I manage to get the following command (run in `themes/mytheme) to work: scss --load-path ../afterburner2/scss --watch scss:css-compiled
• This produces the following message, which seems iffy:
  >>> Sass is watching for changes. Press Ctrl-C to stop.

But obviously this does not do what I want. Any help?

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.)

Indeed if I change the scss then in the terminal it says:

>>> Change detected to: scss/template/_custom.scss

No update on my webpage though. What should my mytheme/scss/template/template.scss file look like? Currently I just copy pasted it from afterburner2:

// REQUIRED DEPENDENCIES - DO NOT CHANGE

// Load Third Party Libraries
@import "vendor/bourbon/bourbon";

// Load Nucleus Configuration
@import "configuration/nucleus/base";

// Load Template Configuration
@import "configuration/template/base";

// Load Nucleus Mixins and Functions
@import "nucleus/functions/base";
@import "nucleus/mixins/base";

// Load Template Library
@import "template/modules/base";

//-------------------------------------------

// TEMPLATE COMPONENTS

// Core
@import "template/core";

// Extensions
@import "template/extensions";

// Header
@import "template/header";

// Footer
@import "template/footer";

// Typography
@import "template/typography";

// Breadcrumbs
@import "template/breadcrumbs";

// Forms
@import "template/forms";

// Tables
@import "template/tables";

// Buttons
@import "template/buttons";

// Pushy Panel
@import "template/panel";

// Blog
@import "template/blog";

// Errors
@import "template/errors";

// Custom
@import "template/custom";

// Modular
@import "template/modular/all";

Interestingly, if I add the lines:

$showcase-bg: #FFFFFF;
$showcase-text: rgb(18,21,40);

to afterburner2/scss/template/_custom.scss, a change is also detected:

>>> Deleted template detected: ../afterburner2/scss/template/_custom.scss
>>> New template detected: ../afterburner2/scss/template/_custom.scss

... but again nothing happens. Which suggests that actually I'm probably editing the wrong thing?

I'm also confused as to where _colors.scss is loaded (as you can see, it's not loaded in afterburner2/scss/template/template.scss.

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.

@pamtbaau Thanks, I will try that!

@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 @pamtbaau, I think I'm starting to get the logic a bit better.

@gobs, If you have any recommendations to increase its clarity, please share...

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.

-------- Oorspronkelijk bericht --------

@gobs,

EDIT: Upon reading your post again @pamtbaau, I think I’m starting to get the logic a bit better.

I meant recommendations on my explanation... :-)

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.

@gobs

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.

/user/themes/
  mytheme/
    scss/
      _colors.scss      <-- @import "colors"
      template.scss
  afterburner2/
     scss/
       template/
          modules/
            base.scss  <-- @import "../../afterburner2/scss/template/modules/base"

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.