Solved

Styling CSS Elements in a pre-made Form

Posted on 2011-02-24
9
822 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

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.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
"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,…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

813 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now