Jump to content

Issue: Transparent Button on 7.0 Cover Pages

Recommended Posts

Hi community!

I have a client site that has run into a glitch and I'm trying to trace the source! 

Their site is on 7.0 and they have several Cover pages that they use for "opt in" landing pages. They've had these pages for many years with no issues. Recently, they noticed that the "submit" buttons that appear when the lightbox is opened have become transparent (i.e. you can't see them – screenshot attached)! The buttons are pink when you land on the page (re: Get The Worksheet), but once the button is clicked and the lightbox shows up, the button (re: Get The Guide) vanishes.

(JFYI I checked the Site Styles to see if they missed something there, but according to Site Styles, the button IS pink.)

I took a look at the elements via CMD+Shift+C, and noticed that there is a "transparent" value for this button (screenshot attached below, Current Backend). If I delete this value, the button goes back to pink (screenshot attached below, Transparent Removed). 

Now, they have a decent amount of coding in their CSS panel, but it looks properly scoped and I ran a search for any mention of "transparent" and no alteration of those code snippets made a difference on their cover pages.

I'm wondering if anyone has insight into this, or a coding fix? I've tried a handful of code snippets to fix it in their CSS panel, but don't think I'm scoping it correctly.

Thanks so much for any help you can give!

Transparent removed.png

Current backend.png

Link to comment
  • Replies 8
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Please share the page URL. By default, it isn't included in the public post.

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

Thanks for the link. This is what I see:

image.thumb.png.66848d70ea0df58a87d78962941d98e4.png

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
45 minutes ago, renee.hartwick said:

as soon as you click on "Get the Guide," the lightbox button, is transparent

Ah, I see. I should have read your post more carefully 🫢.

Try adding this within the existing style tags of the per-page Code Injection:

.sqs-slide-wrapper[data-slide-type="cover-page"] .sso-button-style-outline~.sqs-modal-lightbox .form-wrapper input[type=submit] {
  background-color: #d55!important;
}

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

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

@paul2009 Thank you for this! Sadly it didn’t work – but I submitted the issue to Squarespace Support as well, and their response indicated that it’s some sort of glitch on their part. In the meantime, I’ve been able to switch to the “outline” button and get that one to show up (just not the solid one). The clients are happy with that solution for now 🙂 Thanks again for looking in to this, I appreciate it!

Link to comment
  • 1 month later...

@cloud999 Just that it's a glitch on their (Squarespace's) end. Switching the buttons from solid to outline worked for me (then making sure the button color was one that would show up on the overlay) – so not a total solution, but a solution in the sense that you can at least see the button now! That can just be done in the cover page's Style settings. Hope that helps a little...it's all I've got for now! Hopefully SQS is still working on it.

 

Cover page settings.png

Button settings.png

Button look.png

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.