Jump to content

Custom CSS Not Loading Unless Opening the Editor

Recommended Posts

Site URL: https://apricot-coconut-f6eb.squarespace.com/

Hi there, this is my first question on this forum, forgive me if it's in the wrong area.

This seems like a problem others have had before, but none of the other solutions seemed to apply or work. Essentially I have replaced the header's background with an image, and it doesn't load unless I bring the editor back up. I've double-checked this with an Incognito window and it hasn't loaded. Check the CSS with CSSLint, and after a few edits, still nothing. The .PNG itself is only 75kb, so I can't imagine it being due to a heavy file size.

Site URL: https://apricot-coconut-f6eb.squarespace.com/
Password: magickal

Here's what the header looks like proper.

image.thumb.png.78eeea20e768cf265bd63bdbc8202583.png

And here's the unloaded version from the Incognito window view

image.thumb.png.f0841242f99a01c1f6650cc46cc544d4.png

Link to comment
  • Replies 13
  • Views 693
  • Created
  • Last Reply

Top Posters In This Topic

Just now, rchamberlain said:

Site URL: https://apricot-coconut-f6eb.squarespace.com/

Hi there, this is my first question on this forum, forgive me if it's in the wrong area.

This seems like a problem others have had before, but none of the other solutions seemed to apply or work. Essentially I have replaced the header's background with an image, and it doesn't load unless I bring the editor back up. I've double-checked this with an Incognito window and it hasn't loaded. Check the CSS with CSSLint, and after a few edits, still nothing. The .PNG itself is only 75kb, so I can't imagine it being due to a heavy file size.

Site URL: https://apricot-coconut-f6eb.squarespace.com/
Password: magickal

Here's what the header looks like proper.

image.thumb.png.78eeea20e768cf265bd63bdbc8202583.png

And here's the unloaded version from the Incognito window view

image.thumb.png.f0841242f99a01c1f6650cc46cc544d4.png

 

Forgive me, here is the CSS I've entered. As you can see there isn't much.

.header-title-logo img {
    max-height: 130px;
}
#header {
    background-image: url(/s/SiteHeader-01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
}

Link to comment

Site URL: https://exmedcancercharitabletrust.squarespace.com/

Heres an odd one... I used code to style my nav and when im in the custom CSS block it looks exactly how I want it, But when im out of the custom CSS the colours change. I have double checked the colours on the style page and made sure to put important after my code...but I can't figure out the problem. any ideas?

https://exmedcancercharitabletrust.squarespace.com/

Password: studio@exmed

Screen Shot 2021-05-20 at 4.57.39 PM.png

Screen Shot 2021-05-20 at 4.58.16 PM.png

Edited by S74
spelling
Link to comment

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

 

Edited by paul2009

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
15 hours ago, paul2009 said:

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

 

After trying out the first two solutions in your bullets, the problem still persists. I contacted Squarespace Customer Care and was recommended to try the forums again, as custom CSS is outside the scope of what Customer Care would help with.

Not quite sure if anything is wrong with the CSS for the image itself, as the only warning I got in CSSLint was that I was using a header in the id instead of a selector. Though it wasn't considered an error and at least in the editor, the CSS still functions.

 If that indeed is causing the problem, I'm honestly not sure how to fix it. What would I write instead as a selector?

For reference it's this section of code:

Quote

 

#header {

    background-image: url(/s/SiteHeader-01.png);

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat; 

}

 

 

Link to comment
15 hours ago, paul2009 said:

@S74 @rchamberlain 

There appear to be a number of reported issues this week with Custom CSS not loading this week due to issues on Squarespace's backend.

Your issues may or may not be related but I recommend you read my advice in this thread and then reach out to Customer Care using their online chat option if you cannot resolve it yourself (my third bullet point):

 

I am also having the same problem.

