Form placeholder and input style in widget sidebar - Support

Viewing 27 posts - 1 through 27 (of 27 total)

Author

Posts
February 25, 2017 at 5:17 pm #751786

tremblayly
Participant

Hi

I’m launching Monday and wanted to fix a form’s placeholder and input colors, which is used only the blog and blog sidebar.

I created three different forms on my website
(1) used throughout the website (styling works as expected)
(2) used within a blog post – styling needs to use a gray styling for placeholder and black for input text as the background is light. (Right now it uses the color set for the main form(1))
(3) use in a sidebar on the blog – styling need to be the same as in (2) because the background is while (again it defaults the main form(1) colors).

See examples here for (2) and (3)
See example here: http://silviafindings.wpengine.com/upcoming-shows-february-december-2017 (hosted on WPengine)

I can’t seem to figure out what CSS elements I need to add/change to use different placeholders and input colors.

Any help would be greatly appreciated.

Lyse

February 25, 2017 at 5:31 pm #751788

Mike
Moderator

Hey tremblayly,
The sidebar form is class= .mc4wp-form-12953
& the form near the footer is class= .mc4wp-form-21990
Here is a screenshot on how I found that in Chrome, if your interested.

Best regards,
Mike

February 25, 2017 at 5:39 pm #751790

tremblayly
Participant

Hi Mike,

So I have the following in my child theme styles.css

#mc4wp-form-1 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”); (hosted on WPengine)
background-repeat: repeat;
}

and use these for the placeholder styles:
.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}

So how exactly do I insert/identify the form class to differentiate all three?

Thanks
Lyse

February 25, 2017 at 6:02 pm #751796
Mike
Moderator
Hi,
Here is a basic framework for you, but you’ll still need to change the colors, etc.
Your CSS is addressing #ids, so we will continue to do so instead of classes like I posted before.
Hope this helps :)
```
/* start #mc4wp-form-1 */
#mc4wp-form-1 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”); (hosted on WPengine)
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-1 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-1 */
/* start #mc4wp-form-2 */
#mc4wp-form-2 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”);
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-2 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-2 */
/* start #mc4wp-form-3 */
#mc4wp-form-3 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”);
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-3 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-3 */
```
Best regards,
Mike
February 25, 2017 at 6:35 pm #751799

tremblayly
Participant

Hi Mike,

I replaced my CSS code with yours, but the main form (1) does not apply its set color. It uses forms (2) and (3) colors.

Thanks
Lyse

February 25, 2017 at 7:11 pm #751803
Mike
Moderator
Hi,
Oups, I see my error, don’t forget to change the colors below :)
```
/* start #mc4wp-form-1 */
#mc4wp-form-1 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”); (hosted on WPengine)
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-1 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-1 */
/* start #mc4wp-form-2 */
#mc4wp-form-2 input[type=”email”], #mc4wp-form-2 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”);
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-2 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-2 */
/* start #mc4wp-form-3 */
#mc4wp-form-3 input[type=”email”], #mc4wp-form-3 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”);
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-3 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8;
font-size: 12px;
}
/* end #mc4wp-form-3 */
```
Best regards,
Mike
February 25, 2017 at 7:16 pm #751805

tremblayly
Participant

Hi Mike,

Can’t see what error your made.
I already updated all of the colors as follows and it’s not applying the one for form (1)

/* start #mc4wp-form-1 */
#mc4wp-form-1 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #ffffff!important;
background-image: url(“http://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png”); (hosted on WPengine)
background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-1 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #f8f8f8!important;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #f8f8f8!important;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #f8f8f8!important;
font-size: 12px;
}

#mc4wp-form-1 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #f8f8f8!important;
font-size: 12px;
}
/* end #mc4wp-form-1 */
/* start #mc4wp-form-2 */
#mc4wp-form-2 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #000000!important;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-2 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #333333;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #333333;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #333333;
font-size: 12px;
}

