Jump to content

Background images not appearing, apparently a coding issue

Go to solution Solved by paul2009,

Recommended Posts

our images on our site are currently gray. this has happened before and it was an issue with the custom coding and squarespace updates messing each other up.

Can I safely remove the coding from our site? I feel like this would solve this issue for good... here is our code. I Have not learned much about code so I'm rather lost.

i contacted squarespace and this is what they said-

Alright, it looks to be the custom code implemented into the site, is causing this behavior with the gray overlay. When I set the site on Safe mode, which disables all code placed in the CSS panel, Code blocks, and Code injection, the image displayed. Here's a video of that behavior: https://share.squarespace.com/E0uX5D2q

 

You're more than welcome to incorporate custom CSS in your site. As a note, we're unable to offer assistance or troubleshooting for such modifications or additions, due to their complex nature. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. You'll need to troubleshoot your code to determine why it's causing this behavior with our features.  That said, while our team here is unable to support our customers in this specific way, we have the following resources that provide further information on how you can use code on our platform and goes further into restrictions by website plan

 

Can I safely remove the coding from our site? I feel like this would solve this issue for good... here is our code. I Have not learned much about code so I'm rather lost.

 

//code.jquery.com/jquery-3.6.1.min.js">

// Stretchy Navigation Line - v2 //

.header-nav-item::after {
  content: '';
  background: #000000; //color
  height: 1px; //thickness
  width: 0;
  display: block;
  margin-top: .05px !important;
  transition: width 0.5s; //animation speed
  margin: 0 auto;
}

.header-nav-item:hover::after {
  width: 100%;
}

.header-nav-item--active a {
    background-image: none !important;
}

// Active Nav Color //

.header-nav-item--active a {
  color: #000000 !important;
  border-bottom: 1px solid #FFFFFF !important;
  background-image: none !important;
}

// Fading Folder Nav //

.header .header-nav .header-nav-item--folder .header-nav-folder-content {
  transition: ease-in-out 0.5s;
}

// Spotlight Navigation Folder Style //

.header-nav-folder-content:hover > .header-nav-folder-item {
  opacity: 0.5;
}

.header-nav-folder-content:hover > .header-nav-folder-item:hover {
  opacity: 1.0;
}

// Expanding Button On Hover //

.sqs-block-button .sqs-block-button-element--medium {
    transition: transform 0.3s !important;
}
  
.sqs-block-button .sqs-block-button-element--medium:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

Screenshot 2023-02-22 at 4.39.41 PM.png

Link to comment
  • Solution
15 minutes ago, CampIlliana1949 said:

our images on our site are currently gray. this has happened before and it was an issue with the custom coding and squarespace updates messing each other up.

Squarespace made a change on Monday that caused this. The change will be "rolled back" (undone) within the next 24 hours, after which things should work correctly again. If not, please post back.

Did this help? Please give feedback by clicking an icon below  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and 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 free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

SS is at it again by changing their code which messes with transparent backgrounds.

I just want [data-section-id = "622e5b8ddd586822ec87dd31"] to be transparent to show the section beneath, but I can't figure it out since the change this morning.

So far the code below is the only luck I've had if I change the background to anything other than transparent it will change the color.

.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

Hope anyone can help!

Link to comment

the section-background div is now wrapped in a section-divider div which also has the background color set. so if you want to see through the section then you'd need to set both of those to transparent. obviously this only works if you've set the theme of that section to "Darkest 1" which is interpreted as "black" in the attributes...

.page-section[data-section-theme="black"] .section-divider,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

I'm not entirely sure what you'd see though? you'd just see through to the site's background colour. maybe you've got some other code to stack sections on top of each other.

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
8 hours ago, iamdavehart said:

the section-background div is now wrapped in a section-divider div which also has the background color set. so if you want to see through the section then you'd need to set both of those to transparent. obviously this only works if you've set the theme of that section to "Darkest 1" which is interpreted as "black" in the attributes...

.page-section[data-section-theme="black"] .section-divider,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

I'm not entirely sure what you'd see though? you'd just see through to the site's background colour. maybe you've got some other code to stack sections on top of each other.

It's still not quite working. The theme is set to darkest, but the images that beneath the section still don't show through.

Link to comment

@noahawaii 

ok, I've found your website now. (much easier if you post details of it with the question. also probably better to start a new post as this one has already been marked as a solution to something different). it's a bit different. this is down to Squarespace introducing fancy dividing sections and the css depends on how each section is set up.

.page-section[data-section-theme="black"] .section-border,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

also, if it's going to be transparent you don't need the "black" stuff. you might as well just put in the data section id you're dealing with...

.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-border,
.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-background {
  background-color: transparent !important;
}

 

Edited by iamdavehart
adding data section id code

Dave Hart. Software/Technology Consultant living in London. buymeacoffee 

Link to comment
45 minutes ago, iamdavehart said:

@noahawaii 

ok, I've found your website now. (much easier if you post details of it with the question. also probably better to start a new post as this one has already been marked as a solution to something different). it's a bit different. this is down to Squarespace introducing fancy dividing sections and the css depends on how each section is set up.

.page-section[data-section-theme="black"] .section-border,
.page-section[data-section-theme="black"] .section-background {
  background-color: transparent !important;
}

also, if it's going to be transparent you don't need the "black" stuff. you might as well just put in the data section id you're dealing with...

.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-border,
.page-section[data-section-id="622e5b8ddd586822ec87dd31"] .section-background {
  background-color: transparent !important;
}

 

That did it thank you!

 

 

Also there's somebody else having the same problem because of the change. Last time it was a whole mess of people. 

 

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.