Font Color Change in Subscription Box

I have a website with black background and white font. When I added the subscription/newsletter box the fields are also white so the font doesn't show up. I need help with a CSS code to turn the font a dark gray or black color if possible. 

Thanks!

https://www.northwestlandandcattle.com/ 

@tuanphan could you please help! 

18 minutes ago, NWBeef said:

@tuanphan could you please help! 

Add to Home > Design > Custom CSS

.newsletter-form-field-wrapper input:focus {
    color: black;
}

1 minute ago, tuanphan said:

Add to Home > Design > Custom CSS

.newsletter-form-field-wrapper input:focus {
    color: black;
}

 

Thank you so much @tuanphan - is there a way to make it stay black? It types black now but when I go to the next field it goes back to white. 

2 minutes ago, NWBeef said:

Thank you so much @tuanphan - is there a way to make it stay black? It types black now but when I go to the next field it goes back to white. 

 

.newsletter-block .newsletter-form-field-element {
    color: black;
}

@tuanphan This post helped me correct an issue with text not showing in the email form field when a user was entering their email address within the newsletter block - thank you! Is there a way by either adding CSS or add HTML in the post-submit field within the edit portion of the newsletter block to add a white box around the post-submit Thank you message? My client is worried users are missing or having a hard time reading the post-submit Thank you message. Thank you in advance.

11 hours ago, ashlee said:

@tuanphan This post helped me correct an issue with text not showing in the email form field when a user was entering their email address within the newsletter block - thank you! Is there a way by either adding CSS or add HTML in the post-submit field within the edit portion of the newsletter block to add a white box around the post-submit Thank you message? My client is worried users are missing or having a hard time reading the post-submit Thank you message. Thank you in advance.

Can you share link to form on your client' site?

If you can't share link here, you can send to my email via link in signature

@tuanphan Thank you for replying back. I somehow missed the notification yesterday. Here is a link to my clients site, https://www.rosabellawinery.com/. The newsletter form is towards the bottom of the page. Ashlee

5 hours ago, ashlee said:

@tuanphan Thank you for replying back. I somehow missed the notification yesterday. Here is a link to my clients site, https://www.rosabellawinery.com/. The newsletter form is towards the bottom of the page. Ashlee

Where form, can you take screenshot? I don't see any forms

Screenshot is attached. It is just a newsletter sign-up. 

10 hours ago, ashlee said:

Screenshot is attached. It is just a newsletter sign-up. 

 

.form-submission-text {
    background: black;
    padding: 10px 20px;
}

Very helpful! Thank you so much @tuanphan!

@tuanphan Used this code to help in a similar situation, thank you! Unlike @ashlee site, where it's just an email address input, I have three blocks, first name, last name and email but because it's white font on black background, the fields don't show up to direct customer which box is which. Can you help with code for this @tuanphan? Much appreciated!

8 minutes ago, amysaba said:

@tuanphan Used this code to help in a similar situation, thank you! Unlike @ashlee site, where it's just an email address input, I have three blocks, first name, last name and email but because it's white font on black background, the fields don't show up to direct customer which box is which. Can you help with code for this @tuanphan? Much appreciated!

Can you share link to page where you insert subscription box?

@tuanphan This is all very helpful, but was wondering how to get the "first name" last name" email" text to appear when I remove the text box and only have an underline. any thoughts on that?

On 5/3/2020 at 1:56 AM, luisgonzalez said:

@tuanphan This is all very helpful, but was wondering how to get the "first name" last name" email" text to appear when I remove the text box and only have an underline. any thoughts on that?

 

Can you share link to page in screenshot?

@luisgonzalez, @tuanphan, did you end up finding a solution to this? I have the same question.

Here's the test site (newsletter in the footer):

https://plantain-grasshopper-zlwt.squarespace.com/test

password: view

And here's the code I have so far:

//newsletter
.newsletter-form-header-title {
  font-size:20px!important;
font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  text-transform:uppercase;
  letter-spacing:.075em;
  line-height:1.4em;
}
.newsletter-block .newsletter-form-field-element {
  color:white!important;
}
.form-submission-text {
  color:white!important;
}
input {
  color:white!important;
}
.newsletter-form-field-element {
 background: red !important;
  border:1px solid white!important;
 }
.newsletter-form-button {
      font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  padding-top:18px!important;
  letter-spacing:.075em;
}
.newsletter-form-button:hover {
  background:#ff6100!important;
 color:white!important;
  opacity:1.0!important;
}

On 6/3/2020 at 4:19 AM, ampddesigns said:

@luisgonzalez, @tuanphan, did you end up finding a solution to this? I have the same question.

 

