Solved

CSS Form Styling

Posted on 2011-02-25
6
685 Views
Last Modified: 2012-06-27
I have a form at http://azwm.com/arizona-mortgage-application/

(You'll need to view the source to answer this question, because...)

I can't see the code and I have no control over it. I can only style the form from the WP theme stylesheet.

Because of this reason, and because I don't fully understand CSS, I am having a lot of trouble.

It's a multi-part form.

On the last section, there is one large "address" field, according to the way this WP plug-in is designed. Then within the large address field, there are subfields for First, Last, Street Address, Zip code etc.

The field labels are fine, but the field SUBLABELS are messed-up. Right now, the words "first" and "last" and "street address" and "zip code" don't like up underneath the fields they are supposed to line up with. Also, I need to change the font size to 12 pixels.

I've been messing with it for two hours and I just can't figure it out.

If you can help, I'd very much appreciate it. Thank you!
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
6 Comments
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 34982753
Ugh.

Well, there is no class defined for those items.  I don't know if one exists, if you can create one or if you can modify what's there.

Try something like:
     ...
     <label class='gfield_label' for='input_3_38.3'>First</label>
     ...

If that makes the font big, try something like:
     ...
     <label class='ginput_left' for='input_3_38.3'>First</label>
     ...

0
 

Author Comment

by:mikegeorge2
ID: 34983715
Ugh is right. That suggestion won't work, because I only have control over the style sheet. If it's not in the style sheet, I can't touch it.

This is another way to look at the form code. These are the stylesheet elements. Does this help?

http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
0
 
LVL 34

Expert Comment

by:Paul MacDonald
ID: 34983819
You could try to create a default entry for labels - any defined classes ought to override the default behavior - and see what that does.  Model the CSS for a label on gfield_label, making whatever changes are necessary for font size, etc, and see if that works.
0
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!

 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34984158
Hi mikegeorge2,

Did you know that you can disable the default Gravity Forms CSS on a per forms basis?  It might be easier for you to do that and write a completely customized CSS file in place for the form than to try to beat your head against the Gravity forms stuff...
0
 
LVL 31

Accepted Solution

by:
gwkg earned 500 total points
ID: 35044968
span#input_3_38_3_container label {padding-left:50px;} // First
span#input_3_38_6_container label {padding-left:50px;} // Last
label#input_3_39_1_label {padding-left:50px;} // Street Address
span#input_3_39_3_container label {padding-left:50px;} // City
label#input_3_39_5_label {padding-left:50px;} // Zip

or

span#input_3_38_3_container label, span#input_3_38_6_container label, label#input_3_39_1_label, span#input_3_39_3_container label, label#input_3_39_5_label, label#input_3_39_5_label
{
     padding-left:50px;
}

0
 

Author Closing Comment

by:mikegeorge2
ID: 35046287
Thank you so much...
0

Featured Post

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML question 2 33
center navbar (navigation menu) on web page 3 66
Set a parameter in a properties file and use in html table. 14 58
upload a theme to wordpress 6 29
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …

738 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