Solved

Styling CSS Elements in a pre-made Form

Posted on 2011-02-24
9
823 Views
Last Modified: 2012-08-13
I asked this question yesterday, but I don't think I phrased it correctly.

I have a form at http://azwm.com/arizona-mortgage-application/

VERY IMPORTANT: I do not have access to the form code or the HTML. All I can do is manipulate the style sheet. In order to manipulate the style sheet, I need to "view source" to try and figure out which element I should target.

I am trying to position the progress bar flush against the top of the form. I think I should / can move it around using this:

body  #gform_wrapper_3 .gform_body .gfield_html .gfield_no_follows_desc
          {
      padding-top:0px;
      margin-top:-10px !important;
      position:relative;
      top:0px;
      left:0px;        
          }

However, I can't make it flush against the top of the form. Or at least, I can't figure it out.

Also, I want to position the CONTINUE button. I think I should be doing something like this:

body #gform_wrapper_3 .gform_body .gform_footer .gform_next_button_3

      {      
            position:relative;             
            left:50px;
            padding-left:50px;
         }

But that doesn't do anything at all.

I will post all of the code here. I am sorry that it is so messy. I'll fix it later, when I learn what the heck I am doing.

Thank you in advance!

 
*----------- STYLING FOR LONG MORTGAGE APP BEGINS HERE ----------------*/

 
/*---------background and container of the form---------*/

body #gform_wrapper_3 

	{	
	padding-top:0px !important;
	padding-right:0px;
	padding-bottom:0px;
	background-color: gray;
	border-radius:1.6em;
	position: relative;
	left:5px;
	top:-5px;
	}

body #gform_wrapper_3 .gform_body 

	{
	border:1px solid red; 
	background-color:#ccc;
	position: relative; 
	width: 620px; 
	left:0px;
	border-radius:1.6em;

	}

	

/*----- position progress bar (a.k.a. HTML field) -------*/

body  #gform_wrapper_3 .gform_body .gfield_html .gfield_no_follows_desc
    	{ 
	padding-top:0px;
	margin-top:-10px !important; 
	position:relative;
	top:0px;
	left:0px;  	
    	}


/*------------ continue button ------------*/

body #gform_wrapper_3 .gform_body .gform_footer .gform_next_button_3

	{	
		position:relative; 		
		left:50px; 
		padding-left:50px;
         }


/*------------------standard field label---------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_label 

	{
	padding-left:50px;	
	color:#476977;
	font-size: 14px;
	font-family: helvetica, arial;
	font-weight: bold;
	position:relative;
	}




/*-----------drop down menus---------------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield select 
	{	

	border:1px;
	font-family: verdana, helvetica, arial;
	color: #17454d;	
	font-size: 12px;
	position:relative;
	left:50px;
	width:200px;
	
	}
			



/*------------------text fields--------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield input[type=text] 

	{	
	padding-left:50px;
	border:2px solid #476977;
	width:200px;
	font: 12px Trebuchet MS, verdana, helvetica, arial, sans-serif;
	/*--------margin-right: relative-------*/
	position: right top;		
	}


/*-----------------Radio List Items------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_radio li 

	{
	position:relative;
	left:50px;
	font-size:14px;
	color:#476977; 
	font-family:verdana, sans-serif;

	}

/*----------------Radio Buttons---------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_radio 

	{
	color:white;
	position:relative;
	left:50px;
	}


/*--------- description for input fields --------------*/

body #gform_wrapper_3 .gform_body .gform_fields .gfield .gfield_description {
position:relative;
	left:50px;

}





/*---------------previous Buttons---------------*/

body #gform_wrapper_3 .gform_body .gform_page_footer .gform_previous_button {display:none; }

Open in new window

0
Comment
Question by:mikegeorge2
  • 5
  • 3
9 Comments
 
LVL 16

Expert Comment

by:SSupreme
ID: 34974132
Could you please sketch so we can see how do you want it to look?
0
 

Author Comment

by:mikegeorge2
ID: 34974272
I just want the button that says "continue" to be lined up with the form labels and input boxes.

So... I want the continue button (which is an image) to be styled 50px from the left.

And I want the progress bar to stay right where it's at, from the left, but moved up about 10 pixels so that it is flush with the top of the form.

Thanks!
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 34974443
I think it might be over-defining the CSS declaration and that's why it doesn't work as you expected.  Try adding a simpler declaration:

.gform_image_button {
    margin-left: 50px;
}
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:mikegeorge2
ID: 34974688
That wasn't it Jason1178. Thank you for trying. It didn't do anything though.
0
 
LVL 16

Expert Comment

by:SSupreme
ID: 34975374
Create this rule for "continue":
#gform_next_button_3_47 {
    margin-left: 40px;
}

and remove this one:
.gform_wrapper .gfield_html.gfield_no_follows_desc {
    margin-top: 10px;
}
from: forms.....RC3.10 (line 339)
0
 

Author Comment

by:mikegeorge2
ID: 34975563
Thank you! That fixed the continue button, which is great...

http://azwm.com/arizona-mortgage-application/

But I still can't get the "progress bar" or "steps" to be flush against the top of the form. That hasn't moved. I need to specifically style the progress bar. It will be something like:

#gform ??? field_3_50

I am so confused!

Thank you again.

0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
ID: 34975611
Ok. add this rule
#field_3_50 { margin-top: 0;}

Try to add it somewhere at the end of .css file, to make sure that it will overlap previous rule.
0
 

Author Comment

by:mikegeorge2
ID: 34975685
Thank you!
0
 

Author Closing Comment

by:mikegeorge2
ID: 34975691
I  very much appreciate it.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to count occurrences of each item in an array.

790 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