#mc4wp-form-2 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #333333;
font-size: 12px;
}
/* end #mc4wp-form-2 */
/* start #mc4wp-form-3 */
#mc4wp-form-3 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
color: #000000!important;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-3 .mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
color: #333333;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #333333;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #333333;
font-size: 12px;
}

#mc4wp-form-3 .mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
color: #333333;
font-size: 12px;
}
/* end #mc4wp-form-3 */

Thanks
Lyse

February 25, 2017 at 7:45 pm #751813

Mike
Moderator

Hi,

Best regards,
Mike

February 25, 2017 at 7:59 pm #751817

tremblayly
Participant

HI Mike,

I fixed those thank you, but I still don’t get the placeholder and input colors correctly on form 1.

Thanks
Lyse

February 25, 2017 at 8:14 pm #751822
Mike
Moderator
Hi,
I’m sorry I had left a space between the #id & the .class, please try this:
```
/* start #mc4wp-form-1 */
#mc4wp-form-1 input[type=”email”], #mc4wp-form-1 input[type=”text”] {
	color: #ffffff!important;
	background-image: url("https://silviafindings.wpengine.com/wp-content/themes/enfold/images/background-images/dots-mini-light.png"); (hosted on WPengine) 			    
	background-repeat: repeat;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-1.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: #f8f8f8!important;
	font-size: 12px;
}

#mc4wp-form-1.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #f8f8f8!important;
	font-size: 12px;
}

#mc4wp-form-1.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #f8f8f8!important;
	font-size: 12px;
}

#mc4wp-form-1.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #f8f8f8!important;
	font-size: 12px;
}
/* end #mc4wp-form-1 */
/* start #mc4wp-form-2 */
#mc4wp-form-2 input[type=”email”], #mc4wp-form-2 input[type=”text”] {
	color: #000000!important;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-2.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-2.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-2.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-2.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #333333;
	font-size: 12px;
}
/* end #mc4wp-form-2 */
/* start #mc4wp-form-3 */
#mc4wp-form-3 input[type=”email”], #mc4wp-form-3 input[type=”text”] {
	color: #000000!important;
}

/*and use these for the placeholder styles:*/
#mc4wp-form-3.mc4wp-form ::-webkit-input-placeholder { /* WebKit browsers */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-3.mc4wp-form :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-3.mc4wp-form ::-moz-placeholder { /* Mozilla Firefox 19+ */
	color: #333333;
	font-size: 12px;
}

#mc4wp-form-3.mc4wp-form :-ms-input-placeholder { /* Internet Explorer 10+ */
	color: #333333;
	font-size: 12px;
}
/* end #mc4wp-form-3 */
```
Best regards,
Mike
February 25, 2017 at 8:23 pm #751824

tremblayly
Participant

Hi Mark,

