Jump to content

Help with CSS for Newsletter Block

Recommended Posts

7 hours ago, tuanphan said:

input - button in one line?

Hi Tuan, I'm not  sure what you mean. I would like for both the box where you type your email and the button to be one single line (no borders). Like the image below. Thanks so much.  

single line newsletter block.JPG

Link to comment
8 hours ago, KimPaola said:

@tuanphan   I updated my site so now my url is kimberlypaola.com - just in case the other url doesn't work anymore!

Add to Home > Design > Custom CSS

.newsletter-form-body {
    display: flex;
}
.newsletter-form-body input {
    border-left: none !important;
    border-top: none !important;
    border-right: none !important;
    background: none !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...

  

On 5/16/2020 at 2:21 PM, tuanphan said:

Add to Home > design > Custom CSS


/* remove quick view */
.ProductList-quickViewButtonWrapper.sqs-product-quick-view-button-wrapper {
    display: none !important;
}
/* button font size */
.sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {
    font-size: 12px;
}

 

Hi @tuanphan  I want to change the font color for my newsletter form input fileds/ placeholders  for 3 blocks  (first name, last name and email)  as they currently are black and not visible. I want to make them white. I am using this but its not helping me:

//NEWSLETTER INPUT FIELDS FONT COLOR //
.newsletter form .newsletter-form-field-element{
  font-color:#fff !important;
  text-transform: uppercase !important;
}

 Here's the URL: https://havengateca.squarespace.com/ and the password is "HAVENGATE2020" 

  

Link to comment
  • 3 weeks later...
On 8/18/2020 at 7:32 PM, Asiya said:

  

Hi @tuanphan  I want to change the font color for my newsletter form input fileds/ placeholders  for 3 blocks  (first name, last name and email)  as they currently are black and not visible. I want to make them white. I am using this but its not helping me:

//NEWSLETTER INPUT FIELDS FONT COLOR //
.newsletter form .newsletter-form-field-element{
  font-color:#fff !important;
  text-transform: uppercase !important;
}

 Here's the URL: https://havengateca.squarespace.com/ and the password is "HAVENGATE2020" 

  

Hi. Do you still need help on this? I see you solved...

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
22 hours ago, GemmaErnst said:

Hi Asiya, I'm having the same issue and can't figure out how to solve this one! No matter what CSS I write in I can't get the font color to change. Could you tell me how you fixed this?

Can you share link to page where you use newsletter? We can help easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/24/2020 at 8:23 PM, GemmaErnst said:

Hi Asiya, I'm having the same issue and can't figure out how to solve this one! No matter what CSS I write in I can't get the font color to change. Could you tell me how you fixed this?

input.field-element::placeholder{ 
    color: #fff!important;
}

Link to comment
  • 4 months later...
On 2/25/2021 at 11:46 PM, Adaptive said:

Hi @tuanphan

Thanks for your help above, I can't seem to get the single line to appear in the newsletter input field in the footer. I would also like to remove the padding from the left

https://armadillo-deer-rbyp.squarespace.com/

Password is Garstang 

Hi. Add to Design > Custom CSS

/* Footer input */
footer.sections input.newsletter-form-field-element {
    padding-left: 0 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/1/2021 at 1:26 PM, tuanphan said:

Hi. Add to Design > Custom CSS


/* Footer input */
footer.sections input.newsletter-form-field-element {
    padding-left: 0 !important;
}

 

Thanks for this, that worked great. All my text and underline for the field are all black, do you know how I can change that?

Link to comment
On 3/3/2021 at 7:02 PM, Adaptive said:

Thanks for this, that worked great. All my text and underline for the field are all black, do you know how I can change that?

 

On 3/3/2021 at 7:02 PM, Adaptive said:

Thanks for this, that worked great. All my text and underline for the field are all black, do you know how I can change that?

You want email address/button black?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 3/16/2021 at 10:49 PM, Adaptive said:

Hi @tuanphan

If you look here https://armadillo-deer-rbyp.squarespace.com/ (password is Garstang) you will see that the input text for the email field, and the line which sits underneath the field are both black, I'd like these to be white so that they can be seen on the dark blue background

Cheers

 

 

Add to Design > Custom CSS

/* footer input */
footer.sections input {
    color: white !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...

@ElizabethM

Please post the URL for your page with the newsletter block on your site.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

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.