Jump to content

Can a pop up image have a transparent png?

Recommended Posts

  • Replies 15
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi @ThisWayToFabulous, can you enable the promotional popup on a page so that I can test some CSS to try and remove the background? Thanks!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Thanks for that, sadly I still can't see it, but that may be because it's a trial site that is password protected, not your fault!

Rooting around for some potential, I've got some CSS for you to try, it may not work, but hopefully a start!

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  background-color:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-left .sqs-slide-layer-content .group-copy {
  background-color:#ffffff;
}

Let me know how that goes!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Thanks for that, I can see it now, did the CSS do anything when you placed in on your site?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Updated slightly, or at least put together from your website, try this in your Custom CSS:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: none !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

If that work's you'll also probably want this, to move the close icon, and change it to black:

.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

@Ziggy just to clairfy i understood right, heres what i have in CSS

/*  Transparent Dog Background PopUp */
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: none !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

 

Link to comment

Can you try this tweak, changing the none for an opaque background color?

/*  Transparent Dog Background PopUp */
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
    background-color: rgba(0,0,0,0) !important;
}
.sqs-slice .sqs-gallery-design-stacked .yui3-widget .sqs-slice-gallery .sqs-slice-gallery-content {
  background-color: rgba(0,0,0,0) !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-alignment-center .sqs-slide-layer-content .group-copy {
    background-color: #fff;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide-layer-content {
  box-shadow:none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-location-inside .sqs-popup-overlay-close {
    top: 42%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
    color: #000;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

It's rather annoying to edit the pop up with CSS given that you can't toggle it to show on the backend and edit the CSS at the same time. I'm not sure why that isn't working though, I'll have to try it on a website that I have access to with a pop up and try and get back to you.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.