Solved

CSS Form Styling

Posted on 2011-02-25
6
684 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
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Create tabs to show divs 9 35
<div class="clearfix"></div> not working on home slider 5 20
Javascript 2 28
html / css issue / div issue. stuck, help needed 2 16
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…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

820 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