cssgrav

How to to change colors in a grav theme?


This must be an easy question but I'm coming up blank. I have a grav website that uses a theme derived from antimatter. There isn't much in my theme, it mostly inherits. Everything works just fine.

I want to change some colors around. Specifically I want to change the background color of the footer. As I say, this must be easy. I can see there is a _footer.scss in themes\antimatter\scss\template which has background: $footer-bg; in it, which looks like where I need to be. I find two places where $footer-bg is defined, both _colors.scss in scss\configuration\template directories in the antimatter theme and in my custom theme, which inherits from antimatter. I have run scss --watch scss:css-compiled on both themes, cleared my cache, and refreshed the page. I still see the old background color.

both of my _colors.scss files have

$footer-bg:                     #c7254e;

(which is redish, but it shows the old color, a dark grey)

It seems like I did the obvious here, but what did I miss?

I also tried adding this to mytheme\css\custom.css

footer {
    background: white;
}

but it didn't make any difference.

My Grav version is v1.7.46, it uses PHP Version 8.1.2-1ubuntu2.17


Solution

  • Thanks to encouragement from @passerby I revisited the custom.css file and I can confirm it does work. Why didn't it when I tried earlier? I'm not sure. I have to blame caching, which definitely would give the problem I described, basically none of the changes take effect. I thought I checked that but maybe I got muddled. Anyway, for someone who finds this: Yes, changing custom.css in the inherited theme does work. But if it doesn't then check your caching. Hold down shift and hit refresh is the usual way (works on FF anyway). Or go to an anonymous/private window and try.