Solved

Styling CSS Elements in a pre-made Form

Posted on 2011-02-24
9
818 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
Comment Utility
Could you please sketch so we can see how do you want it to look?
0
 

Author Comment

by:mikegeorge2
Comment Utility
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
Comment Utility
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
 

Author Comment

by:mikegeorge2
Comment Utility
That wasn't it Jason1178. Thank you for trying. It didn't do anything though.
0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you!
0
 

Author Closing Comment

by:mikegeorge2
Comment Utility
I  very much appreciate it.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Read about why website design really matters in today's demanding market.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This video teaches users how to migrate an existing Wordpress website to a new domain.

728 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