Replacing your code fixed the color of the main form placeholder only but not the input (should be while not gray.
Also, form (2) placeholder is white and should be gray.
Form (3) works.

Thanks
Lyse

February 25, 2017 at 8:58 pm #751828

Mike
Moderator

Hi,
Sorry, can you send me a login in the private area. also where is form 2?
Recap, 3 is good, 2 placeholder & input needs to be gray, 1 input needs to be white.

Best regards,
Mike

February 25, 2017 at 9:29 pm #751833

tremblayly
Participant

Hi Mike,

Recap:

form 1 (main) found throughout the website, input should be #ffffff – see form 1 here: http://silviafindings.wpengine.com/ (hosted on WPengine)

form 2 found within a blog post, placeholder should be #333333 – see form 2 here: http://silviafindings.wpengine.com/upcoming-shows-february-december-2017

form 3 is in the sidebar of blog page and works fine.

I added login credentials in the private area.

Thanks
Lyse

February 25, 2017 at 9:41 pm #751836

Mike
Moderator

Hi,
Please check login, didn’t work.

Best regards,
Mike

February 25, 2017 at 9:50 pm #751839

tremblayly
Participant

Hi Mike,

Created one use for you:

February 25, 2017 at 10:58 pm #751845

Mike
Moderator

Hi,
I’ve asked for some help with this, Thanks a lot for your patience.
Best regards,
Mike

February 25, 2017 at 11:09 pm #751846

tremblayly
Participant

No problem…..

Thanks
Lyse

February 26, 2017 at 5:08 am #751877
Vinay
Inactive Moderator
Hi,

1. To change the input color on homepage to white
```
#top .main_color .avia-builder-el-22 .input-text,
#top .main_color .avia-builder-el-22 input[type='text'],
#top .main_color .avia-builder-el-22 input[type='input'],
#top .main_color .avia-builder-el-22 input[type='password'],
#top .main_color .avia-builder-el-22 input[type='email'],
#top .main_color .avia-builder-el-22 input[type='number'],
#top .main_color .avia-builder-el-22 input[type='url'],
#top .main_color .avia-builder-el-22 input[type='tel'],
#top .main_color .avia-builder-el-22 input[type='search'],
#top .main_color .avia-builder-el-22 textarea,
#top .main_color .avia-builder-el-22 select {
    color:#FFF!important;
}
```
2. The input text color is alread #333. If you do not see that it is #333 please hard refresh the page a few times.

Let us know if you have more question.

Best regards,
Vinay
February 26, 2017 at 2:33 pm #751942

tremblayly
Participant

Hi Vinay,

That does not work either and now forms 2 & 3 placeholder are wrong colors.

Thanks
Lyse

February 26, 2017 at 2:49 pm #751945

tremblayly
Participant

HI Vinay,

Actually, form 3 still works fine.

Lyse

February 26, 2017 at 4:35 pm #751963

Vinay
Inactive Moderator

Hi!

I have added the code to Quick CSS please clear the cache to view changes. Please see screenshot attached.

Best regards,
Vinay

February 26, 2017 at 5:08 pm #751981

tremblayly
Participant

Hi Vinay,

I see the change worked. But form 2, within a blog post, the placeholder is still white instead of gray.

Thanks
Lyse

February 26, 2017 at 9:47 pm #752048

Basilis
Inactive Moderator

Hi,

Please add

textfield::placeholder { color: grey; }

and let us know if that fixed that small issue left.

Best regards,
Basilis

February 26, 2017 at 9:54 pm #752055

tremblayly
Participant

Hi Basilis,

Form 2 placeholder is still white, so not visible

I will be migrating in just a few minutes. So will have to try after I’m live.

Thank you
Lyse

February 27, 2017 at 12:05 pm #752234
Vinay
Inactive Moderator
Hey!

The below code should work in normal case as in without any modification. But here only the text becomes upper case but no changes to the placeholder text color takes effect. This is due to custom code added to the theme or a plugin may be overwriting the styles.

For testing purpose please remove all the custom code and clear the cache and try the below code in quick css and let us know.
```
.mc4wp-form-fields ::-webkit-input-placeholder {
 color: #000!important;
 text-transform: uppercase;
 }
.mc4wp-form-fields :-moz-placeholder { /* older Firefox*/
 color: #000!important;
 text-transform: uppercase;
}
.mc4wp-form-fields ::-moz-placeholder { /* Firefox 19+ */ 
 color: #000!important 
 text-transform: uppercase;
} 
.mc4wp-form-fields :-ms-input-placeholder { 
 color: #000!important;
 text-transform: uppercase;
}
```
Cheers!
Vinay
February 28, 2017 at 7:49 pm #753175

tremblayly
Participant

Hi Vinay,

I cleaned up some of the CSS I had added to my style.css file in my child theme. When I look at the three forms now. All looks as I want it. So I’m happy.

Thank you all of your amazing patience with this one!

Great support from all of you!

Lyse

March 4, 2017 at 5:30 pm #755628

Mike
Moderator

Hi,
Your welcome and Thank you for using Enfold.

Best regards,
Mike
Author

Posts

Viewing 27 posts - 1 through 27 (of 27 total)

You must be logged in to reply to this topic.