Here's the test site (newsletter in the footer):

https://plantain-grasshopper-zlwt.squarespace.com/test

password: view

 

And here's the code I have so far:

//newsletter
.newsletter-form-header-title {
  font-size:20px!important;
font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  text-transform:uppercase;
  letter-spacing:.075em;
  line-height:1.4em;
}
.newsletter-block .newsletter-form-field-element {
  color:white!important;
}
.form-submission-text {
  color:white!important;
}
input {
  color:white!important;
}
.newsletter-form-field-element {
 background: red !important;
  border:1px solid white!important;
 }
.newsletter-form-button {
      font-family: 'Spartan', sans-serif!important;
      font-weight:800;
  padding-top:18px!important;
  letter-spacing:.075em;
}
.newsletter-form-button:hover {
  background:#ff6100!important;
 color:white!important;
  opacity:1.0!important;
}

 

Have you solved it yet?

I have a similar question, mine relates however to changing just the background colour from white to the same as my site background (grey). Can anyone help? The issue exists both from the 'Subscribe' newsletter;


area as well as the Comment section of the Blog site;

I guess I would like a black bordering perhaps as well as changing the area from white to match my custom background grey (which is hsl(0, 2%, 80%)

Thanks!

11 hours ago, dunker56 said:

I have a similar question, mine relates however to changing just the background colour from white to the same as my site background (grey). Can anyone help? The issue exists both from the 'Subscribe' newsletter;


area as well as the Comment section of the Blog site;

I guess I would like a black bordering perhaps as well as changing the area from white to match my custom background grey (which is hsl(0, 2%, 80%)

Thanks!

 

Can you share link to page in screenshot?

15 hours ago, tuanphan said:

Can you share link to page in screenshot?

Sure, PM'd.

10 hours ago, dunker56 said:

Sure, PM'd.

Add to Design > Custom CSS

/* input background */
.sqs-block-newsletter .newsletter-form-field-element {
    background: #cdcbcb;
}
/* comment input */
.squarespace-comments .new-comment-area .input form.comment-form textarea {
    background-color: #cdcbcb;
}
.comment-btn-wrapper {
    background-color: #cdcbcb;
    border: 1px solid #eaeaea !important;
}

https://www.eddysummers.com.au/blog/little-victoria

On 3/8/2021 at 8:08 PM, tuanphan said:

Add to Design > Custom CSS

/* input background */
.sqs-block-newsletter .newsletter-form-field-element {
    background: #cdcbcb;
}
/* comment input */
.squarespace-comments .new-comment-area .input form.comment-form textarea {
    background-color: #cdcbcb;
}
.comment-btn-wrapper {
    background-color: #cdcbcb;
    border: 1px solid #eaeaea !important;
}

https://www.eddysummers.com.au/blog/little-victoria

Thanks! That's heaps better!

Hi there I'm having a similar problem. Squarespace 7.0.

The "Post Submit" message is coming up in white text.

Is there any way to fix this?

https://www.saltatshoalbay.com.au/salt-journal

thanks in advance!!

L

On 4/4/2023 at 8:08 PM, laurencharge said:

The "Post Submit" message is coming up in white text.

The reason this is happening is because you've chosen the Light tweak for Newsletter blocks in Design > Site Styles.

It appears you need two color designs. One for the footer and one for other pages.

In this case I'd be tempted to set the Style back to Custom, the default and then use CSS to modify the footer across the site. That way you only have to have a few CSS rulesets for the footer and not have to update the rulesets with page specific info in case you add the newsletter to other pages in the site.

Add the following to Design > Custom CSS.

.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper {

  background-color : black;
  
  }

.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-header-title,
.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-header-description,
.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-footnote,
body:not( .button-style-default ).button-style-outline .Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-button

  {
  
    box-shadow : unset;
    color : white;
    
    }

.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper .newsletter-form-button {

  border-color : white !important;
  
  }

body:not( .button-style-default ).button-style-outline .Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-button:hover {

  background-color : white;
  color : black;
  
  }

Or you can use LESS syntax.

// uses LESS syntax

.Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-wrapper {

  background-color : black;
  
  .newsletter-form-header-title,
  .newsletter-form-header-description,
  .newsletter-form-footnote
  
    {
    
      color : white;
      
      }
      
  .newsletter-form-button {
  
    border-color : white !important;
    box-shadow : unset;
    
    }
    
  }

body:not( .button-style-default ).button-style-outline .Footer .sqs-alternate-block-style-container .newsletter-block .newsletter-form-button {

  box-shadow : unset;
  color : white;
  
  &:hover {
  
    background-color : white;
    color : black;
    
    }
    
  }

Let us know how it goes.