Jump to content

Replace "Close" button text in newsletter popup

Recommended Posts

I have a newsletter popup on my page https://cotehospitality.squarespace.com/new-page.

I would like to replace the "Close" text with a custom text ("Enter") and replace the font with my custom font. I couldn't find an option to change this in the settings. Can anyone help with this?

 

Also, I always get a thick "border" on my close signs on popups when a page refreshes / finishes loading - it goes when I click somewhere on the popup.

Screenshot 2023-10-25 at 23.13.33.png

Link to comment
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Quote

I always get a thick "border" on my close signs on popups when a page refreshes / finishes loading - it goes when I click somewhere on the popup.

This is a browser accessibility feature and it is recommended not to override what the browser is doing.

32 minutes ago, charlineca said:

I would like to replace the "Close" text with a custom text ("Enter")

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .sqs-popup-overlay * {
  
  	font-family : sans-serif !important;
	
    }
	
  .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-style-text .sqs-popup-overlay-close:before {
  
    content : 'Enter' !important;
    
    }
    
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
8 hours ago, creedon said:

This is a browser accessibility feature and it is recommended not to override what the browser is doing.

Add the following to Settings > Advanced > Page Header Code Injection for the page. Please see per-page code injection.

<style>

  .sqs-popup-overlay * {
  
  	font-family : sans-serif !important;
	
    }
	
  .sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"].overlay-close-button-style-text .sqs-popup-overlay-close:before {
  
    content : 'Enter' !important;
    
    }
    
  </style>

Let us know how it goes.

That worked, thank you! I still have this black "frame" around it by default (same on mobile). Do you know if there's a way to remove it? It disappears when I click anywhere on the popup, but it's not very aesthetically pleasing..

Screenshot 2023-10-26 at 08.20.00.png

Edited by charlineca
Link to comment
Quote

Do you know if there's a way to remove it?

There probably is.

I won't intentionally provide code to override accessibility features for people who use assistive technologies.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I'm not an accessibility expert but I think this is a combination of Squarespace and your browser. SS provides some elements behind the scenes that the browser interprets as an accessibility feature and does the border thing. In this case highlighting the close button, what we can see, for those that use visual assistance. I assume there are non-visual equivalents to the visual aspects we can see.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.