CSS styling- but not sure what I'm styling

This is a strange question, I know.

But I am using a Worpress plug-in that creates forms for me. It is important to know that, because I don't have any control over what the elements are called or any access to the code that actually creates the form.

However, when you are creating the form itself, you can insert a "field" into the form called "HTML."

You can put whatever code you want into the HTML "field".

In this case, I am using the HTML to put a progress bar image at the top of my form. So inside the HTML field / widget thing, I have the text <img src="http://highlifegourmet.com/images/mortgage_app1.gif">

I need to be able to style the html field so that the progress bar is at the top of the form, flush against to the top. I know the answer lies in the source code, but I don't understand code well enough to know how to write the CSS that identifies the HTML field.

The temprorary URL for the form is: http://highlifegourmet.com/arizona-mortgage-application/

You can see that the progress bar is too far to the right and too low... I need somebody to view the source and tell me how to style it...please!

Thank you in advance. I do appreciate it.

mikegeorge2Asked:
Who is Participating?
 
jmnfConnect With a Mentor Commented:
I really don't follow, can you explain it a bit more.

Maybe you can try and use html inside your styles and apply some styling to it. Like...

<style type="text/css">
    html
    {
        background-color: red;
    }
</style>

Open in new window


the html tag is the one that contains all the other elements on your page, including the label that you styled.
Still, i don't think i understood your problem.
0
 
jmnfCommented:
Put this lines right before the line that reads </head>

<style type="text/css">
    #gform_wrapper_3
    {
        padding-top: 0px !important;
    }
    .gform_wrapper .gfield_html.gfield_no_follows_desc
    {
        margin-top: 0px !important;
    }
</style>
0
 
mikegeorge2Author Commented:
Hi. Thanks. I put that in the style sheet for the form. Same thing I hope...right?

That improved the look of the form and almost did what I wanted... Except I want to be able to move the HTML field around so I can put images where ever I want them.

This is how I styled the form field label for form #3. I want the same type of thing but for the HTML field on form #3. (I don't mean I want to style it the same way, but I want to target it from the style sheet.)

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_label

      {      
      color:#476977;
      font-size: 16px;
      font-family: helvetica, arial;
      font-weight: bold;
      position:relative;
      }
0
 
mikegeorge2Author Commented:
Yeah. I know it's a little confusing.

This is a link to a visual graph of the style elements for my form. http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

You can see that the plug-in manufacturer tells you how to target each specific element to the form. You can specify styles for all forms, or for specific forms (in this case, it is form 3), and for specific field types within specific forms.

However, when they wrote the documentation (at the above link), they did not include the field called HTML.

When I posted in THEIR forum, someone told me I needed to view the source code to figure out what element I need to style.

When I look at the source, I can see that it has something to do with this:

<ul id='gform_fields_3' class='gform_fields top_label'><li id='field_3_50' class='gfield      gfield_html gfield_html_formatted gfield_no_follows_desc' >

How would I style that?  (based on the example I gave above for the field label?)
0
 
mikegeorge2Author Commented:
This was a tough question to answer and I may not have phrased it properly. So although I didn't find the specific answer here, I was given enough information so that I could figure it out after a couple of hours.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.