Jump to content

Changing color of "Email Address" in Newsletter block section

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: http://www.godsofmarssaga.com

Hi there,

I tried to use a custom code to make just a line where the email address goes (instead of a box). But then the text "Email address" disappeared. Need help bringing it back and changing it's color to white -- while everything else stays the same (black input background etc).

Here's my CSS currently:

/*** NEWSLETTER FORM FIELDS ***/

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

.newsletter-form-field-element {
background: transparent !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom: solid 2px #ffcc00 !important; 
}

 

*Also, a note - I am using the Business plan for the site if that matters in any way with the code.

Looking for help thanks!

 

Screen Shot 2020-10-07 at 2.28.11 PM.png

Link to comment

I am having the same issue. I need to change the Newsletter & Contact form placeholder text from Black to White. A ghost plugin gives me lines on the Newsletter, but the prompt text cannot be read on black backround.

Any help is appreciated. Thank you

267598292_ScreenShot2020-10-08at9_30_04AM.thumb.png.160baf72864c3698c1b3256e11683091.png

Link to comment

I added this and was able to get the "first name" " last name" "email address" prompts to be white, however when a user types their words still appear black ( invisible to user)

 

footer.sections input[type="text"] {
	border-color: white;
}
footer.sections input[type="text"]::placeholder {
	color: white !important;
}
Link to comment
  • Solution
On 10/8/2020 at 8:01 PM, tsbarrett said:

ronin

Add to Home > Design > Custom CSS

.homepage .field.email input, .homepage .field.email input::placeholder, .homepage .field.email input:focus {
    color: white !important;
}

 

On 10/8/2020 at 11:32 PM, JRo said:

I am having the same issue. I need to change the Newsletter & Contact form placeholder text from Black to White. A ghost plugin gives me lines on the Newsletter, but the prompt text cannot be read on black backround.

Any help is appreciated. Thank you

Can you share site url?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/8/2020 at 11:32 PM, JRo said:

I am having the same issue. I need to change the Newsletter & Contact form placeholder text from Black to White. A ghost plugin gives me lines on the Newsletter, but the prompt text cannot be read on black backround.

Any help is appreciated. Thank you

267598292_ScreenShot2020-10-08at9_30_04AM.thumb.png.160baf72864c3698c1b3256e11683091.png

Can you share site url? We can check easier.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...
On 10/12/2020 at 3:50 PM, tuanphan said:

Can you share site url? We can check easier.

Has this been solved? I have the same problem. I was able to get the current "Email Address" to white but when you type in the box it's still black. I couldn't figure out the code to make it white too.

 

This is the code I'm currently using. Link to the website is mixbar.com/home

image.png

Link to comment
1 hour ago, isabellewarren said:

Has this been solved? I have the same problem. I was able to get the current "Email Address" to white but when you type in the box it's still black. I couldn't figure out the code to make it white too.

 

This is the code I'm currently using. Link to the website is mixbar.com/home

image.png

Add to Design > Custom CSS

footer.sections input[name="email"] {
    color: white !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
On 2/27/2021 at 1:42 AM, AnnaGloverInteriors said:

Hi,

Can anyone help with changing the background colour of the email address box in the newsletter block? It is white and I want it to match the background hsl(20, 40%, 94%).

Thanks so much.

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

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

My issue is that although I've tried changing the color of the text in the newsletter box of my footer, it's only the border of the newsletter box, which changes color.

I've used this code:
#block-yui_3_17_2_1_1622837024363_5302 .newsletter-form input {
    color: #fefaec !important;
    opacity: 1;
    border-bottom-color: #fefaec;
}

Url: https://mathiasskovbo.com/

Link to comment
On 8/14/2021 at 3:46 AM, Skovbo said:

My issue is that although I've tried changing the color of the text in the newsletter box of my footer, it's only the border of the newsletter box, which changes color.

I've used this code:
#block-yui_3_17_2_1_1622837024363_5302 .newsletter-form input {
    color: #fefaec !important;
    opacity: 1;
    border-bottom-color: #fefaec;
}

Url: https://mathiasskovbo.com/

Hi. Change first, last name in footer?

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 8/15/2021 at 6:19 AM, Skovbo said:

Want to change the color of the text in the newsletter box in the footer

Use this CSS

footer.sections input::placeholder {
    color: #fefaec !Important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
On 10/26/2021 at 8:53 PM, CiuriFiori said:

Hi,

Can anyone help with changing the background colour of the email address box in the newsletter block in the footer? 

https://panda-orb-f2jk.squarespace.com/home

Thanks so much,

Adriana

Add to Design > Custom CSS

footer.sections input {
    background-color: green !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 4 months later...

Thanks to everyone on this thread. I was able to make some great modifications to the email signup in the footer, including changing the active input color to blue, and removing the background and three sides of the input field — but am still stuck with this grey type for the placeholder "Email Address" input field.

I've tried the various code offered here, but can't seem to shake it...

If anyone knows how to get this to change color (and even to change the words themselves: I'd really prefer just "EMAIL"!) that'd be great....

 

otheranimals.us/papa
pw: daddy

Screen Shot 2022-03-17 at 4.16.05 PM.png

Link to comment
On 3/18/2022 at 6:19 AM, Tino said:

Thanks to everyone on this thread. I was able to make some great modifications to the email signup in the footer, including changing the active input color to blue, and removing the background and three sides of the input field — but am still stuck with this grey type for the placeholder "Email Address" input field.

I've tried the various code offered here, but can't seem to shake it...

If anyone knows how to get this to change color (and even to change the words themselves: I'd really prefer just "EMAIL"!) that'd be great....

 

otheranimals.us/papa
pw: daddy

Screen Shot 2022-03-17 at 4.16.05 PM.png

It looks like you changed color? To change text, add this code to Papa Page Header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.email input').attr('placeholder','Email');
});
</script>

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.