How to customize scss files provided by theme

Hello,

I’m pretty new to Grav but I’m getting used to it and in fact, love it.

Some context : I use Grav on a docker container and with a skeleton deliver theme.

I can customize some CSS using themes/deliver/css/custom.css. Right.

What I’m trying to do is change de core-accent color value. I understood that if I change it in themes/deliver/scss/configuration/template/_colors.scss I have to “recompile” it using scss.

But it seems I don’t have this executable on my docker image.

What do you suggest me to do in order not override loads of CSS items ?

Thanks for your help.

Emmanuel

Additional infos : Grav v1.7.37.1 - Admin v1.10.37.1

Hello @elesouef
I make all my css changes on custom.css but in my inherited theme, not on the parent theme (base-theme), as well as any changes in the twig templates, I use the browser inspector, identify the style I want to change and make the changes in custom.css, no compilation. I would suggest to read the documentation:

Regards.
joejac

@elesouef, I’m not familiar with Docker, so the following might not make sense

  • Install Sass executable to use at the command line.
  • In the theme edit file scss.sh and replace scss --watch scss:css-compiled with sass --watch scss:css-compiled.
    See Sass commandline interface
  • Make your scss changes
  • Run $ ./scss.sh
  • The result of the compilation will override the contents of folder css-compiled.

To make things a little bit more complicated… You should create a child theme which inherits from theme Deliver. If not, the next version of Deliver will override your changes…
See link mentioned by @joejac for a tutorial on creating a child theme.
In you child theme, you can create a new scss file which imports the top-level scss files from Deliver. Also copy scss.sh and adapt the command to compile you local scss file.

Hope this helps…

1 Like

Thanks for your replies @joejac and @pamtbaau : I’ll take a look at creating a inherited theme.

1 Like