[hello@spirituslepus.comParticipant]

Hi Guys

I’ve tried searching through the forum but couldn’t quite find the answer. Sorry if this has already been asked a thousand times.

I want to change the font colour in the Mailchimp email form X addon to #333333 (RGB 51,51,51) – it’s currently white and can’t be seen on my background.

I’ve tried a few CSS codes but to no avail. Any advice?

Thank you for supplying such a helpful forum it’s been invaluable to working my way through X Theme!

Will send url and login details in another private message.

[hello@spirituslepus.comParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Thanks for the kind words.

You can add this under Custom > CSS in the Customizer.

.x-subscribe-form input[type="email"] {
    color: #333333;
}

Hope this helps.

[hello@spirituslepus.comParticipant]

Hi Jade

Thank you for your quick reply!

That worked great for when the user inputs the email data…but ‘the call to action’ text within the form is still white (the bit that says subscribe to newsletter here)

Any ideas how to fix this?

I’ve attached some images to show you what I mean.

Again thank you for being so brilliant at your support. You guys know your coding!

[Rue NelModerator]

Hello There,

Please update the given code and use this instead:

.x-subscribe-form input[type="email"],
.x-subscribe-form input::-webkit-input-placeholder {
    color: #333333;
}

Please let us know how it goes.

[mattheltzelParticipant]

This reply has been marked as private.

[hello@spirituslepus.comParticipant]

You are a genius.

That has worked excellently! WEEHOO! Thank you!

[LelyModerator]

Hi @hello,

Glad that works for you!

@matt,

Please use the following CSS:

input#x_subscribe_form_first_name::-webkit-input-placeholder,
input#x_subscribe_form_email::-webkit-input-placeholder {
   color: #222222;
}

input#x_subscribe_form_first_name:-moz-placeholder,
input#x_subscribe_form_email:-moz-placeholder { /* Firefox 18- */
   color: #222222;  
}

input#x_subscribe_form_first_name::-moz-placeholder,
input#x_subscribe_form_email::-moz-placeholder{  /* Firefox 19+ */
   color: #222222;  
}

input#x_subscribe_form_first_name:-ms-input-placeholder,
input#x_subscribe_form_email:-ms-input-placeholder{  
   color: #222222;  
}

Hope this helps.

[mattheltzelParticipant]

@lely it didn’t seem to change the placeholders in either Firefox or Chrome, the only 2 browsers I tested it on. The Name and Email Address placeholders are very light grey still, almost unreadable. When I start typing, they become much darker. Any other ideas?

[Nabeel AModerator]

Hi again,

Please replace the previous code with this one:

::-webkit-input-placeholder {
    color:    #222 !important;
}
:-moz-placeholder {
    color:    #222 !important;
}
::-moz-placeholder {
    color:    #222 !important;;
}
:-ms-input-placeholder {
    color:    #222 !important;
}

Let us know how this goes!

[mattheltzelParticipant]

Hi,

I did replace it. It didn’t change anything still.

Matt

[RupokMember]

Hi Matt,

Thanks for updating. I can see this is working fine on my end (screenshot on Firefox) – http://prntscr.com/az4tbr

Which browser you are using to check? It should work fine on Firefox, Chrome and IE.

You can also try this for other browsers.

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #222;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    color: #222;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #222;
}

Hope this helps.

Cheers!

[mattheltzelParticipant]

Ahhhh… Actually there’s an opacity set on those fields. I couldn’t figure out why I couldn’t get it to a certain darkness. If I edit with opacity: 1 !important then it works.

[John EzraMember]

Glad you got it to work!

[Author]

Posts