Solved

Styling CSS Elements in a pre-made Form

Posted on 2011-02-24
9
827 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 

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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

730 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