How to change page loading colour

Site URL: https://www.laztheplantscientist.com/

How do I change the colour that appears when loading a page? Currently, when I load the homepage of the site, the background is green. This is part of my site style colour theme pallet, but I would like it to be the beige that is also part of the pallet. 

I have changed the 'Background overlay' in the colour themes but that didn't work. Do I need custom CSS? 

I tried this code but it didn't work: 

[data-section-id="5dd3cc728ca6f6715d3b6571"] .section-background {
    background: red !important;
}

Please help me squarespace gods!

Have you tried in Design > Site Styles > Color > Section Background?

@tuanphan I will try that now. 

YES please can you help me fix those issues? 

1. The overlay menu background needs to be beige like the rest of the site. I want to keep the logo there

2. Menu items in overlay menu need to be purple, like the rest of the site. 

4. mobile header needs to be purple with beige text, like the rest of the site 

Essentially, everything needs to be the same as the standard desktop site!

Thank you so much. You are a legend within the squarespace forum community!! 

@tuanphan can you help with those things you mentioned, 1-5, please?

15 hours ago, Peter550 said:

@tuanphan can you help with those things you mentioned, 1-5, please?

Sorry for the delay. Always overloaded.

/* Overlay menu background */
.header-menu-bg.theme-bg--primary {
    background: #faf4e5;
}
/* overlay menu items color */
nav.header-menu-nav-list * {
    color: #214154 !important;
}
/* Announcement bar */
div#announcement-bar-text-inner-id * {
    color: #faf4e5;
}

Hi @tuanphan dont apologise your so much help! 

So, that code partly worked. What I am after is: 

- The overlay text, overlay 'X' and the banner (in mobile view) to be this purple #6A154D. I need the text on the button to be beige #FBF4E5 (see screenshot) 

On 5/7/2021 at 10:04 PM, Peter550 said:

Hi @tuanphan dont apologise your so much help! 

 

So, that code partly worked. What I am after is: 

 

- The overlay text, overlay 'X' and the banner (in mobile view) to be this purple #6A154D. I need the text on the button to be beige #FBF4E5 (see screenshot) 

Add this under above code

/* Mobile */
.burger-inner div {
    background-color: #6A154D !important;
}
nav.header-menu-nav-list * {
    color: #6A154D !important;
}
a.theme-btn--primary.btn {
    color: #FBF4E5 !important;
}

so close @tuanphan! I need the banner background to be purple too. Currently its blue. 

7 hours ago, Peter550 said:

so close @tuanphan! I need the banner background to be purple too. Currently its blue. 

 

 

You mean "Free shipping.." bar?

On 5/11/2021 at 11:52 PM, tuanphan said:

You mean "Free shipping.." bar?

Hello I have a similar question. On my page ( https://www.thegirlwhocanbemoved.com/travel-aid ) I have the code:

Background Image:

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background-image: url(https://static1.squarespace.com/static/60bdc87395311344b2c32700/t/60c2f21d25578e34f1291620/1623388705704/jeremy-zero-EzvUzveWprI-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  opacity: 1 
}

I am trying to add this as an overlay to the entire page:

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: RGBA(3, 127, 138, .8)!important;    
}
 

2 hours ago, Raynaajai said:

Hello I have a similar question. On my page ( https://www.thegirlwhocanbemoved.com/travel-aid ) I have the code:

 

Background Image:

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background-image: url(https://static1.squarespace.com/static/60bdc87395311344b2c32700/t/60c2f21d25578e34f1291620/1623388705704/jeremy-zero-EzvUzveWprI-unsplash.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  opacity: 1 
}

 

 

I am trying to add this as an overlay to the entire page:

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: RGBA(3, 127, 138, .8)!important;    
}
 

Hi. What is your problem?

On 6/11/2021 at 4:41 AM, tuanphan said:

Hi. What is your problem?

I want to have an image for the background of a specific page and have an overlay on the background for that page.

On 6/13/2021 at 4:53 AM, Raynaajai said:

I want to have an image for the background of a specific page and have an overlay on the background for that page.

Find this code

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: rgba(3,127,138,.8) !important;
}

Change it to

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: rgba(3,127,138,.8) !important;
    background-image: url(https://cdn.pixabay.com/photo/2018/04/05/15/01/nature-3293045__340.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

On 6/14/2021 at 4:59 AM, tuanphan said:

Find this code

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: rgba(3,127,138,.8) !important;
}

Change it to

body#collection-60c2c0bbe7029058c001fb90 .main-content {
    background: rgba(3,127,138,.8) !important;
    background-image: url(https://cdn.pixabay.com/photo/2018/04/05/15/01/nature-3293045__340.jpg) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

 

That works for the most part! Thank you!!!! The image however is very zoomed in and blurry, do you know how to zoom it out?

13 hours ago, Raynaajai said:

That works for the most part! Thank you!!!! The image however is very zoomed in and blurry, do you know how to zoom it out?

try change 

cover

to 

contain

On 6/16/2021 at 5:26 AM, tuanphan said:

try change 

cover

to 

 

contain

Thank you so much for all of your help! You are a godsend. I have one last question, I do not know what i pressed but for some reason all my backgrounds won't go back to covering the full page.http://thegirlwhocanbemoved.com

Not sure. Add this to Design > Custom CSS > then save & reload the site

.collection-images {
    margin: 0 !important;
}

That does not work unfortunately 😞 It just looks like this picture when i try it 

On 6/25/2021 at 12:17 AM, Raynaajai said:

That does not work unfortunately 😞 It just looks like this picture when i try it 

Can you add & keep the code & let me know? We can check again easier

I'm seeing consistent problems loading the color menu. I need a way to get to adjust by background color asap. Please help.

On 12/20/2021 at 10:17 AM, NoirThmpsn said:

I'm seeing consistent problems loading the color menu. I need a way to get to adjust by background color asap. Please help.

Can you share link to your site & which section/page do you have problem?