Changing Color of White Space Beneath Footer?

[anthony_jr]

Hey all (and @Norm ),

I’ve been looking for a fix for this for a while, but haven’t seen anything that addresses it specifically.

I have a website that I’m building which is meant to be very simple. Because of this, the content does not typically reach the bottom of most browsers.

I’ve found that in Blocs, despite the second color swatch defining the global bloc setting… anything that lives below the footer of the website (if it doesn’t take up the whole browser) is always white. This is not so stylish when trying to keep a sleek black look. (The site is for film production, so I was looking to emulate the black bars to focus on the frame of content, but the white draws the eyes away.)

Attached below is an image from Solis to show what I’m describing. Is there some sort of CSS code I can adjust to change this bit of white that appears, or is it possible to finally add in the global background color setting into Blocs?

I keep trying to search “global background color” and the last post I saw from Norm mentioned he was interested in adding a setting back in April 2017, but it doesn’t look that ever came to light.

I really don’t want to launch this website without finding a fix first. Just want to make that bottom little bit black. Any info would be appreciated.

[MartinC]

I am not at my Mac right now, but I recall having to change the background colour of the bloc to match the brics worked for me.

[anthony_jr]

I’d love to hear about how that works for you. Currently my website ends after the footer, and that’s where the white space begins.

Currently, everything has a black background that I saw settings for - unless I’m missing something when creating a Bloc (versus manipulating its settings after-the-fact).

What’s odd is that the Blocs in-app preview shows everything correctly. So, I’m not sure if it’s accounting this post-footer color differently than the way web browsers interpret it.

I did try to change some of the #FFFFFF colors in the CSS to #000000 to see if I could find the setting that would change it, but nothing worked. Even some additional code that I could add to the page’s settings (in Blocs) would be awesome.

This is how it looks in-app, and how I would expect it / love it to look online as well:

[webplus]

Hello,

try selecting the main row and add a class to it, like for example full-height.

Then in the page settings add the following

<style>
.full-height{
  min-height: 100vh;
  background-color: black;
}
</style>

[Jakerlund]

Hi,

You can edit Page >> Settings >> Add Code
And in the Header section add:

<style>
body{
    background:#000;
}
</style>

And change to the color you want.

[mackyangeles]

I hope @Norm can add this as an additional feature on Project Settings. Hehe

[Norm]

This feature is coming later in the year

[JDW]

@Norm

This feature is coming later in the year

@Norm, since “later in the year [2018]” has come and gone, what is that new “feature” that addresses the white space at the very bottom of the page?

Thanks,

James W.

[Eldar]

Hi James,

Background color in project settings:

[msm]

@Jakerlund

body{ background:#000; }

Thanks so much!! This forum is so helpful