Jump to content

Help with Newsletter Block Buttons

Recommended Posts

Hi guys!

I having trouble with my news letter block section. I am trying to change the color of the words join the tribe (sign up) button to where they can be seen when you hover or click on the button. It seems to be working on the desktop and mobile version on my computer, but every time I check it on my phone the words look completely blank and can be seen. It just shows up as a white box/button. 

I would also like to the change the email button to have a very light rectangle with slightly rounded corners. I like the size of the font and spacing for now but I would like the line not to be so big or wide if possible. 

I have used so many different css, I feel like anything I add doesn't work now. 

Here is everything I have added and used so far. I am happy to consolidate. Please help!

Thank you so much.

 

/* text - input button */
.newsletter-form-header-description p {
    margin-bottom: 0 !important;
}
.newsletter-block .newsletter-form-body>div {
    margin-top: 7px;
    padding-top: 8px;
    padding-bottom: 0px;
}
/* privacy - input button */
.newsletter-form-footnote p {
    margin-top: 0px !important;
}
/* Email input color */
.newsletter-form-body input, .newsletter-form-body input::placeholder {
    color: white !important;
}
.newsletter-block .newsletter-form-header-title {
 font-size: 10px
}
.newsletter-block .newsletter-form-wrapper {
 padding: 0px 10px;
}
.newsletter-block input {
 height: 3.em;
 max-width: 20em;
 display: block;
}
footer.sections input[type="text"] {
    border-color: white;
}
footer.sections input[type="text"]::placeholder {
    color: white !important;
}
.sqs-block-newsletter .newsletter-form-field-element {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}
button.newsletter-form-button.sqs-system-button {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}
// Full Underline Newsletter Form - Block Style // 

.newsletter-block .newsletter-form-body {
  padding: 0px !important;
  border-bottom: 1px solid !important;
}

// Full Underline Newsletter Form - Field Style // 

.newsletter-form-field-element {
  border: none !important;
  background-color: transparent !important;
}

// Full Underline Newsletter Form - Input Style // 

.newsletter-form .newsletter-form-field-element, .field.email input::placeholder, .field.email input:focus {
  color: #ffff !important;
}

 

IMG_5691.jpg

IMG_5692.jpg

IMG_5693.jpg

IMG_5694.jpg

Link to comment
  • Replies 7
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Can you add the link to the site?

 👨‍🔧👨‍💻 Squarespace plugins

🙋‍♂️ Squarespace Custom Web Development & Design Services

📅 Todoist alternative | Increase your Productivity 

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

Link to comment

Would you like the mobile version to look like in the attached image?

 

@media (max-width: 767px) {
    .newsletter-form-body .email input {
        text-align : center;
    }
    
    .primary-button-style-outline .fluid-engine .newsletter-form .newsletter-form-body .newsletter-form-button {
        background : #fff!important;
    }
    
    .newsletter-form-button span {
        color : #000!important;
    }
}

 

Screenshot 2024-01-21 at 22.30.50.png

 👨‍🔧👨‍💻 Squarespace plugins

🙋‍♂️ Squarespace Custom Web Development & Design Services

📅 Todoist alternative | Increase your Productivity 

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

Link to comment

I will try to add the code this week or the next one if no other answer appears.

Super busy atm

 👨‍🔧👨‍💻 Squarespace plugins

🙋‍♂️ Squarespace Custom Web Development & Design Services

📅 Todoist alternative | Increase your Productivity 

📹 Squarespace Tutorials for free - YouTube📹 

💯🚀 I have worked on over 300 Squarespace sites with custom code for over 9 years

🙋‍♂️ Let's connect on LinkedIn

 

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.