Jump to content

Promotional Pop-Up | What is/are CSS Selectors to change email address input box shape and border?

Go to solution Solved by KwameAndCo,

Recommended Posts

Site URL: https://www.kennywallace.co.uk/newsletter

This is the code I used to modify the input field for my newsletter block.

.newsletter-form-field-element {border: 3px solid #F4F4F4 !important;}
.newsletter-form-field-element {border-radius: 50px !important;}

I'm trying to do the same thing with the Promo-Pop-Up, but cannot find the CSS selectors to do this. I've put a link in to my newsletter page so you can see what I'm trying to do. I want them to match.

Can someone help?

Thanks

Edited by KennyWW
Link to comment
  • KennyWW changed the title to Promotional Pop-Up | What is/are CSS Selectors to change email address input box shape and border?
  • Replies 3
  • Views 430
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution
Posted (edited)

Hey Kenny,

Use this:

/* Squareskills: Customise Newsletter Popup Input */
input#overlayNewsletterEmail-field {
    border: 3px solid #f4f4f4;
    border-radius: 50px;
}

Or if you want to make your code more DRY and keep it matched with the other inputs by combining:

/* Squareskills: Customise Newsletter Popup Input */
.sqs-block-newsletter input.newsletter-form-field-element,
input#overlayNewsletterEmail-field {
    border: 3px solid #f4f4f4 !important;
    border-radius: 50px !important;
}

If you review your CSS, it looks like you'll find a few other bits of code clashing - hence the need for !important - that could be removed to streamline things.

Edited by KwameAndCo

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Link to comment
4 hours ago, KennyWW said:

That worked a treat. Thanks so much. I spent an entire evening trying to figure that out.

Happy to help.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

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.