?
Solved

CSS styling- but not sure what I'm styling

Posted on 2011-02-23
5
Medium Priority
?
349 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
  • 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 2000 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

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month13 days, 14 hours left to enroll

809 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