Solved

CSS Form Styling

Posted on 2011-02-25
6
686 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 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

636 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