Font Color Change in Subscription Box

@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!