Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

CSS Form Styling

Posted on 2011-02-25
6
Medium Priority
?
689 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
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
Technology Partners: 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 2000 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
Suggested Courses

916 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