Change Quark Background Color

Support Themes & Styling
,
1

Sorry, first time Grav user here. I am trying to change the background color of my custom/inherited Quark theme (I just copied the theme and renamed so I could customize).

I am having trouble changing the background color using custom.css. I’ve tried using selectors for body, #start, #page-wrapper, #top…really everything that I can find when I view and inspect.

When the DOM loads, I can see the my desired background color, but as the page populates, the normal Quark “white” is placed over it.

I’ve even tried editing the _base.scss file to properly display a different color, but no dice.

If anyone has had any luck changing the background color, or can point me to the file that is populating the other white color, it would be greatly appreciated. Thank you!

1 Like
2

@logjammin, When performing the following steps, all seems to be working well…

  • Fresh install of Grav 1.7.18
  • Install plugin ‘devtools’: $ bin/gpm install devtools
  • Create inherited theme using $ bin/plugin devtools new-theme
  • Tell Grav to use the new inherited theme in ‘/user/config/system.yaml’
    pages:
  theme: mytheme
  • Create file ‘/user/themes/mytheme/css/custom.css’ with:
    body {
    background: red;
}
  • Open the site in the browser and enjoy the red background.
3

Ah, okay!

I’ll try a fresh install and follow those steps. I’ll let you know if it works.

Thanks much!

4

So I tried the fresh install and creating the inherited theme with the devtools, but the background is still white after the page gets done loading. I can see the red, at the start, but it’s almost as if when the modular piece is loaded into the DOM, it covers the background up.

5

Hmmm, I think I found the issue in my base.html.twig

If I remove line 21

    {% do assets.addCss('theme://css-compiled/spectre'~compress) %}

it certainly throws the styling off for the whole page, but the background is now visible. So I guess I just need to find where the background is being overridden in the spectre files…

Which seems weird, since I no longer have those files in the new project.

6

I found the fix, in case there is anyone that stumbles on this and is looking for the same thing:
Bg gray fix #158

7

@logjammin, Just noticed that you are using a modular page…

To summarise the issue on Github, the main cause of the problem is !important in the following snippet in ‘spectre.min.css’:

.bg-gray {
    background: #f8f9fa !important;
}

Since the suggested solution has not yet been accepted, one can override the background using the following in ‘custom.css’ in your inheriting theme:

.bg-gray {
    background: red !important;
}
1 Like
8

Thanks! I’ll mark yours as the solution since it’s much easier.