Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Themes & Styling

How to customize scss files provided by theme

Started by Emmanuel Lesouef 4 years ago · 3 replies · 1512 views
4 years ago

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

4 years ago

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:
https://learn.getgrav.org/17/themes/customization#theme-inheritance
Regards.
joejac

4 years ago

@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
last edited 11/23/22 by pamtbaau
4 years ago

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

👍 1

Suggested topics

Topic Participants Replies Views Activity
Themes & Styling · by Pedro M, 2 months ago
4 222 2 months ago
Themes & Styling · by Ian, 2 months ago
3 118 2 months ago
Themes & Styling · by Norbert, 2 years ago
11 481 3 months ago
Themes & Styling · by Lukáš Findeis, 3 months ago
0 72 3 months ago
Themes & Styling · by Sebadamus, 4 months ago
5 132 3 months ago