[Daniel SParticipant]

Hi,

I have made the decision to ditch Contact Forms 7 in favor of Ninja Forms, but I have noticed that the fields from Ninja Forms are appearing thinner (skinnier) in height than the default height of fields in the X Integrity Light theme. See screenshot here: http://www.inbluetesting.com/observatory/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-2.42.28-pm.png

I also have Contact Form 7 installed and its fields (see the top blue reservation panel in the screenshot) are appearing at the correct height, but Ninja Forms for some strange reason are appearing thin.

If anyone could help me solve this, I would greatly appreciate it.

Dan

Wordpress Version 4.0
Integrity Light Child Theme Version 1.0.0
Shortcode Plugin Version 2.4.0

[ChristopherModerator]

Hi there,

Please give us the URL of a page contains this form so we can help with this.

Thank you.

[Daniel SParticipant]

Sure. Go here: http://www.inbluetesting.com/observatory/contact-us/

[Daniel SParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please add the following CSS code under Customize -> Custom -> CSS:

.ninja-forms-form-wrap input, .ninja-forms-form-wrap select, .ninja-forms-form-wrap textarea {
padding: 7px 10px;
}

Hope that helps.

[Daniel SParticipant]

Thank you. That worked. But I have another question.

I have a booking panel with a single “Arrival” field (which is a datepicker field). I need to know how to put a calendar icon in the field just to the left of the “Arrival” text. You helped me previously to put the calendar icon in the field when I was using Contact Form 7 here: http://theme.co/x/member/forums/topic/integrity-light-styling-questions/ (point #4). And it looked exactly how I wanted it to look (see screenshot): http://www.inbluetesting.com/observatory/wp-content/uploads/2014/10/Screen-Shot-2014-10-17-at-9.49.06-pm.png

But when I tried to change the code to be compliant with Ninja Forms, it didn’t work. You can probably see why.

Here is the code I tried to edit:

.ninja-forms input[type="text"].hasDatepicker {
   padding-left: 30px;
   position:relative;
   line-height:32px;
}

span.ninja-forms-form-wrap.date-785{
	position:relative;
	display:block;
}

span.ninja-forms-form-wrap.date-785:before {
content: "\f073";
position: absolute;
top: 6px;
left: 10px;
z-index:100;
font-family: fontawesome;
}

Can you see what I’m doing wrong?

[Kosher KMember]

Hi There,

Can you please add this CSS code below Under Customizer > Custom > CSS

#ninja_forms_field_8_div_wrap, #ninja_forms_field_9_div_wrap {
	position: relative;
}
#ninja_forms_field_8_div_wrap:before, #ninja_forms_field_9_div_wrap:before {
	content: "\f073";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 100;
	font-family: fontawesome;
}
#ninja_forms_field_8, #ninja_forms_field_9 {
	padding-left: 30px;
}

Let me know how it works,

Cheers

[Daniel SParticipant]

I tried it and it’s not working. Are you sure you wanted me to paste it under Customizer > Custom > CSS? The code provided to me previously by you guys to do this with Contact Form 7 was intended to be pasted in the child theme’s style.css file (See point #4 here: http://theme.co/x/member/forums/topic/integrity-light-styling-questions/ ). Shouldn’t the code to do this with Ninja Forms be pasted there as well?

[Paul RModerator]

Hi Dan,

Please edit the code above to be.

#ninja_forms_field_5_div_wrap,
#ninja_forms_field_8_div_wrap, 
#ninja_forms_field_9_div_wrap {
	position: relative;
}

#ninja_forms_field_5_div_wrap:before,
#ninja_forms_field_8_div_wrap:before, 
#ninja_forms_field_9_div_wrap:before {
	content: "\f073";
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 100;
	font-family: fontawesome;
}

#ninja_forms_field_5,
#ninja_forms_field_8, 
#ninja_forms_field_9 {
	padding-left: 30px;
}

You can either put the code in custom > css or in the child theme’e style.css.
Both will work just fine.

Hope that helps.

[Daniel SParticipant]

Thank you. That worked beautifully.

[CousettMember]

Glad we were able to help. 🙂 Have a nice day.

[Author]

Posts