I’m having some trouble with setting a custom background color for my site. When I go to Settings → Page Settings → General → Site Background, and choose a custom background color like black or blue, the color shows up correctly in the page builder. However, when I preview the site in the frontend, the background color stays white and doesn’t change to the color I selected.
I’m not sure what I’m doing wrong or if there’s a bug in the software. Can anyone help me figure out how to set a custom background color?
Thanks for your response!
I’m setting the custom background color in the “Site Background” option under “General” in the “Page Settings” panel. I’m not sure if this is the correct way to set a custom background color, but it’s the only option I’ve found so far.
Also, you mentioned that it should be set in a template. I’m curious, what difference does it make if I set the background color in a template versus directly in the “Site Background” option? Is there a technical reason for this or is it just a best practice recommendation?
Nethertheless I also tried using a template now, I tried creating a new template and setting it to “Single”. Then, I set the template conditions to “Entire webpage”. However, even with these settings, the custom background color still doesn’t show up in the frontend preview.
I don’t know how well you know bricks - so this might be a bit beginner… but:
‘site background’ is a bit misleading. It’s not always for the site… If you set this in a post or page you are editing, it’s just for that post. Set it in a template (e.g. to apply to all categories ‘cats’) it will only set background for those archive/posts.
For site-wide you would use a THEME STYLE.
To set styles, including the global site background colour - you should edit any page or template (because you need to be in the builder).
Once inside the bricks builder use the cog to get Settings, and choose THEME STYLES. In GENERAL set the background colour.
Then in CONDITIONS set for whole site.
That will set site-wide background colour.
BUT
If you also create a template (e.g. for single posts) with background colour, it will over-ride the theme style.
If you also create a single post in bricks which then ‘is its own template’ - it will override templates and styles.
Just like CSS, the more specific it is the higher the priority.
Hope that makes sense.
Thank you for explaining the details about setting the background color in Bricks Builder. I would like to mention that I am not a beginner in this area and I am already familiar with the concepts you have explained.
However, I am facing an issue where the custom background color is not being applied when I view the website on my localhost, even though it appears correctly in the Bricks Builder preview. Do you have any suggestions on how I can fix this issue?
Alas the background color works for me. So I’m afraid I can only offer more rather basic suggestions…
Whenever I have a similar issue I check the cache and flush/disable it.
Check if I set a default background on global elements/theme elements/direct-on-page which might be hiding the ‘global’ background.
Check the template / stylesheet is 100% applying to the page - maybe by adding a needless button to page, and changing the theme style to have a nasty button color -or some other obvious thing to test it.
The background is set on the main HTML element, so you can right-click->inspect and see if it’s there but ‘hidden’.
I imagine you’ve tried all that - so I can only confirm that v1.7 through to 1.8beta work fine for me. It’s not a Bricks bug as far as this indicates.
