Replace "Close" button text in newsletter popup

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.

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.

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..

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.

20 minutes ago, creedon said:

There probably is.

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

Oh, so Squarespace does this for accessibility reasons? I didn't know that, I thought it was just a bug.

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.