Solved

CSS styling- but not sure what I'm styling

Posted on 2011-02-23
5
344 Views
Last Modified: 2012-05-11
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.

0
Comment
Question by:mikegeorge2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 4

Expert Comment

by:jmnf
ID: 34966003
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
 

Author Comment

by:mikegeorge2
ID: 34966050
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
 
LVL 4

Accepted Solution

by:
jmnf earned 500 total points
ID: 34966132
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
 

Author Comment

by:mikegeorge2
ID: 34966196
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
 

Author Closing Comment

by:mikegeorge2
ID: 34973370
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question