How to customise the promotional popup - Squarespace 7.1

If you want to override different parts of the promotional pop-up, use the following custom code.

---

Add this to your Custom CSS

Adjust the hex colours or add extra styling to your preference.

//Pop Up - Close Icon
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-popup-overlay-close {
  color: #ffffff !important;
}

//Pop Up - Header Title Text
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="heading"]:not([data-compound-type]) h1#sqs-slash-page-header
{
  color: #000000 !important;
}

//Pop Up - Body Text
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] p {
color: #000000 !important;
}

//Pop Up - Button
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid [data-slice-type="buttons"] a, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid .sqs-slice-custom-form a, .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid~.sqs-modal-lightbox .form-wrapper input[type=submit], .sqs-slide-wrapper[data-slide-type="popup-overlay"] .button-style-solid [data-compound-type="popup-overlay-action"] button[type=submit] {
  border-radius: 10px !important;
}