Pls help with injected CSS for text fields

Sorry to bother you, but I've tried for some time without success to include injected CSS on my form to make the font color white, etc.

I'd like the text next to the top Clear Form button to be white, to have a width so that a new line will start after "please", and for the top of it to be aligned with the Clear Form button to its left. 

I'd like the element that includes the text (Mad Flying Scot Sails and Extras) to start at the left edge of the form with no space and I'd like it to be less high, maybe 35px, to match the headings I have on my other website pages.  The background and font colors are fine.

I used Firefox firebug to identify the field names, but my CSS did not work. I have removed some of my CSS that didn't work, and here's what's there now...

Thanks for your help!

Hello bdoodle,

Please take a look at the following cloned form and see if this is what you wanted to achieve:  http://form.jotformpro.com/form/50462647405959? 

Feel free to clone this form for a closer look. The following guide should help you in form cloning:  http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

If you want to further move the text field "Mad Flying Scot Sails and Extras" towards left, you need to edit the following custom css code and further decrease the margin-left value:

li#id_115 {

margin-left: -3px !important;

}

Hope this helps.

Do get back to us if you need any other changes.

Thank you!

Hi,

 Thank you for the quick answer.  

I cloned your form and copied the CSS code within its preferences relating to the two fields in question into my form.  I'd like to understand what CSS code I should use to effect the desired changes so I didn't just use your cloned form.  I don't see any CSS code that changes the font color of the #id_113 field to white and, in fact, it still shows up #888888 in my form.  Also in my version of the form the #id_115 field overlaps the fields below it and the text is not vertically centered.  Did you make changes other than injected CSS?

I also want the background color of li#id_115 to fill the entire form from left to right.  Although adjusting the left margin moves it to the left as I asked previously, I really want the element to be wider to fill the whole line.

Below are clips of the CSS code I added, copied from your form, and the resulting web page:

Please note that the #id_113 text shows up as one long line, not how it looks above.  I had wanted this to have a new line after "please."

Hi bdoodle,

Insofar as the id_113 element to the right of the "Clear From" button is concerned, please refer to the following screenshot:

Click the element and then the HTML button in the toolbar at the top of the form builder and change #888888 to #FFF to make the text white. That is inline CSS and as such, should override any other conflicting rules. I'll need to examine the other issues more closely and get back to you.

Thanks

There's actually another instance of #888888 in that box. Change the other one to #FFF too. Otherwise half of the text will be white and the other half grey!

Thanks.  That field is now working, and I have solved some of my other problems, but...

I'm still unable to get the Mad Flying Scot Sails and Extras

= text to be centered vertically in its background, 

= text to be NOT italics

Any help would be appreciated.

Hi again,

Have a look at this copy of your page. If that's what you wanted to achieve, please do the following:

1. Click the Mad Flying Scot Sails and Extras heading and then the HTML button in the toolbar at the top of the form builder and remove the enclosing paragraph tags as explained here

2. Replace all of the form's injected CSS with this

3. In your web page, adjust the iFrame height as necessary. (In my copy of your page it's 2120px)

If you need further assistance with this, we'd be happy to provide it.

Cheers

Upon closer examination of the injected CSS, I've just realized that the three rules targeting the text_115 div can be combined into the following single rule:

#text_115 {
background: #1c487d !important;
color : white;
height: 35px;
min-width: 1000px;
padding-left: 10px;
}

This would reduce the amount of CSS.

Thank you.

This code helps with everything but centering the text_115 vertically.  It looks good on your page, but neither version of your CSS updates fixed my text.  It still is at the bottom. I also can't get the italics to go away in Chrome and Firefox.  Only IE shows it without italics.  Font-style: normal doesn't help.  I can live with the italics, but I really need to get the text in the middle, vertically.

Please note that I removed the paragraph tags in the html, but they automatically return. i.e. When I check them again, they are back. (Yes. I hit Update.)  I have to temporarily move the whole element up in order to access the html button at the bottom which is obscured by the payment form below after I hit the Edit html at the top of the field.  When I'm done, I move the field back down.  (I bet that's not clear!)  Anyway, might it help to keep the paragraph tags and add style margin or padding code within the paragraph tags there?

By fiddling with the CSS, I got the text to be more centered vertically, but the background is now >35px high.  I like where the element sits in the form, but I'd like the stripe a little thinner and the text within it vertically centered.  I guess I don't fully understand margins and padding.  Can you help?

Current CSS:

Nevermind.  I figured out how to do it on my Crosscut Spinnaker Color Layout Form.  I'll copy what I did there.

Thanks for all your help.

Hello bdoodle,

On behalf of my colleague, you are welcome.

I am glad to know that you figured it our yourself.

Do get back to us if you have any questions.

Thank you!