I went through your list and the customer support team sent me to the Troubleshooting browser issues  (https://support.squarespace.com/hc/en-us/articles/115004581087) page. 

Im at a loss of what to do. The rest of the site is fine, it's just the Nav that's playing up.

 

Here is my code for reference:

/* Nav item color */
.header-nav-item a {
  border-radius: 25px;
    color: #702F8A !important;
    background-color: fade(#FFFFFF, 50%) !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #008A94 !important;
}
.header-nav-folder-item a {
    color: #ffff !important;
    background-color:#702F8A !important;
    padding: 5px !important;
}
.header-nav-folder-item:hover a {
    color: #259ea7 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #008A94 !important;
}
 
// Folder Menu Color //
.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  border-radius: 25px;
  background-color: #702F8A;
}

Link to comment
1 hour ago, S74 said:

Here is my code for reference:

/* Nav item color */
.header-nav-item a {
  border-radius: 25px;
    color: #702F8A !important;
    background-color: fade(#FFFFFF, 50%) !important;
  padding-right: 15px !important;
  padding-left: 15px !important;
}
/* Nav item hover color */
.header-nav-item a:hover {
    color: #008A94 !important;
}
.header-nav-folder-item a {
    color: #ffff !important;
    background-color:#702F8A !important;
    padding: 5px !important;
}
.header-nav-folder-item:hover a {
    color: #259ea7 !important;
}
/* Nav item active color */
.header-nav-item--active a {
    color: #008A94 !important;
}
 
// Folder Menu Color //
.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  border-radius: 25px;
  background-color: #702F8A;
}

It has been solved! 

I used this code instead:

/* Nav item color */

.header-nav-item a {

border-radius: 25px;

color: #702F8A !important;

  background-color: fade(#FFFFFF, 50%) !important;

  padding-right: 15px !important;

  padding-left: 15px !important;

}

.header-nav-folder-content .header-nav-folder-item a{

  color:#fff !important;

}

/* Nav item hover color */

.header-nav-item a:hover {

    color: #008A94 !important;

}

.header-nav-folder-item a {

color: #ffff !important;

background-color: #702F8A !important;

padding: 5px !important;

}

.header-nav-folder-item:hover a {

    color: #259ea7 !important;

}

/* Nav item active color */

.header-nav-item--active a {

    color: #008A94 !important;

}

Link to comment
On 5/20/2021 at 7:01 PM, S74 said:

It has been solved! 

I used this code instead:

/* Nav item color */

.header-nav-item a {

border-radius: 25px;

color: #702F8A !important;

  background-color: fade(#FFFFFF, 50%) !important;

  padding-right: 15px !important;

  padding-left: 15px !important;

}

.header-nav-folder-content .header-nav-folder-item a{

  color:#fff !important;

}

/* Nav item hover color */

.header-nav-item a:hover {

    color: #008A94 !important;

}

.header-nav-folder-item a {

color: #ffff !important;

background-color: #702F8A !important;

padding: 5px !important;

}

.header-nav-folder-item:hover a {

    color: #259ea7 !important;

}

/* Nav item active color */

.header-nav-item--active a {

    color: #008A94 !important;

}

Can you explain what exactly changed? Perhaps I might be able to figure out what my own problem is.

Still at a loss.

Link to comment
On 5/23/2021 at 5:51 AM, rchamberlain said:

Can you explain what exactly changed? Perhaps I might be able to figure out what my own problem is.

Still at a loss.

Hi. You need to use FULL URL.

background-image: url(/s/SiteHeader-01.png);

/s/SiteHeader-01.png >>> change to full url

eg

Quote

background-image: url(https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png);

 

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/23/2021 at 8:34 PM, tuanphan said:

Hi. You need to use FULL URL.

background-image: url(/s/SiteHeader-01.png);

/s/SiteHeader-01.png >>> change to full url

eg

 

Looks like it's still not working. Here's my CSS in case I entered it wrong. No syntax errors or anything though.
 

Quote

.header-title-logo img {
    max-height: 130px;
}
#header {
    background-image: url(https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat; 
}

 

Link to comment
8 hours ago, rchamberlain said:

Looks like it's still not working. Here's my CSS in case I entered it wrong. No syntax errors or anything though.
 

 

Try checking image url. I see it is blank.

https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png

image.thumb.png.8b3656be7ff9bdf9d13e213ea6034d19.png

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/28/2021 at 9:39 AM, tuanphan said:

Try checking image url. I see it is blank.

https://apricot-coconut-f6eb.squarespace.com/s/SiteHeader-01.png

image.thumb.png.8b3656be7ff9bdf9d13e213ea6034d19.png

Forgive my delayed reply.

I've reentered the image url, but I'm not sure where the problem is. I thought perhaps I needed to update the link url since the image file is a linked file sitting in the list of my pages as shown here.

Having it as this sort of linked element was part of the instructions for replacing the header.

image.thumb.png.f1917ad4b15368f1a66945b727e2d660.png

image.png.8e42552962b0e39fab2deeeceb15d1d8.png

Before the link url was simply:

Quote

/s/SiteHeader-01.png

Though now that I've replaced the link with a full url, nothing has changed. Another dead end it seems. 

I'm not sure where the error is.

Link to comment
On 6/2/2021 at 1:20 PM, rchamberlain said:

Forgive my delayed reply.

I've reentered the image url, but I'm not sure where the problem is. I thought perhaps I needed to update the link url since the image file is a linked file sitting in the list of my pages as shown here.

Having it as this sort of linked element was part of the instructions for replacing the header.

image.thumb.png.f1917ad4b15368f1a66945b727e2d660.png

image.png.8e42552962b0e39fab2deeeceb15d1d8.png

Before the link url was simply:

Though now that I've replaced the link with a full url, nothing has changed. Another dead end it seems. 

I'm not sure where the error is.

https://apricot-coconut-f6eb.squarespace.com/?noredirect

Can you send the image file?

 

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
  • 1 month later...
On 6/3/2021 at 5:15 AM, tuanphan said:

Forgive me for replying so late, work on the site had to pause for a few weeks.

Just for the sake of closure, I wanted to say that once the Squarespace subscription was created by the client, the issues with the CSS and the header image completely stopped. It's working as intended now!

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.