Jump to content

How to change page loading colour

Recommended Posts

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!

Link to comment
  • Replies 21
  • Created
  • Last Reply

Top Posters In This Topic

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!! 

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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) 

Screen Shot 2021-05-07 at 15.58.56.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 5 weeks later...
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;    
}
 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

Link to comment
  • 5 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.