Solved

CSS styling- but not sure what I'm styling

Posted on 2011-02-23
5
339 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
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 add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

771 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now