Solved

CSS styling- but not sure what I'm styling

Posted on 2011-02-23
5
341 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 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

The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

Question has a verified solution.

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

Suggested Solutions

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
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).

803 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