Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Font Color Change in Subscription Box


NWBeef

Question

  • Answers 21
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

Posted Images

21 answers to this question

Recommended Posts

  • 0
18 minutes ago, NWBeef said:

@tuanphan could you please help! 

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0
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. 

 

Link to post
  • 0
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;
}

 

Link to post
  • 0

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

Link to post
  • 0
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

Link to post
  • 0
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

Link to post
  • 0
10 hours ago, ashlee said:

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

 

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

 

Link to post
  • 0

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

Link to post
  • 0
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?

Link to post
  • 0
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?

Link to post
  • 0

@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;
}

 

Link to post
  • 0
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?

Link to post
  • 0

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;
sub.thumb.JPG.5a254c690e9398c3f34b8a1df4d90216.JPG

area as well as the Comment section of the Blog site;
blog.thumb.JPG.fe62d18c21028678a5e4f8278f2997c8.JPG

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!

 

Link to post
  • 0
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;
sub.thumb.JPG.5a254c690e9398c3f34b8a1df4d90216.JPG

area as well as the Comment section of the Blog site;
blog.thumb.JPG.fe62d18c21028678a5e4f8278f2997c8.JPG

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?

Link to post
  • 0
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

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...